/*
  Evergreen design tokens.
  A forest-in-early-autumn palette: deep evergreen conifers meeting the
  ambers, rusts and golds of turning deciduous leaves. Warm, organic, alive.
  See docs/style-guide.md for the full guide.
*/

:root {
  /* ── Evergreen (the canopy) ───────────────────────────── */
  --green-950: #0e1a13;
  --green-900: #14241b;
  --green-800: #1b3127;
  --green-700: #234234;
  --green-600: #2f5a44;
  --green-500: #3b7355;
  --green-400: #5a9b76;
  --green-300: #8fc4a3;
  --green-200: #bfe0cd;

  /* ── Autumn (the turning leaves) ──────────────────────── */
  --gold-500: #d99423;   /* golden birch  */
  --amber-500: #c97b1f;  /* warm amber    */
  --rust-500: #b85a2b;   /* burnt orange  */
  --maple-600: #9e3b2e;  /* deep maple red*/
  --ochre-400: #c89b53;  /* dry ochre     */

  /* ── Warm neutrals (bark, sand, parchment) ────────────── */
  --parchment: #f4efe3;
  --sand: #e3d8c0;
  --stone: #b7ad97;
  --bark-700: #3a2e22;
  --bark-900: #211a12;

  /* ── Semantic surface + text ──────────────────────────── */
  --color-bg: var(--green-950);
  --color-surface: var(--green-900);
  --color-surface-raised: var(--green-800);
  --color-border: #2a4233;
  --color-border-soft: #21342a;

  --color-text: var(--parchment);
  --color-text-muted: var(--stone);
  --color-heading: #f7f3e8;

  /* ── Semantic brand roles ─────────────────────────────── */
  --color-primary: var(--green-400);
  --color-primary-strong: var(--green-500);
  --color-on-primary: var(--green-950);
  --color-accent: var(--gold-500);
  --color-accent-warm: var(--rust-500);
  --color-link: var(--green-300);
  --color-link-hover: var(--gold-500);
  --color-danger: var(--maple-600);

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.55rem;
  --text-2xl: 2.1rem;
  --text-3xl: 3rem;
  --text-4xl: clamp(2.8rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* ── Spacing scale (8px base) ─────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4.5rem;
  --space-12: 6rem;

  /* ── Radius (organic, rounded) ────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ── Elevation (soft, low-contrast shadows) ───────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* ── Layout ───────────────────────────────────────────── */
  --container-width: 1080px;
  --content-width: 720px;
}