/* tokens.css — every colour, size and spacing lives here. Nothing else hard-codes a value. */
:root {
  --bg: #F7F6F0;            /* cream paper */
  --surface: #FFFDF9;
  --surface-2: #ECEFE0;     /* sand */
  --line: #D5DCC4;
  --ink: #383632;
  --ink-2: #5A5F55;
  --ink-3: #7A8273;
  --accent: #518F65;        /* leaf */
  --accent-ink: #FFFFFF;
  --accent-soft: #E3ECD2;
  --soil: #5A6E30;
  --soil-soft: #E9EDD6;
  --sun: #77B81E;
  --sun-soft: #EEF5DF;
  --mark: #8AA44D;          /* single-series chart hue */
  --mark-2: #B1C58D;        /* lighter step of the same hue */
  --grid: #E2E6D6;
  --focus: #2E6BD6;
  --radius: 14px;
  --radius-s: 8px;
  --gap: 16px;
  --gap-l: 28px;
  --gap-xl: 48px;
  --tap: 44px;
  --max: 1180px;
  --shadow: 0 1px 2px rgba(31,36,27,.06), 0 8px 24px rgba(31,36,27,.08);
  --font-display: "Rokkitt", "Roboto Slab", Georgia, serif;
  --font-body: "Hind Siliguri", -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(56px, 9vw, 120px);
  --fs-h1: clamp(30px, 4vw, 44px);
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 17px;
  --fs-small: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15180F; --surface: #1D2117; --surface-2: #262B1F; --line: #363C2E;
    --ink: #EEE9DD; --ink-2: #BDB8AB; --ink-3: #8C8779;
    --accent: #9FC27A; --accent-ink: #10150D; --accent-soft: #2A3A22;
    --soil: #B1C58D; --soil-soft: #3A2E22; --sun: #77B81E; --sun-soft: #3E321A;
    --mark: #8AA44D; --mark-2: #B1C58D; --grid: #2E3327;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg: #15180F; --surface: #1D2117; --surface-2: #262B1F; --line: #363C2E;
  --ink: #EEE9DD; --ink-2: #BDB8AB; --ink-3: #8C8779;
  --accent: #9FC27A; --accent-ink: #10150D; --accent-soft: #2A3A22;
  --soil: #B1C58D; --soil-soft: #3A2E22; --sun: #77B81E; --sun-soft: #3E321A;
  --mark: #8AA44D; --mark-2: #B1C58D; --grid: #2E3327;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}