/* ===================================================================
   TOKENS — Vládia Costa Advogada
   Duas camadas. Componentes consomem SÓ a camada semântica.
   Nenhuma primitiva pode aparecer fora deste arquivo.
   =================================================================== */

:root {
  /* ---------- Camada primitiva ---------- */

  /* Escuros quentes — 5 degraus. A profundidade do site vem daqui:
     seções escuras nunca são o mesmo preto, elas descem e sobem. */
  --ink-950: #0B0908;
  --ink-900: #151110;
  --ink-800: #1D1715;
  --ink-700: #2A211D;
  --ink-600: #3A2E28;

  /* Terracota — o único hex confiável da paleta da cliente, com
     um degrau acima e outro abaixo para hover e estados. */
  --clay-700: #5C2F17;
  --clay-600: #763F21;
  --clay-500: #8F5230;
  --clay-400: #A9663F;

  /* Dourado — filete e detalhe. Nunca texto corrido. */
  --gold-600: #8A6E18;
  --gold-500: #A8871F;
  --gold-400: #C9A227;
  --gold-300: #DFC367;

  /* Areia — o miolo claro, 4 degraus para as seções alternarem. */
  --sand-300: #DCC7B4;
  --sand-200: #E5D6C8;
  --sand-100: #EFE3D8;
  --sand-050: #F7EFE7;
  --paper:    #FDF8F3;

  --mocha-500: #8B6A55;
  --warm-600: #56504B;
  --warm-500: #6B625C;

  /* ---------- Camada semântica ---------- */

  /* Superfícies — o ritmo escuro/claro da página */
  --surface: var(--sand-100);
  --surface-raised: var(--sand-050);
  --surface-paper: var(--paper);
  --surface-sunken: var(--sand-200);
  --surface-dark: var(--ink-900);
  --surface-darker: var(--ink-950);
  --surface-dark-raised: var(--ink-800);
  --surface-dark-card: var(--ink-700);

  /* Texto */
  --text: var(--ink-900);
  --text-muted: var(--warm-500);
  --text-soft: var(--warm-600);
  --text-on-dark: var(--sand-050);
  /* 0.66 → 7,8:1 e 0.55 → 5,6:1 sobre --ink-950. Abaixo de 0.55 o
     texto de 11px não alcança os 4,5:1 exigidos pela WCAG AA. */
  --text-on-dark-muted: rgba(247, 239, 231, 0.66);
  --text-on-dark-faint: rgba(247, 239, 231, 0.55);

  /* Acento e filetes */
  --accent: var(--clay-600);
  --accent-hover: var(--clay-700);
  --accent-on-dark: var(--clay-400);
  --rule: var(--gold-400);
  --rule-on-dark: var(--gold-300);
  --focus: var(--clay-600);
  --focus-on-dark: var(--gold-300);

  /* Divisórias — a mesma ideia dos dois lados, calibrada por fundo */
  --line: rgba(21, 17, 16, 0.14);
  --line-strong: rgba(21, 17, 16, 0.24);
  --line-gold: rgba(201, 162, 39, 0.34);
  --line-on-dark: rgba(223, 195, 103, 0.22);
  --line-on-dark-strong: rgba(223, 195, 103, 0.42);

  /* Halos e véus — profundidade sem sombra dura */
  --halo-gold: rgba(201, 162, 39, 0.16);
  --halo-clay: rgba(118, 63, 33, 0.22);
  --veil-dark: rgba(11, 9, 8, 0.55);

  /* ---------- Espaçamento — base 8 ---------- */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 104px;
  --space-8: 152px;

  /* Ritmo de seção: densas x respiro. O DESIGN.md manda variar. */
  --section-dense: clamp(64px, 9vw, 104px);
  --section-air: clamp(88px, 13vw, 152px);

  /* ---------- Forma ---------- */
  --radius: 2px;
  --radius-lg: 3px;

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- Grade ---------- */
  --shell: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
}