/*
  Lost Rabbit Off-Road — tokens de design (ver specs/design.md §1)

  Paleta CLARA (revisto 2026-08-29, esboço de 10 páginas do dono;
  cores revistas 2026-10-07 — verde-tropa/musgo + creme, pedido do dono):
  conteúdo em creme quente + verde-tropa de marca. As secções
  escuras (hero, faixas, rodapé) usam a classe .on-dark, que reaponta os
  tokens semânticos para os valores escuros — qualquer componente lá dentro
  fica automaticamente legível.

  Regra: fora das faixas escuras, os componentes usam SÓ tokens semânticos
  (--bg, --surface, --text, --heading, --line, --accent, --link, --brand).
  As cores "cruas" (--paper-*, --char-*, --moss-*, --fern-*) não aparecem
  diretamente nos componentes.
*/

:root {
  /* ---- escala crua: creme (claro) ---- */
  --paper-50: #f8f4e9;
  --paper-100: #efe7d3; /* creme — fundo da página */
  --paper-200: #e6dcc4;
  --paper-300: #d6cab0;
  --ink-900: #1e2117; /* quase-preto oliva */
  --ink-700: #2e3226;
  --ink-500: #57594a;
  --ink-400: #66675a;

  /* ---- escala crua: verde-tropa escuro (secções escuras) ---- */
  --char-950: #22271a;
  --char-900: #292f20;
  --char-850: #2f3524;
  --char-800: #373e2b;
  --char-700: #464e37;
  --bone: #f3eddc;
  --mist-200: #dcd8c4;
  --mist-400: #b3b19c;

  /* ---- escala crua: verde-musgo (marca) ---- */
  --moss-800: #2c3a1c;
  --moss-700: #36451f;
  --moss-600: #4a5a2b;
  --moss-500: #5a6b34; /* verde de marca */
  --moss-400: #6f8242;
  --fern-500: #4a5530; /* verde escuro p/ texto sobre claro */
  --fern-300: #b9c08c; /* verde claro p/ sobre escuro */
  --fern-200: #d6d9b4;
  --gold: #d4a640; /* só a faixa de confiança da Home (pedido do dono, 2026-10-07) */

  /* ---- papéis semânticos — TEMA CLARO (omissão) ---- */
  --bg: var(--paper-100);
  --bg-raised: var(--paper-50);
  --surface: #fffcf4;
  --text: var(--ink-700);
  --text-dim: var(--ink-500);
  --text-mute: var(--ink-400);
  --heading: var(--ink-900);
  --line: rgba(30, 33, 23, 0.13);
  --line-strong: rgba(30, 33, 23, 0.22);
  --brand: var(--moss-500);
  --brand-hover: var(--moss-600);
  --on-brand: var(--bone); /* texto sobre o verde de marca */
  --accent: var(--fern-500); /* eyebrows, ícones, ornamentos */
  --link: var(--fern-500);
  --link-hover: var(--moss-500);
  --price-was: #b23b3b; /* preço de tabela riscado (pedido do dono) */
  --shadow-color: 30, 33, 23;

  /* ---- Tipografia (specs/design.md §2) ---- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.35rem + 5.4vw, 5rem);
  --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --fs-h2: clamp(1.55rem, 1.18rem + 1.75vw, 2.35rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.68;
  --tracking-label: 0.14em;
  --tracking-tight: -0.015em;

  /* ---- Forma ---- */
  --radius-pill: 999px;
  --radius-lg: 12px;
  --radius: 6px;
  --radius-sm: 4px;

  /* ---- Espaçamento ---- */
  --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;

  /* ---- Contentores ---- */
  --container: 1200px;
  --container-text: 660px;
  --gutter: clamp(1.15rem, 4vw, 3rem);

  /* ---- Elevação ---- */
  --shadow-sm: 0 2px 8px rgba(var(--shadow-color), 0.1);
  --shadow-md: 0 14px 34px -14px rgba(var(--shadow-color), 0.22);
  --shadow-lg: 0 30px 60px -24px rgba(var(--shadow-color), 0.28);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.33, 0.1, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease-out);
}

/* ---- papéis semânticos — SECÇÕES ESCURAS ---- */
.on-dark {
  --bg: var(--char-950);
  --bg-raised: var(--char-900);
  --surface: var(--char-800);
  --text: var(--mist-200);
  --text-dim: #c9c6b0;
  --text-mute: var(--mist-400);
  --heading: var(--bone);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --brand: var(--moss-500);
  --brand-hover: var(--moss-400);
  --accent: var(--fern-300);
  --link: var(--fern-300);
  --link-hover: var(--fern-200);
  --price-was: #e0726a;
  --shadow-color: 0, 0, 0;
  background: var(--bg);
  color: var(--text);
}