/*
 * Design tokens: the only place colour, type size and spacing values are defined.
 * Palette "Canopy and batik" (Claude draft, 2026-10-31, for the owner's review).
 * Derived from the hero images (rainforest green, batik indigo, low gold light),
 * not from the Ember draft in docs/design-tokens-draft.css, which stays as the comparison.
 *
 * Neutrality (F1-5): ink is indigo. The light ground is a pale off-white with a faint sage tint;
 * the dark ground is indigo. Green appears only on things you can click: links, buttons,
 * checkboxes and map pins (C-016, C-018).
 * Gold is for graphic marks and rules that are not links, never for text (3:1 graphic contrast only).
 * Focus is blue in both themes, so it never looks like a gold mark (C-017).
 *
 * Switching: device setting by default; [data-theme="light"|"dark"] is the visible switch (X-2).
 */

:root {
  color-scheme: light dark;

  /* light */
  --page: #EFF1EC;
  --surface: #F8F9F6;
  --heading: #13222E;
  --body: #1D2D39;
  --muted: #475862;
  --link: #1D5A4C;
  --link-hover: #123F36;
  --link-visited: #5A4878;
  --button: #1D5A4C;
  --button-hover: #123F36;
  --button-text: #F8F9F6;
  --mark: #A8700F;
  --border: #C9D1C8;
  --control: #66767D;
  --focus: #0A5FB4;

  /* world map (moved from map.css, C-019); coast is at least 3:1 against the sea */
  --map-sea: #E3E9E5;
  --map-land: #C6CFC1;
  --map-coast: #76846F;
  --backdrop: rgba(19, 34, 46, 0.28);

  /* type families */
  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale: minor third on phones, perfect fourth from 48rem (see styles.css) */
  --step--1: 0.9375rem; /* C-034: was 0.875rem (14px); 15px is easier to read (owner, 2026-11-07) */
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: 1.75rem;
  --step-3: 2.25rem;
  --step-4: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --gutter: 1rem;
  --measure: 62ch;
  --radius: 0.25rem;
}

@media (min-width: 48rem) {
  :root {
    --step-1: 1.5rem;
    --step-2: 2rem;
    --step-3: 2.75rem;
    --gutter: 2rem;
  }
}

/* dark: a designed palette, not an inversion */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0E1923;
    --surface: #15232F;
    --heading: #E8EDE6;
    --body: #D5DCD5;
    --muted: #93A2A0;
    --link: #8FD0B8;
    --link-hover: #B5E3D1;
    --link-visited: #C5B3E0;
    --button: #5FA58C;
    --button-hover: #82C4AC;
    --button-text: #0E1923;
    --mark: #E2B04F;
    --border: #2B3C4A;
    --control: #7F9096;
    --focus: #7DB9F5;
    --map-sea: #132330;
    --map-land: #2A3D4B;
    --map-coast: #5A7286;
    --backdrop: rgba(4, 9, 14, 0.6);
  }
}

:root[data-theme="dark"] {
  --page: #0E1923;
  --surface: #15232F;
  --heading: #E8EDE6;
  --body: #D5DCD5;
  --muted: #93A2A0;
  --link: #8FD0B8;
  --link-hover: #B5E3D1;
  --link-visited: #C5B3E0;
  --button: #5FA58C;
  --button-hover: #82C4AC;
  --button-text: #0E1923;
  --mark: #E2B04F;
  --border: #2B3C4A;
  --control: #7F9096;
  --focus: #7DB9F5;
  --map-sea: #132330;
  --map-land: #2A3D4B;
  --map-coast: #5A7286;
  --backdrop: rgba(4, 9, 14, 0.6);
}