/* ============================================================
   NEXUS DESIGN SYSTEM — v2  ·  tokens.css  (MARCA OFICIAL)
   Fonte de verdade: NEXUS_DESIGN_SYSTEM.md v1.0
   Princípio-mestre: ENGENHARIA DE LUXO.
   Escuro é o palco, ouro é o spot (ouro ≤ 15% da tela). Dark-first.
   Aplica em: Nexus Core · Ads Hub · Sales Hub.
   ============================================================ */

:root {
  /* ---------- MARCA · OURO ---------- */
  --gold:        #FFCD01;   /* primary — CTA, números, ícone ativo, logo */
  --gold-hover:  #E6B800;   /* hover do primary */
  --gold-dim:    #8B7A52;   /* acento fosco, bordas premium */
  --gold-soft:   rgba(255,205,1,0.10);
  --gold-glow:   rgba(255,205,1,0.30);

  /* acento ativo (trocado por produto via JS) — Core/Ads = ouro */
  --brand:       var(--gold);
  --brand-hover: var(--gold-hover);
  --brand-ink:   #0A0A0A;   /* texto SOBRE o acento (preto) */
  --brand-glow:  var(--gold-glow);

  /* ---------- NEUTROS (dark-first, levemente quente) ---------- */
  --gray-950:#000000; --gray-900:#0A0A0A; --gray-850:#111113; --gray-800:#161618;
  --gray-700:#1F1F22; --gray-600:#2A2A2E; --gray-500:#3A3A40; --gray-400:#5C5C63;
  --gray-300:#8A8A90; --gray-200:#B5B5BB; --gray-100:#DADADE; --gray-50:#F5F5F4;

  /* ---------- SEMÂNTICAS ---------- */
  --success:#34D399; --success-deep:#1E3028;
  --warning:#FBBF24;
  --error:#F87171;   --error-brand:#C8102E;
  --info:#9AA7B2;
  --success-soft:rgba(52,211,153,0.12);
  --warning-soft:rgba(251,191,36,0.12);
  --error-soft:rgba(248,113,113,0.12);
  --info-soft:rgba(154,167,178,0.12);

  /* ---------- TOKENS SEMÂNTICOS (use ESTES) — tema dark ---------- */
  --bg:             var(--gray-900);
  --surface:        var(--gray-850);
  --surface-raised: var(--gray-800);
  --border:         var(--gray-700);
  --border-strong:  var(--gray-600);
  --text:           var(--gray-50);
  --text-muted:     var(--gray-300);
  --text-subtle:    var(--gray-400);
  --hover-row:      var(--gray-800);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Neue Haas Grotesk Display Pro", "Outfit", system-ui, sans-serif;
  --font-sans:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:   "Cormorant Garamond", Georgia, serif;

  /* escala (tabela §4 do brand doc) */
  --fs-display:  clamp(40px, 5.4vw, 56px); /* Display XL 56/60 */
  --fs-display-lg: 44px;
  --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 16px;
  --fs-body: 15px; --fs-sm: 13px; --fs-caption: 11px; --fs-eyebrow: 11px;

  --lh-display: 1.07; --lh-h: 1.2; --lh-body: 1.5;
  --ls-display: -0.02em; --ls-h: -0.01em; --ls-eyebrow: 0.22em; --ls-caption: 0.04em;

  /* ---------- ESPAÇO (base 4) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  /* aliases do brand doc */
  --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px; --sp-4xl:96px;

  /* ---------- RAIO (contido — engenharia, não pílula) ---------- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:9999px;

  /* ---------- SOMBRAS (dark-tuned: borda + sombra suave + glow) ---------- */
  --sh-xs: 0 1px 2px rgba(0,0,0,.40);
  --sh-sm: 0 2px 6px rgba(0,0,0,.45);
  --sh-md: 0 8px 24px -12px rgba(0,0,0,.70);
  --sh-lg: 0 18px 40px -20px rgba(0,0,0,.80);
  --sh-xl: 0 30px 70px -30px rgba(0,0,0,.85);
  --glow-gold: 0 0 0 1px rgba(255,205,1,.30), 0 10px 40px -16px rgba(255,205,1,.45);

  /* ---------- MOVIMENTO ---------- */
  --t-instant:0ms; --t-fast:120ms; --t-base:180ms; --t-slow:240ms; --t-slower:320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ---------- LAYOUT ---------- */
  --sidebar-w:264px; --header-h:64px; --content-max:1240px;
}

/* ===== TEMA CLARO (secundário — docs/faturas; dark é o default) ===== */
.theme-light {
  --bg:#FFFFFF; --surface:#F7F7F6; --surface-raised:#FFFFFF;
  --border:#E6E6E3; --border-strong:#D8D8D4;
  --text:#0A0A0A; --text-muted:#5C5C63; --text-subtle:#8A8A90; --hover-row:#F2F2F0;
  --brand-ink:#0A0A0A;
  --sh-xs:0 1px 2px rgba(10,10,11,.06); --sh-sm:0 2px 8px rgba(10,10,11,.08);
  --sh-md:0 8px 24px -12px rgba(10,10,11,.14); --sh-lg:0 18px 40px -20px rgba(10,10,11,.16);
  --sh-xl:0 30px 70px -30px rgba(10,10,11,.18);
}

/* ============================================================ RESET + BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-sans);
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"tnum","ss01";
}
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--gold); color:var(--brand-ink); }

/* utilidades tipográficas */
.display{ font-family:var(--font-display); font-size:var(--fs-display); font-weight:600; line-height:var(--lh-display); letter-spacing:var(--ls-display); }
.h1{ font-family:var(--font-display); font-size:var(--fs-h1); font-weight:600; line-height:var(--lh-h); letter-spacing:var(--ls-h); }
.h2{ font-size:var(--fs-h2); font-weight:600; line-height:var(--lh-h); letter-spacing:var(--ls-h); }
.h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.3; }
.h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.4; }
.lead{ font-size:18px; color:var(--text-muted); line-height:var(--lh-body); }
.eyebrow,.over{ font-size:var(--fs-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--text-subtle); }
.caption{ font-size:var(--fs-caption); font-weight:500; letter-spacing:var(--ls-caption); }
.muted{ color:var(--text-muted); }
.tnum{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); }
.gold{ color:var(--gold); }