/* Design tokens for the Black Forest history site ("Dusk Fir"). Text only: colour, type and
   CSS motion do all the work; no images or SVG.
   Palette: night-forest greens, pale-lichen text, amber lantern accent, mint links.
   Contrast (WCAG AA) on --color-bg: text 15.5, muted 9.6, link 10.4, accent 10.0; link hover is brighter still.
   Every pairing used for text, hover included, is at least 4.5:1; hero gradient stops are checked below.
   Type: Georgia display and headings (chronicle feel), system sans body. */
:root {
  color-scheme: dark;

  --color-bg: #0e1a14;
  --color-surface: #16271e;
  --color-text: #eef0e6;
  --color-muted: #b4c2b3;
  --color-link: #8fd4b8;
  --color-link-hover: #b9ead6;
  --color-accent: #f0b95a;
  --color-accent-strong: #f6cd7e;
  --color-border: #2f4638;
  --color-header-bg: #0a130e;
  --color-header-text: #eef0e6;
  --color-focus: #f6cd7e;

  /* hero: layered CSS gradients, darkest at the edges like a treeline at dusk.
     Light text on every stop is >= 10:1 (stops are #0a130e, #12251a, #1d3a2a, #3a2a12). */
  --color-hero-1: #0a130e;
  --color-hero-2: #1d3a2a;
  --color-hero-glow: #3a2a12;
  --color-hero-text: #eef0e6;
  --gradient-hero:
    radial-gradient(ellipse 80% 55% at 50% 105%, var(--color-hero-glow) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 0%, var(--color-hero-2) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-hero-1) 0%, #12251a 60%, var(--color-bg) 100%);
  --gradient-accent-rule: linear-gradient(90deg, var(--color-accent), transparent);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* type scale, ratio ~1.25, plus fluid display sizes for the hero and era headings */
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-display: clamp(3rem, 13vw, 9rem);
  --text-era-date-xl: clamp(4.5rem, 22vw, 16rem);
  --text-counter: clamp(3.5rem, 14vw, 10rem);
  --text-era: clamp(2rem, 5vw, 3.25rem);
  --text-era-date: clamp(1.25rem, 3vw, 1.75rem);
  --leading-body: 1.7;
  --leading-heading: 1.1;
  --tracking-display: -0.02em;
  --tracking-caps: 0.14em;

  /* motion: pronounced on purpose. Use ONLY inside @media (prefers-reduced-motion: no-preference);
     without motion every element stays fully visible, unmasked and unshifted.
     Hero letters/words: delay = var(--stagger) * index, duration --duration-reveal.
     Eras: animation-timeline: view() inside @supports, with --reveal-* as the from-state. */
  --duration-fast: 200ms;
  --duration-base: 700ms;
  --duration-reveal: 1100ms;
  --duration-slow: 1800ms;
  --duration-sweep: 3500ms;
  --stagger: 70ms;
  --stagger-line: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-distance: 3rem;
  --reveal-distance-lg: 8rem;
  --reveal-scale-from: 0.6;
  --reveal-blur-from: 0.4em;
  --reveal-mask-from: inset(0 0 100% 0);
  --reveal-mask-to: inset(0 0 0 0);
  --era-scale-from: 0.7;
  --era-scale-to: 1;
  --era-shift: 12vw;
  --parallax-shift: 6rem;
  --sweep-angle: 100deg;
  --sweep-size: 250%;
  /* moving light sweep across display text: background-clip:text, animate background-position
     from 100% to -100% over --duration-sweep. Base colour is --color-hero-text, so text stays
     readable at every point (the bright band is --color-accent-strong, 11.9:1 on --color-bg). */
  --gradient-sweep: linear-gradient(var(--sweep-angle), var(--color-hero-text) 40%, var(--color-accent-strong) 50%, var(--color-hero-text) 60%);
  --progress-height: 4px;
  --progress-color: var(--color-accent);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;
  --measure: 65ch;
  --radius: 4px;
  --rule: 1px solid var(--color-border);
}