/* Sleepy Pasta — design tokens.
   DESIGN.md is the source of truth. Nothing outside this file invents a value;
   every other stylesheet references var(--…).

   Colours are defined on bare :root first so nothing depends on a media query
   being matched, then overridden for the system dark preference, then again for
   an explicit [data-theme] choice so the manual toggle wins in both directions.
*/

:root {
  /* Light is the default for everyone, including visitors whose OS is set to
     dark. Dark is reached only through the toggle, which persists. */
  color-scheme: light;

  /* ---- colour: light ---- */
  --bg: #FAF9F7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #5A5A57;
  --rule: #E2DFD8;
  --accent: #7A2E2E;
  --accent-text: #FFFFFF;
  --focus: #7A2E2E;

  /* ---- type ---- */
  --font-body: "Iowan Old Style", "Charter", Charter, Georgia, Cambria,
    "Times New Roman", Times, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --size-base: 19px;
  --lh-body: 1.7;
  --lh-tight: 1.25;

  /* Modular scale, ratio 1.25, rooted at 1rem. */
  --size-sm: 0.8rem;
  --size-ui: 0.9rem;
  --size-md: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5625rem;
  --size-2xl: 1.953rem;
  --size-3xl: 2.441rem;

  /* ---- spacing: 8px base. Nothing between steps. ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- other ---- */
  --radius: 0;
  --border: 1px solid var(--rule);
  --tap: 44px;
}

/* Explicit choice from the toggle. There is deliberately no
   prefers-color-scheme block: the owner wants light to be what a first-time
   visitor sees, regardless of their OS setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0E0F;
  --surface: #17171A;
  --text: #E8E4DC;
  --text-muted: #9A968E;
  --rule: #2A2A2E;
  --accent: #B4544F;
  --accent-text: #0E0E0F;
  --focus: #B4544F;
}

:root[data-theme="light"] {
  --bg: #FAF9F7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #5A5A57;
  --rule: #E2DFD8;
  --accent: #7A2E2E;
  --accent-text: #FFFFFF;
  --focus: #7A2E2E;
}