/* ==========================================================================
   tokens.css — Variáveis globais · versão 1B · CAPITAL ESCURO
   Fonte única de verdade para cor, tipografia, espaçamento, borda e sombra.
   Nenhum valor de cor ou medida deve ser escrito fora deste arquivo.

   Identidade em dois tempos:
   • CAPA escura — barra utilitária, cabeçalho, herói, faixa de ativos,
     indicadores, faixa de fotografia, pôster e rodapé.
   • CONTEÚDO claro — tudo o que se lê: painéis brancos sobre campo cinza-azulado.
   O azul do logotipo é a tinta no claro (#282B77) e a luz no escuro (#8B93F0).

   ESCALA TIPOGRÁFICA — regra única do projeto, igual nos dois modelos:
     rótulo/chip 12 · meta 13 · corpo e interface 15 · corpo de artigo 16 ·
     apoio 17→19 · h3 18 · h2 22→28 · h1 interna 26→34 · h1 home 32→48
   Teto de 48px em qualquer tela.
   ========================================================================== */

:root {
  /* ---- Marca ------------------------------------------------------------ */
  --brand:              #282B77;   /* azul do logotipo — tinta sobre claro */
  --brand-600:          #1f2260;
  --brand-700:          #171a4a;
  --brand-tint:         #e8e9f6;   /* lavanda de apoio */
  --brand-tint-2:       #f1f2fb;   /* lavanda claro — chip, faixa */
  --accent:             #8B93F0;   /* azul-luz — só sobre campo escuro */
  --accent-strong:      #a5abf6;
  --accent-soft:        rgba(139, 147, 240, .14);
  --accent-line:        rgba(139, 147, 240, .45);

  /* ---- Campo claro — o conteúdo ---------------------------------------- */
  --bg:                 #f4f5f9;   /* campo cinza-azulado */
  --panel:              #ffffff;   /* painel de conteúdo */
  --card:               var(--panel);
  --surface:            #eaebf3;   /* faixa alternada */
  --surface-2:          #f9f9fc;
  --ink:                #14151c;
  --ink-muted:          #4c4e5c;
  --ink-faint:          #676a7a;
  --rule:               rgba(20, 21, 28, .16);
  --rule-soft:          rgba(20, 21, 28, .09);
  --rule-w:             1px;
  --on-brand:           #ffffff;

  /* ---- Campo escuro — as capas ----------------------------------------- */
  --dark:               #0b0d1a;   /* campo profundo */
  --dark-panel:         #12162b;   /* painel sobre o escuro */
  --dark-panel-2:       #0e1122;
  --dark-foot:          #080a15;   /* rodapé */
  --on-dark:            #ececf4;
  --on-dark-muted:      rgba(236, 236, 244, .74);
  --on-dark-faint:      rgba(236, 236, 244, .56);
  --rule-dark:          rgba(255, 255, 255, .14);
  --rule-dark-soft:     rgba(255, 255, 255, .08);

  /* ---- Tipografia ------------------------------------------------------ */
  --font:         "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Archivo", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.9375rem;
  --text-md:    1rem;
  --text-lg:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-h3:    1.125rem;
  --text-h2:    clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --text-h1:    clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
  --text-hero:  clamp(2rem, 1.35rem + 2.4vw, 3rem);
  --text-xl:    var(--text-h3);
  --text-2xl:   var(--text-h2);
  --text-3xl:   var(--text-h1);

  /* Respiro de leitura — generoso por decisão de projeto. */
  --leading-tight: 1.18;
  --leading-snug:  1.4;
  --leading-body:  1.7;
  --leading-read:  1.78;   /* corpo de artigo */
  --tracking-tight: -0.022em;
  --tracking-label:  0.16em;

  /* ---- Espaçamento ----------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.375rem;
  --space-6:  1.75rem;
  --space-7:  2.25rem;
  --space-8:  2.75rem;
  --space-9:  3.25rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --section-y:  clamp(2.5rem, 1.8rem + 2vw, 4rem);
  --gutter:     clamp(1rem, 0.55rem + 1.6vw, 2rem);
  --gap:        1rem;

  /* ---- Larguras -------------------------------------------------------- */
  --w-narrow:  44rem;
  --w-default: 66rem;
  --w-wide:    82.5rem;

  /* ---- Borda — canto reto, o painel se define pela linha --------------- */
  --radius:      0px;
  --radius-lg:   0px;
  --radius-sm:   0px;
  --radius-pill: 0px;

  /* ---- Sombra ---------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(20, 21, 28, .05);
  --shadow-card:  0 1px 3px rgba(20, 21, 28, .06);
  --shadow-float: 0 10px 30px rgba(11, 13, 26, .35);
  --shadow-lift:  0 12px 30px rgba(20, 21, 28, .13);
  --glow:         0 0 0 3px rgba(40, 43, 119, .08);
  --glow-dark:    0 0 0 3px rgba(139, 147, 240, .12);

  /* ---- Movimento ------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  200ms;
  --dur-slow: 420ms;

  /* ---- Camadas --------------------------------------------------------- */
  --z-header: 50;
  --z-panel:  40;
  --z-drawer: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}