/* tokens.css — sistema de design da vitrine ISAI (fundação, 23 set 2026)
   ------------------------------------------------------------------
   Este arquivo é o ÚNICO lugar onde valores de cor, letra, espaço, raio,
   sombra e movimento são escritos. Todo componente (componentes.css) e toda
   página lê daqui. Trocar a "pele" do site = trocar valores aqui.

   PELE (23 set 2026, decisão do Sr. Felipe na folha de espécimes): par A,
   "Redação": Newsreader (título) · Geist (texto) · Geist Mono (timecode).
   Acento: o dourado do brand book (#8a6a28 no claro, #d6b56d no escuro).
   Tudo aqui; nenhum outro arquivo sabe qual fonte ou cor está em uso. Regras de base seguidas: sem preto puro, sem branco puro,
   um só acento, contraste AA no corpo, tema claro e escuro com os mesmos
   nomes de token. */

:root {
  /* ---------- Tipografia (tokens; valores provisórios) ---------- */
  --pele-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --pele-font-text:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pele-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--pele-font-display);
  --font-text:    var(--pele-font-text);
  --font-mono:    var(--pele-font-mono);

  /* Escala modular (base 16, razão ~1.2 no corpo, saltos maiores no display) */
  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9375rem;  /* 15 */
  --text-base: 1.0625rem;  /* 17  (corpo de leitura, decisão 11 set) */
  --text-lg:   1.1875rem;  /* 19 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  3.75rem;    /* 60 */
  --text-display: clamp(2.5rem, 1.2rem + 4.5vw, 4.5rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --measure: 65ch;

  /* ---------- Espaço (escala de 4) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(var(--space-8), 6vw + 1rem, var(--space-10));
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;
  --container-wide: 1400px;
  --nav-height: 68px;

  /* ---------- Forma ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-w: 1px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 600ms;

  /* ---------- Cor: base neutra (tema claro) ----------
     Escala de cinza fria e discreta; nomes por papel, não por tom. */
  --bg:            #f3f2ef;
  --bg-elevated:   #fbfaf8ee;
  --bg-sunken:     #eae8e3;
  --fg:            #1a1815;
  --fg-muted:      #4d4842;
  --fg-subtle:     #7d766c;
  --line:          #d8d3cb;
  --line-strong:   #b8b1a7;

  /* Um só acento: o dourado da marca (brand book v1), com moderação */
  --accent:        #8a6a28;
  --accent-hover:  #6f541f;
  --accent-fg:     #f8f4ec;
  --accent-soft:   #efe6d1;

  /* Estados semânticos (usados só em formulário e medidor) */
  --ok:    #2e7d57;
  --warn:  #9a6b12;
  --err:   #a83a3a;

  --shadow-sm: 0 1px 2px rgba(23, 24, 28, 0.06), 0 1px 1px rgba(23, 24, 28, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(23, 24, 28, 0.18);
  --shadow-lg: 0 24px 48px -24px rgba(23, 24, 28, 0.28);

  --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent);

  color-scheme: light;
}

/* ---------- Tema escuro: mesmos nomes, outros valores ---------- */
:root[data-theme="dark"] {
  --bg:            #141311;
  --bg-elevated:   #1c1a17ee;
  --bg-sunken:     #0e0d0b;
  --fg:            #ede8e0;
  --fg-muted:      #c4bdb2;
  --fg-subtle:     #91887e;
  --line:          #2c2924;
  --line-strong:   #443f38;

  --accent:        #d6b56d;   /* dourado claro no escuro, sem dessaturar */
  --accent-hover:  #e3c98a;
  --accent-fg:     #14100a;
  --accent-soft:   #2a2416;

  --ok:    #6cc59a;
  --warn:  #d9a842;
  --err:   #e07a7a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

/* Sem preferência salva: segue o sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:            #141311;
    --bg-elevated:   #1c1a17ee;
    --bg-sunken:     #0e0d0b;
    --fg:            #ede8e0;
    --fg-muted:      #c4bdb2;
    --fg-subtle:     #91887e;
    --line:          #2c2924;
    --line-strong:   #443f38;
    --accent:        #d6b56d;
    --accent-hover:  #e3c98a;
    --accent-fg:     #14100a;
    --accent-soft:   #2a2416;
    --ok:    #6cc59a;
    --warn:  #d9a842;
    --err:   #e07a7a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

/* Movimento reduzido: tudo instantâneo */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}