/* =========================================================================
   tokens.css — Fonte única de verdade do design system
   Cores, tipografia fluida, espaçamento, raios e sombras.
   Nada aqui produz estilo por si só: apenas declara variáveis.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Cores — marca
     Contraste verificado contra as superfícies em que cada uma é usada
     (mínimo WCAG AA 4.5:1 para texto).
     --------------------------------------------------------------------- */
  --c-brand-900: #2f4a41;
  --c-brand-700: #3e6a5d;   /* 5.9:1 sobre branco  */
  --c-brand-600: #4e7c6f;   /* 4.7:1 sobre branco  */
  --c-brand-100: #edf3ec;
  --c-brand-accent: #88bda4; /* uso exclusivo sobre fundo escuro */

  /* Cores — texto sobre fundo claro */
  --c-ink-900: #1e2a25;     /* títulos                */
  --c-ink-700: #435049;     /* corpo                  */
  --c-ink-500: #5c6b63;     /* secundário  — 5.5:1    */
  --c-ink-400: #66736c;     /* labels/eyebrow — 5.0:1 */

  /* Cores — superfícies */
  --c-surface: #ffffff;
  --c-surface-alt: #fafbf9;
  --c-surface-sunken: #f6f8f5;
  --c-page: #ededec;

  /* Cores — bloco escuro (seção de segurança) */
  --c-dark: #1e2a25;
  --c-on-dark: #ffffff;
  --c-on-dark-muted: #a9b5ae; /* 7.0:1 sobre --c-dark */

  /* Cores — traços e feedback */
  --c-line: #e4e8e5;
  --c-line-soft: #eaedea;
  --c-success: #3e6a5d;
  --c-error: #a63b30;       /* 6.4:1 sobre branco */

  /* ---------------------------------------------------------------------
     Tipografia
     Escala fluida: cresce com a viewport entre o mínimo (mobile) e o
     máximo (desktop), dispensando media queries para tamanho de texto.
     --------------------------------------------------------------------- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);      /* 12 → 13 */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);    /* 14 → 15 */
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);      /* 16 → 17 */
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);       /* 17 → 19 */
  --fs-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);      /* 19 → 22 */
  --fs-xl: clamp(1.5rem, 1.25rem + 1.15vw, 2rem);           /* 24 → 32 — h2 */
  --fs-2xl: clamp(1.75rem, 1.15rem + 2.7vw, 3rem);          /* 28 → 48 — h1 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.7;

  --tracking-wide: 0.06em;

  /* ---------------------------------------------------------------------
     Espaçamento
     --------------------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;

  /* Respiro vertical das seções e recuo lateral do container: fluidos, para
     que o mobile não desperdice largura com padding de desktop. */
  --section-y: clamp(3.25rem, 7vw, 5.25rem);
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* Larguras máximas */
  --maxw: 1200px;
  --maxw-narrow: 920px;
  --maxw-prose: 62ch;

  /* ---------------------------------------------------------------------
     Formas
     --------------------------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 18px -12px rgb(20 32 26 / 0.14);
  --shadow-md: 0 12px 28px -18px rgb(20 32 26 / 0.2);
  --shadow-lg: 0 18px 40px -24px rgb(20 32 26 / 0.26);
  --shadow-brand: 0 8px 18px -10px rgb(78 124 111 / 0.55);

  /* Altura do cabeçalho fixo — usada pelo scroll-padding das âncoras */
  --header-h: 68px;
}