/* ═══════════════════════════════════════════════════════════════════
   tokens.css — Design System Romero Nunes, configuracao DARK.

   Camada 1: paleta bruta e escalas (identicas ao DS original).
   Camada 2: tokens semanticos redefinidos para o tema dark, conforme
             DESIGN.md. Os valores light do DS NAO sao usados aqui.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta de marca (PaletaCores.jpeg, hex verbatim) ───────────── */
  --bordeaux: #4a1a23;
  --hunter:   #233126;
  --sage:     #6a7657;
  --bone:     #d8d0c2;
  --cedar:    #8c603e;

  /* ── Tints e shades ─────────────────────────────────────────────── */
  --hunter-900: #16201a;
  --hunter-800: #1c281f;
  --hunter-700: #233126;
  --hunter-600: #2f4132;
  --hunter-500: #3d5341;
  --hunter-300: #7d8f81;
  --hunter-100: #ccd4cd;

  --bordeaux-900: #310f16;
  --bordeaux-700: #4a1a23;
  --bordeaux-500: #6b2a35;
  --bordeaux-300: #a4707a;
  --bordeaux-100: #e2cdd1;

  --sage-700: #4f5940;
  --sage-500: #6a7657;
  --sage-300: #9aa38b;
  --sage-100: #dbe0d3;

  --cedar-700: #6d4a2e;
  --cedar-500: #8c603e;
  --cedar-300: #b8916d;
  --cedar-200: #d9c2ac;
  --cedar-100: #eee2d5;

  --bone-500: #d8d0c2;
  --bone-400: #e3ddd2;
  --bone-300: #ece7de;
  --bone-200: #f3f0e9;
  --bone-100: #faf8f4;

  --ink-900: #171a17;
  --ink-700: #3a3f3a;
  --ink-500: #5f665f;
  --ink-300: #8d938c;
  --white:   #ffffff;

  /* ── Semantico: superficies (override dark) ─────────────────────── */
  /* A tela do documento e hunter-900: e sobre ela que as secoes sem
     veu (hero e manifesto) se apoiam, deixando as nanoparticulas
     aparecerem em cheio. Os veus abaixo foram recalibrados para essa
     base — o resultado pintado de cada secao continua identico. */
  --surface-canvas:       var(--hunter-900);
  --surface-page:         var(--hunter-700);
  --surface-raised:       var(--hunter-600);
  --surface-card:         var(--hunter-600);
  --surface-sunken:       var(--hunter-800);
  --surface-inverse:      var(--bone-100);
  --surface-inverse-deep: var(--hunter-900);
  --surface-accent:       var(--bordeaux-700);
  --surface-muted:        var(--hunter-500);

  /* Versoes translucidas — deixam as nanoparticulas atravessarem
     sem comprometer o contraste do texto. Calibradas sobre
     --surface-canvas (hunter-900). */
  --veil-sunken:  rgba(29, 42, 32, 0.90);
  --veil-deep:    rgba(22, 32, 26, 0.94);
  --veil-page:    rgba(40, 56, 43, 0.72);
  --veil-footer:  rgba(22, 32, 26, 0.97);

  /* ── Semantico: texto ───────────────────────────────────────────── */
  /* Headlines em cedar, nao em bone. Titulo e corpo em bone-100/bone-300
     ficam a meio ponto de distancia um do outro: tudo lia como a mesma
     tinta creme. O cedar separa os dois papeis por matiz, nao so por
     tamanho — e e a cor de marca, ja usada em eyebrows e règras.
     Contraste sobre hunter-900: 6.2:1. Sobre hunter-700: 4.75:1. */
  --text-heading:           var(--cedar-300);
  /* Sobre superficies elevadas (hunter-600) o cedar-300 cai para 3.8:1;
     o cedar-200 recupera 6.4:1. Aplicado em components.css. */
  --text-heading-raised:    var(--cedar-200);
  --text-body:              var(--bone-300);
  --text-muted:             var(--bone-500);
  --text-subtle:            rgba(216, 208, 194, 0.76);
  --text-on-inverse:        var(--hunter-700);
  --text-on-inverse-strong: var(--hunter-900);
  --text-on-accent:         var(--bone-100);
  --text-accent:            var(--cedar-300);
  /* Sobre hunter-600 (cards) o cedar-300 cai para 3.8:1 — usar cedar-200 */
  --text-accent-raised:     var(--cedar-200);
  --text-link:              var(--bone-300);
  --text-link-hover:        var(--cedar-300);

  /* ── Semantico: linhas ──────────────────────────────────────────── */
  --border-hairline: rgba(216, 208, 194, 0.12);
  --border-default:  rgba(216, 208, 194, 0.20);
  --border-strong:   var(--bone-300);
  --border-inverse:  rgba(35, 49, 38, 0.18);
  --rule-accent:     var(--cedar-500);

  /* ── Semantico: interativo ──────────────────────────────────────── */
  --action-primary:        var(--bordeaux-700);
  --action-primary-hover:  var(--bordeaux-500);
  --action-primary-active: var(--bordeaux-900);
  --action-secondary:       var(--bone-100);
  --action-secondary-hover: var(--bone-300);
  --action-ghost-hover:     rgba(216, 208, 194, 0.08);
  --focus-ring:             var(--cedar-300);

  /* ── Tipografia ─────────────────────────────────────────────────── */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow: "Cinzel", "Times New Roman", serif;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Escala adaptada para Cinzel (all-caps pede menos corpo que a
     escala original do DS). Fluida entre 375px e 1440px. */
  --text-display-1: clamp(34px, 3.0vw + 22px, 64px);
  --text-display-2: clamp(28px, 2.1vw + 19px, 48px);
  --text-display-3: clamp(24px, 1.3vw + 19px, 36px);
  --text-title:     clamp(22px, 0.7vw + 19px, 28px);
  --text-subtitle:  clamp(19px, 0.4vw + 18px, 22px);
  --text-lead:      clamp(16px, 0.3vw + 15px, 18px);
  --text-body-lg:   16px;
  --text-body-md:   15px;
  --text-body-sm:   13.5px;
  --text-caption:   12px;
  --text-eyebrow:   11px;

  --leading-display: 1.08;
  --leading-title:   1.18;
  --leading-body:    1.65;
  --leading-tight:   1.3;

  /* 0.03em: Cinzel ja nasce com contraforma larga, e em Title Case os
     capitais de cada palavra dao o ritmo que o tracking daria. Acima
     disso o titulo comeca a se ler como letreiro, nao como frase — e
     0.05em, o antigo valor, era tambem o teto de legibilidade para
     passagens acima de ~20 caracteres (WCAG 1.4.12). Tracking largo
     fica reservado a eyebrows e labels curtos em caixa alta, abaixo. */
  --tracking-display: 0.03em;
  --tracking-body:    0;
  --tracking-caps:    0.18em;
  --tracking-eyebrow: 0.22em;
  --tracking-caps-wide: 0.32em;

  /* ── Espacamento e layout ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  --gutter-inline: clamp(24px, 5vw, 80px);
  --section-y:       clamp(72px, 8vw, 128px);
  --section-y-tight: clamp(56px, 6vw, 96px);
  --measure-prose:  62ch;
  --measure-narrow: 46ch;
  --content-max: 1220px;
  --content-max-narrow: 840px;
  /* A goteira passou a viver na propria secao (inset real, auditavel);
     o shell interno so centraliza a medida. */
  --shell-max:        calc(var(--content-max) - 2 * var(--gutter-inline));
  --shell-max-narrow: calc(var(--content-max-narrow) - 2 * var(--gutter-inline));

  /* ── Raios ──────────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-pill: 999px;
  --radius-card: var(--radius-xs);
  --radius-control: var(--radius-xs);
  --radius-image: var(--radius-none);

  /* ── Elevacao (green-tinted, nunca cinza) ───────────────────────── */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(10, 16, 12, 0.24);
  --shadow-sm: 0 2px 8px rgba(10, 16, 12, 0.28);
  --shadow-md: 0 10px 28px rgba(10, 16, 12, 0.34);
  --shadow-lg: 0 24px 60px rgba(10, 16, 12, 0.44);
  --shadow-focus: 0 0 0 2px var(--hunter-900), 0 0 0 4px var(--focus-ring);

  /* Nanoparticulas — verde claro da paleta (--sage-300 #9aa38b), lido
     em RGB por js/particles.js. O DS continua sendo a fonte unica da
     cor: mudar aqui muda o campo inteiro. */
  --particle-rgb: 154, 163, 139;

  /* Scrims — unico uso legitimo de gradiente no sistema */
  --scrim-bottom: linear-gradient(to top, rgba(22,32,26,.92) 0%, rgba(22,32,26,.45) 42%, rgba(22,32,26,0) 100%);
  --scrim-full:   linear-gradient(to right, rgba(22,32,26,.88) 0%, rgba(22,32,26,.55) 55%, rgba(22,32,26,.18) 100%);

  /* ── Movimento ──────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-entrance: cubic-bezier(.16, .84, .44, 1);
  --ease-exit:     cubic-bezier(.4, 0, .7, .2);
  --ease-orbit:    cubic-bezier(.4, 0, .2, 1);

  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-reveal: 700ms;
  --duration-orbit: 760ms;

  --transition-control:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  /* Altura do header sticky — lida por scroll-margin e pelo rail */
  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}