/* ============================================================
   360Drive — Design tokens
   Tema escuro premium (azul-petróleo + ouro) do novo design.
   Sempre use estas variáveis; não hardcode hex/px nos demais CSS.
   ============================================================ */
:root {
  /* ── Fundo ─────────────────────────────────────────── */
  --bg-0: #070F1C;
  --bg-1: #0A1730;
  --bg-2: #091528;
  --bg-body: radial-gradient(130% 90% at 50% -12%, rgba(226, 184, 92, 0.12), transparent 55%),
             radial-gradient(90% 60% at 100% 0%, rgba(75, 155, 255, 0.10), transparent 50%),
             linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%);

  /* ── Texto ─────────────────────────────────────────── */
  --text: #EEF3FF;
  --text-strong: #F4F7FF;
  --text-soft: #C7D2E6;
  --text-muted: #A6B4CE;
  --text-dim: #6C7A96;
  --text-ink: #241906;        /* sobre superfícies douradas */

  /* ── Ouro / acento ─────────────────────────────────── */
  --gold: #E3B85C;
  --gold-light: #E7C67E;
  --gold-lighter: #F6E2A0;
  --gold-dark: #C6923A;
  --gold-grad: linear-gradient(135deg, #F6E2A0 0%, #E3B85C 46%, #C6923A 100%);

  /* ── Azul / info ───────────────────────────────────── */
  --blue: #4B9BFF;
  --blue-light: #8FBEFF;

  /* ── Estados ───────────────────────────────────────── */
  --green: #58D6A0;
  --danger: #FF7A8A;
  --danger-soft: #FF9DA8;

  /* ── Superfícies ───────────────────────────────────── */
  --panel-grad: linear-gradient(180deg, rgba(17, 33, 59, 0.92), rgba(10, 21, 41, 0.95));
  --panel-grad-soft: linear-gradient(180deg, rgba(15, 29, 53, 0.90), rgba(10, 21, 41, 0.94));
  --price-grad: linear-gradient(180deg, rgba(19, 36, 64, 0.97), rgba(10, 20, 38, 0.97));
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.05);
  --header-bg: rgba(7, 15, 28, 0.72);

  /* ── Bordas ────────────────────────────────────────── */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(226, 184, 92, 0.30);
  --border-gold-soft: rgba(226, 184, 92, 0.18);
  --border-blue: rgba(75, 155, 255, 0.60);

  /* ── Sombras ───────────────────────────────────────── */
  --shadow-card: 0 34px 80px rgba(0, 0, 0, 0.50);
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.40);
  --shadow-price: 0 26px 62px rgba(0, 0, 0, 0.52);
  --shadow-gold: 0 16px 34px rgba(198, 146, 58, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.50);
  --shadow-gold-hover: 0 20px 42px rgba(198, 146, 58, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --focus-ring: 0 0 0 3px rgba(226, 184, 92, 0.18);

  /* ── Raios ─────────────────────────────────────────── */
  --radius-sm: 11px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  /* ── Espaçamento ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Tipografia ────────────────────────────────────── */
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* ── Transições ────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-md: 200ms;

  /* ── Layout ────────────────────────────────────────── */
  --page-max: 1120px;
}