/* ==========================================================================
   ProspectZyra — DESIGN SYSTEM · CAMADA 1 · TOKENS
   --------------------------------------------------------------------------
   FONTE ÚNICA DE VERDADE. Edite AQUI e o sistema inteiro acompanha.
   Ordem de carregamento:  tokens.css → base.css → components.css → app.css
   Modelo mental (inspirado nos design systems da Apple / HIG):
       1. PRIMITIVOS  = paleta crua (valores fixos, NÃO usar direto na tela)
       2. SEMÂNTICOS  = o que as telas usam (aponta para primitivos)
       3. ESCALAS     = espaço, tipografia, forma, sombra, movimento, camadas
   Regra de ouro: telas e componentes só falam em tokens SEMÂNTICOS/ESCALAS,
   nunca em valores crus. Assim, mudar 1 primitivo recalcula tudo.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ======================================================================
     1. PRIMITIVOS  (paleta crua — referência interna)
     ====================================================================== */
  /* neutros (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f4f6fa;
  --slate-150: #f1f4f9;
  --slate-200: #e4e8f0;
  --slate-300: #d3dae6;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #334155;
  --slate-900: #0f172a;
  --white:     #ffffff;

  /* azul (acento) */
  --blue-100: #eaf1fe;
  --blue-150: #e8effc;
  --blue-200: #cdddf9;
  --blue-300: #bcd0f7;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* estados */
  --green-600:  #0f9d63;
  --green-100:  #e6f6ef;
  --red-600:    #d92d20;
  --red-100:    #fdecea;
  --amber-700:  #b45309;
  --amber-600:  #d97706;
  --amber-100:  #fdf3e6;
  --amber-150:  #fce6cf;
  --violet-600: #6938ef;
  --violet-100: #efeafd;
  --pink-600:   #c11574;
  --pink-100:   #fbe8f2;

  /* hud (cabeçalho escuro) */
  --ink-900: #0b1220;
  --ink-800: #111a2e;

  /* ======================================================================
     2. SEMÂNTICOS  (o que as telas e componentes usam)
     ====================================================================== */
  /* superfícies */
  --bg:      var(--slate-100);
  --bg-2:    var(--white);
  --panel:   var(--white);
  --panel-2: var(--white);
  --panel-3: var(--slate-150);
  --line:    var(--slate-200);
  --line-2:  var(--slate-300);

  /* texto */
  --ink:     var(--slate-900);
  --ink-2:   var(--slate-600);
  --muted:   var(--slate-500);
  --muted-2: var(--slate-400);

  /* acento (azul corporativo) */
  --acc:      var(--blue-700);
  --acc-2:    var(--blue-600);
  --acc-soft: var(--blue-150);
  --acc-ink:  var(--white);

  /* sinal secundário */
  --sig:      var(--blue-600);
  --sig-2:    var(--blue-800);
  --sig-soft: var(--blue-100);

  /* estados semânticos */
  --green:       var(--green-600);
  --green-soft:  var(--green-100);
  --red:         var(--red-600);
  --red-soft:    var(--red-100);
  --pink:        var(--pink-600);
  --pink-soft:   var(--pink-100);
  --violet:      var(--violet-600);
  --violet-soft: var(--violet-100);
  --amber:       var(--amber-700);
  --amber-2:     var(--amber-600);
  --amber-soft:  var(--amber-100);

  /* cabeçalho escuro (hud) */
  --hud-bg:    var(--ink-900);
  --hud-bg-2:  var(--ink-800);
  --hud-ink:   var(--slate-50);
  --hud-muted: #9aa7bd;
  --hud-line:  rgba(255, 255, 255, 0.10);

  /* ======================================================================
     3. TIPOGRAFIA
     ====================================================================== */
  --display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-xs: 11px;  --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px;
  --fs-lg: 18px;  --fs-xl: 22px;   --fs-2xl: 30px;    --fs-3xl: 40px;

  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: 1.1; --lh-snug: 1.35; --lh-normal: 1.55;
  --ls-tight: -0.01em; --ls-wide: 0.04em; --ls-caps: 0.08em; --ls-label: 0.14em;

  /* ======================================================================
     4. ESPAÇO  (base 4px)
     ====================================================================== */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px;
  --space-8: 40px; --space-9: 48px; --space-10: 64px;

  /* ======================================================================
     5. FORMA  (raio)
     ====================================================================== */
  --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ======================================================================
     6. SOMBRA & FOCO
     ====================================================================== */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-3: 0 24px 56px rgba(16, 24, 40, 0.18);
  --ring:    0 0 0 3px rgba(29, 78, 216, 0.20);
  --ring-2:  0 0 0 3px rgba(37, 99, 235, 0.18);
  --glow-acc: 0 1px 2px rgba(16, 24, 40, 0.06);

  /* ======================================================================
     7. MOVIMENTO
     ====================================================================== */
  --dur-1: 0.12s; --dur-2: 0.18s; --dur-3: 0.3s; --dur-4: 0.6s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: var(--ease-out);

  /* ======================================================================
     8. CAMADAS (z-index)
     ====================================================================== */
  --z-base: 1; --z-hud: 30; --z-subnav: 39; --z-nav: 40; --z-modal: 70; --z-toast: 80;

  /* ======================================================================
     9. LAYOUT
     ====================================================================== */
  --container: 1360px;
  --gutter: clamp(16px, 4vw, 44px);
}