/* Longevity Biome — design tokens (Botanical Editorial)
   Forest & Moss palette, apothecary/herbarium feel. No CDN, no build. */
:root {
  /* Brand palette */
  --forest: #043f25;
  --forest-deep: #032518;
  --ink: #10351f;
  --moss: #97bc62;
  --moss-deep: #6f9345;
  --gold: #c99712;
  --gold-bright: #e3b23c;
  --cream: #fff8e6;
  --paper: #faf3df;
  --paper-2: #f3ead1;
  --line: #e4d7b0;

  /* Semantic */
  --bg: var(--cream);
  --bg-panel: var(--paper);
  --bg-panel-2: var(--paper-2);
  --text: var(--ink);
  --text-soft: #3d4d3d;
  --text-faint: #566255;
  --gold-ink: #8a6a09; /* darker gold for text on the cream field (WCAG-safe) */
  --warn: #b45309;       /* safety/caution amber */
  --flag: #b45309;       /* safety-flag text (overridden per theme) */
  --on-forest: rgba(255, 248, 230, 0.72);      /* cream text on the forest footer */
  --on-forest-faint: rgba(255, 248, 230, 0.58);
  --on-forest-line: rgba(255, 248, 230, 0.16);
  --scrim: rgba(4, 20, 12, 0.6);               /* modal backdrop (theme-independent, sits over content) */
  --overlay-strong: rgba(4, 37, 24, 0.5);      /* media gradient overlays (forest, over imagery) */
  --overlay-soft: rgba(4, 37, 24, 0.35);
  --chip-ink: rgba(4, 37, 24, 0.82);           /* dark chip over media (the "Short/Episode" tag) */
  --tint-gold: rgba(201, 151, 18, 0.16);       /* badge/surface tints */
  --tint-forest: rgba(4, 63, 37, 0.1);
  --tint-moss: rgba(151, 188, 98, 0.16);
  --tint-warn: rgba(180, 83, 9, 0.14);
  --qr-bg: #fff;                               /* QR quiet-zone white — a scannability CONSTANT, never themed */
  --accent: var(--gold);
  --accent-ink: var(--forest);
  --card-bg: #fffdf5;
  --card-line: var(--line);

  /* Typography — offline-safe serif display + humanist sans body */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-eyebrow: 0.78rem;
  --fs-body: 1rem;
  --fs-lede: 1.18rem;
  --h6: 0.95rem;
  --h5: 1.1rem;
  --h4: 1.35rem;
  --h3: 1.7rem;
  --h2: 2.2rem;
  --h1: clamp(2.6rem, 6vw, 4.4rem);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radius / shadow / motion */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(4, 37, 24, 0.08), 0 2px 8px rgba(4, 37, 24, 0.06);
  --shadow-md: 0 6px 18px rgba(4, 37, 24, 0.12);
  --shadow-lg: 0 18px 44px rgba(4, 37, 24, 0.22);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;

  --maxw: 1200px;
  --maxw-text: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #06170f;
    --bg-panel: #0a2015;
    --bg-panel-2: #0d2718;
    --text: #f3ead1;
    --text-soft: #c9d4bf;
    --text-faint: #8ea083;
    --gold-ink: var(--gold-bright);
    --flag: #f0a860;
    --card-bg: #0c2416;
    --card-line: #1c3d29;
    --line: #1c3d29;
    --paper: #0a2015;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --bg: #06170f;
  --bg-panel: #0a2015;
  --bg-panel-2: #0d2718;
  --text: #f3ead1;
  --text-soft: #c9d4bf;
  --text-faint: #8ea083;
  --gold-ink: var(--gold-bright);
  --flag: #f0a860;
  --card-bg: #0c2416;
  --card-line: #1c3d29;
  --line: #1c3d29;
  --paper: #0a2015;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
}
:root[data-theme="light"] {
  /* Forcing light MUST reset the FULL set the dark media query overrides —
     otherwise a dark-OS user who toggles to light keeps dark-theme text colors
     (light sage) on the cream background, making body copy invisible. */
  --bg: var(--cream);
  --bg-panel: var(--paper);
  --bg-panel-2: var(--paper-2);
  --text: var(--ink);
  --text-soft: #3d4d3d;
  --text-faint: #566255;
  --gold-ink: #8a6a09;
  --flag: #b45309;
  --card-bg: #fffdf5;
  --card-line: var(--line);
  --line: #e4d7b0;
  --paper: #faf3df;
  --shadow-sm: 0 1px 2px rgba(4, 37, 24, 0.08), 0 2px 8px rgba(4, 37, 24, 0.06);
  --shadow-md: 0 6px 18px rgba(4, 37, 24, 0.12);
  --shadow-lg: 0 18px 44px rgba(4, 37, 24, 0.22);
}