/* ============================================================
   DESIGN TOKENS — "O Novo Eu" quiz
   Paleta extraída da colagem (verde-floresta / marionete dourada /
   cérebro). Texto claro sobre vidro escuro — a arte de fundo não
   reserva mais uma área de papel claro para o conteúdo se apoiar.
   ============================================================ */

:root {
  /* --- Cor --- */
  --color-forest-900: #10190f;
  --color-forest-700: #1b2a1f;
  --color-forest-600: #243626;

  /* Superfícies de vidro escuro (cards, painel de resultado) */
  --color-surface-1: rgba(243, 239, 228, 0.05);
  --color-surface-1-hover: rgba(243, 239, 228, 0.09);
  --color-surface-2: rgba(8, 14, 8, 0.6);
  --color-surface-border: rgba(228, 197, 112, 0.24);
  --color-surface-border-soft: rgba(243, 239, 228, 0.16);

  --color-gold-300: #e4c570;
  --color-gold-500: #c9a24b;
  --color-gold-600: #b08d46;
  --color-gold-700: #8f7238;

  /* Hierarquia de texto sobre o fundo escuro: 900 = títulos/alto
     contraste, 700 = corpo, 500 = legenda/meta — do mais claro ao
     mais apagado. */
  --color-ink-900: #f6f1e3;
  --color-ink-700: #cdd1c3;
  --color-ink-500: #97a08c;

  /* Texto sobre fundo dourado sólido (botão primário, skip-link) —
     precisa continuar escuro mesmo com o tema geral claro-sobre-escuro. */
  --color-on-gold: #241d12;

  --color-offwhite: #f3efe4;

  --color-error: #ff9a86;

  /* --- Tipografia --- */
  --font-title: "Rizoma", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Helvetica Local", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-h1: 2.75rem;
  --fs-h2-eyebrow: 0.9375rem;
  --fs-h3: 1.5rem;
  --fs-body: 1rem;
  --fs-button: 1rem;
  --fs-caption: 0.8125rem;

  --lh-h1: 1.15;
  --lh-h2-eyebrow: 1.3;
  --lh-h3: 1.25;
  --lh-body: 1.6;
  --lh-caption: 1.4;

  --ls-h1: 0.01em;
  --ls-h2-eyebrow: 0.1em;
  --ls-h3: 0.02em;
  --ls-button: 0.04em;
  --ls-caption: 0.02em;

  /* --- Espaçamento --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;

  /* --- Raio / sombra --- */
  --radius-card: 3px;
  --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.45);

  /* --- Breakpoints (referência, usados em @media) --- */
  --bp-tablet: 640px;
  --bp-bg-swap: 900px;
  --bp-desktop: 1024px;

  /* --- Motion tokens --- */
  --duration-instant: 100ms;
  --duration-micro: 180ms;
  --duration-transition-exit: 320ms;
  --duration-transition: 420ms;
  --duration-page: 600ms;
  --duration-result-reveal: 480ms;
  --duration-thread-progress: 520ms;
  --duration-stagger-word: 70ms;
  --duration-stagger-line: 90ms;
  --duration-stagger-paragraph: 130ms;
  --duration-suspense: 2600ms;
  --duration-glow-pulse: 2400ms;
  --duration-select-hold: 550ms;

  --ease-out-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-editorial: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring-thread: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;
}

@media (min-width: 640px) {
  :root {
    --fs-h1: 2.75rem;
  }
}

@media (max-width: 639px) {
  :root {
    --fs-h1: 1.625rem;
    --fs-h2-eyebrow: 0.75rem;
    --fs-h3: 1.125rem;
    --fs-body: 0.9375rem;
    --fs-button: 0.9375rem;
    --fs-caption: 0.75rem;
    --ls-h1: 0.005em;
    --ls-h2-eyebrow: 0.06em;
    --ls-h3: 0.015em;
    --lh-body: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-micro: 100ms;
    --duration-transition-exit: 120ms;
    --duration-transition: 120ms;
    --duration-page: 120ms;
    --duration-result-reveal: 120ms;
    --duration-thread-progress: 0ms;
    --duration-stagger-word: 0ms;
    --duration-stagger-line: 0ms;
    --duration-stagger-paragraph: 0ms;
    --duration-suspense: 1500ms;
    --duration-glow-pulse: 0ms;
    --duration-select-hold: 150ms;
    --ease-spring-thread: linear;
  }
}