/* ==========================================================================
   JuThai — design tokens
   Consolida os três arquivos de token do design system original
   (_ds/…/tokens/colors.css, typography.css, spacing.css) com duas mudanças
   deliberadas, marcadas com [FIX] abaixo:
     1. escala tipográfica fluida via clamp()
     2. correção dos pares de cor que reprovavam no WCAG AA
   ========================================================================== */

:root {
  /* ---------- Paleta base ---------- */
  --green-900: #2d3b2e; /* verde escuro — primária */
  --brown-700: #6e5238; /* marrom — secundária */
  --beige-300: #c6bba9; /* bege — neutra base */
  --gold-500: #da9107; /* dourado — acento */
  --cream-100: #f4f1ee; /* creme claro — neutra clara */

  /* ---------- Tons de apoio ---------- */
  --green-800: oklch(0.34 0.03 145);
  --green-700: oklch(0.42 0.035 145);
  --brown-600: oklch(0.48 0.05 65);
  --brown-500: oklch(0.56 0.055 65);
  --beige-400: oklch(0.74 0.02 80);
  --beige-200: oklch(0.86 0.015 80);
  --gold-600: oklch(0.62 0.14 70);
  --gold-400: oklch(0.78 0.13 80);

  /* ---------- Superfícies ---------- */
  --surface-base: var(--beige-300);
  --surface-alt: var(--cream-100);
  --surface-dark: var(--green-900);
  --surface-card: var(--cream-100);
  --surface-brown: var(--brown-700);

  /* ---------- Texto ----------
     [FIX] O DS definia --text-muted como brown-700 para qualquer fundo, mas
     sobre beige-300 isso dá 3.79:1 e reprova no AA (mínimo 4.5:1 para texto
     normal). Agora há um token por fundo; cada seção aplica o seu. */
  --text-heading: var(--green-900);
  --text-body: var(--green-900);
  --text-muted: var(--brown-700); /* sobre cream — 6.38:1, aprovado */
  --text-muted-on-beige: var(--green-800); /* [FIX] sobre beige — era 3.79:1 */
  --text-on-dark: var(--cream-100); /* 10.15:1 sobre verde */
  --text-on-brown: var(--cream-100); /* [FIX] era beige-300, 3.79:1 sobre marrom */
  --text-accent-on-dark: var(--gold-500); /* 4.52:1 sobre verde */

  /* [FIX] Dourado como cor de TEXTO reprova em qualquer fundo claro
     (gold-600 sobre cream = 3.07:1; sobre beige-200 = 2.37:1). O acento
     dourado passa a viver em bordas, setas e ícones — nunca no texto sobre
     fundo claro. Sobre o verde escuro o dourado continua válido. */
  --link-on-light: var(--brown-700); /* 6.38:1 sobre cream */
  --link-on-light-hover: var(--green-900);
  --accent-line: var(--gold-500); /* bordas e sublinhados decorativos */

  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-ink: var(--green-900); /* texto sobre dourado — 8.1:1 */

  /* ---------- Linhas ---------- */
  --border-subtle: oklch(0.66 0.02 80);
  --border-on-dark: oklch(0.42 0.02 145);

  /* ---------- Famílias ---------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-classic: 'EB Garamond', Georgia, serif;
  --font-body: 'Karla', ui-sans-serif, system-ui, sans-serif;

  /* ---------- Pesos ---------- */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 600;

  /* ---------- Escala tipográfica ----------
     [FIX] Era fixa (--fs-3xl valia 48px em qualquer tela, o que estourava
     no celular). Os quatro tamanhos grandes agora escalam com a viewport;
     os pequenos seguem fixos porque já são legíveis em qualquer largura.
     Os limites superiores são os valores originais do DS. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --fs-4xl: clamp(2.75rem, 2rem + 3.4vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);

  /* ---------- Entrelinha e tracking ---------- */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --ls-tight: -0.01em;
  --ls-wide: 0.14em;

  /* ---------- Espaçamento (base 8px, meio-passo 4px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Ritmo vertical e recuo lateral das seções — mobile-first.
     96px de respiro vertical é excessivo numa tela de 375px, e 32px de recuo
     lateral deixariam só 311px úteis. Ambos crescem nos breakpoints. */
  --sp-section: 56px;
  --sp-gutter: 20px;

  /* ---------- Raios ---------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Sombras — baixas, quentes, sem azul ---------- */
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 145 / 0.1);
  --shadow-md: 0 6px 20px oklch(0.3 0.03 145 / 0.12);
  --shadow-lg: 0 18px 44px oklch(0.3 0.03 145 / 0.16);

  /* ---------- Movimento — calmo, sem bounce ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* Alvo mínimo de toque. */
  --tap: 44px;
}

@media (min-width: 600px) {
  :root {
    --sp-section: 72px;
    --sp-gutter: 32px;
  }
}

@media (min-width: 900px) {
  :root {
    --sp-section: 96px;
    --header-h: 80px;
  }
}