/* ── TOKENS IMMERSIVE ───────────────────────────────────────────────── */
/* Fase 2 – design system Immersive + alias de compat para tokens antigos
   referenciados em style="..." nas views da Fase 1.                     */
:root {
  /* ── Immersive base tokens ─────────────────────────────────────────── */
  --bg:          #EEF1F7;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FC;
  --ink:         #161A23;
  --muted:       #5A6373;
  --faint:       #8A93A4;
  --hair:        #E6E9F0;
  --hair-2:      #EEF1F7;

  --azul:        #2F5096;
  --azul-deep:   #21396C;
  --navy:        #14213D;
  --azul-soft:   #5C7BC0;
  --gold:        #C9A85C;
  --gold-bright: #DBC07A;
  --gold-glow:   rgba(214,184,110,.52);

  --green:       #1FA971;
  --red:         #D45B5B;

  --band:        linear-gradient(125deg,#14213D 0%,#21386A 46%,#2F5096 100%);

  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  26px;

  --sh-1:     0 1px 2px rgba(22,26,35,.05), 0 2px 6px rgba(22,26,35,.04);
  --sh-2:     0 6px 16px rgba(22,26,35,.07), 0 2px 6px rgba(22,26,35,.05);
  --sh-3:     0 18px 40px -12px rgba(33,57,108,.28), 0 6px 16px rgba(22,26,35,.08);
  --sh-float: 0 24px 50px -18px rgba(33,57,108,.34), 0 8px 20px rgba(22,26,35,.08);

  --ff-display: 'Outfit', sans-serif;
  --ff-body:    'Hanken Grotesk', sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;

  --maxw:  1240px;
  --nav-h: 64px;

  /* ── Alias de compat: tokens antigos → equivalentes immersive ───────── */
  /* Cores */
  --aviso:         #F5A623;                     /* sem equivalente direto – mantém literal */
  --azul-claro:    var(--azul-soft, #5C7BC0);
  --azul-profundo: var(--azul-deep, #21396C);
  --dourado:       var(--gold, #C9A85C);
  --dourado-escuro:#A8863F;                     /* gold escurecido */
  --erro:          var(--red, #D45B5B);

  /* Cinzas */
  --cinza-50:  var(--surface-2, #F7F9FC);
  --cinza-400: var(--muted, #5A6373);
  --cinza-600: var(--faint, #8A93A4);
  --cinza-700: #42403D;                         /* sem equivalente – mantém literal */
  --cinza-800: var(--ink, #161A23);

  /* Tipografia */
  --font-display: var(--ff-display);
  --font-body:    var(--ff-body);
  --font-mono:    var(--ff-mono);

  /* Tamanhos de texto */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   20px;

  /* Espaçamentos */
  --sp2:  8px;
  --sp3:  12px;
  --sp4:  16px;
  --sp5:  20px;
  --sp6:  24px;
  --sp8:  32px;
  --sp12: 48px;
}