/* =====================================================================
   Saans — design tokens
   "Quiet joy": warm paper, morning light, sage water, apricot sun.
   Four atmospheres (morning, daylight, evening, night). Light ones are
   the default; dark ones are designed palettes, not inversions.
   All text/background pairs are checked for WCAG 2.2 AA (see docs/QA).
   ===================================================================== */

:root {
  /* ---- Typography ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.8rem + 2.4vw, 3.6rem);
  --leading: 1.6;
  --leading-tight: 1.2;
  --measure: 38rem;

  /* ---- Space, shape, motion ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-pill: 999px;
  --tap: 44px;                 /* WCAG 2.5.8 target minimum is 24px; we use 44px */
  --ease-calm: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-ui: 220ms;
  --dur-slow: 900ms;
  --shadow-soft: 0 1px 2px rgb(60 40 20 / 0.06), 0 8px 24px rgb(60 40 20 / 0.07);
  --shadow-lift: 0 2px 4px rgb(60 40 20 / 0.08), 0 14px 36px rgb(60 40 20 / 0.10);

  /* ---- Colour: MORNING (default light) ---- */
  --bg: #f8f1e6;
  --bg-soft: #f1e6d6;
  --surface: #fffbf4;
  --surface-2: #fbf3e7;
  --text: #2a2420;
  --text-muted: #5f554d;
  --border: #e2d4c0;
  --border-strong: #8a765e;
  --primary: #2f5e55;
  --primary-hover: #234a43;
  --on-primary: #fffbf4;
  --secondary: #8a5a44;
  --accent: #d98a5f;
  --calm: #8dbfb0;
  --success: #3a6838;
  --warning: #85570a;
  --danger: #a23a2a;
  --danger-soft: #f6e1da;
  --focus: #9b3f17;
  --focus-halo: #fffbf4;
  --breath-in: #f0b47e;
  --breath-out: #96c3b5;
  --breath-core: #fff4e3;
  --breath-ink: #2a2420;
  --sky-top: #fbe6cf;
  --sky-bottom: #f8f1e6;
  --particle: #e9a978;
  --leaf: #6f9a74;
  --petal: #f2b98c;
  --water: #9cc7bb;
  --cloud: #fffaf2;
  color-scheme: light;
}

/* ---- DAYLIGHT: cooler paper, brighter sky ---- */
:root[data-atmosphere="daylight"] {
  --bg: #f4f3ec;
  --bg-soft: #e9ebe2;
  --surface: #fdfdf8;
  --surface-2: #f6f6ef;
  --text: #222724;
  --text-muted: #555c56;
  --border: #d8dccf;
  --border-strong: #77837a;
  --primary: #2b5a60;
  --primary-hover: #1f454a;
  --on-primary: #fdfdf8;
  --secondary: #7d5a3a;
  --accent: #e0a35f;
  --calm: #8ec2c4;
  --focus: #8a3b12;
  --focus-halo: #fdfdf8;
  --breath-in: #ecc48a;
  --breath-out: #93c4c6;
  --breath-core: #fffbea;
  --sky-top: #e1ede9;
  --sky-bottom: #f4f3ec;
  --particle: #d9b26f;
  --petal: #efc58f;
  --water: #94c5c6;
  --cloud: #ffffff;
}

/* ---- EVENING: dusk plum, apricot light (dark) ---- */
:root[data-atmosphere="evening"] {
  --bg: #221b22;
  --bg-soft: #2a222a;
  --surface: #30272f;
  --surface-2: #2b232b;
  --text: #eee4d7;
  --text-muted: #c0b2a4;
  --border: #4a3d48;
  --border-strong: #8c7a86;
  --primary: #e9b892;
  --primary-hover: #f3c9a7;
  --on-primary: #2a1c16;
  --secondary: #d6a6a0;
  --accent: #d79570;
  --calm: #8fb9ad;
  --success: #9fca99;
  --warning: #e3bd6e;
  --danger: #f0a090;
  --danger-soft: #4a2a2a;
  --focus: #ffd29f;
  --focus-halo: #221b22;
  --breath-in: #cf9670;
  --breath-out: #6f9a90;
  --breath-core: #f3d7bd;
  --breath-ink: #2a1c16;
  --sky-top: #3a2634;
  --sky-bottom: #221b22;
  --particle: #c99273;
  --leaf: #7fa082;
  --petal: #d59b7a;
  --water: #5f8c86;
  --cloud: #d8c7c4;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.25), 0 8px 24px rgb(0 0 0 / 0.25);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.3), 0 14px 36px rgb(0 0 0 / 0.35);
  color-scheme: dark;
}

/* ---- NIGHT: deep and dim; low-luminance guide (dark) ---- */
:root[data-atmosphere="night"] {
  --bg: #121419;
  --bg-soft: #171a21;
  --surface: #1c1f27;
  --surface-2: #181b22;
  --text: #dcd6cc;
  --text-muted: #a49d92;
  --border: #2e323d;
  --border-strong: #6b6f7a;
  --primary: #a9cfc3;
  --primary-hover: #c0ddd3;
  --on-primary: #10221e;
  --secondary: #c7b3a0;
  --accent: #9a8fb5;
  --calm: #6f9a90;
  --success: #93bf8d;
  --warning: #d5b06a;
  --danger: #e59a8a;
  --danger-soft: #3a2424;
  --focus: #f0d2a8;
  --focus-halo: #121419;
  --breath-in: #77708f;
  --breath-out: #3e6660;
  --breath-core: #b7b1c9;
  --breath-ink: #10221e;
  --sky-top: #171b26;
  --sky-bottom: #121419;
  --particle: #5c5873;
  --leaf: #4f6e55;
  --petal: #7b7393;
  --water: #3d5e58;
  --cloud: #5d5a70;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.45), 0 14px 36px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

/* Without JavaScript, follow the device's dark preference with Evening. */
@media (prefers-color-scheme: dark) {
  :root:not([data-atmosphere]) {
    --bg: #221b22;
    --bg-soft: #2a222a;
    --surface: #30272f;
    --surface-2: #2b232b;
    --text: #eee4d7;
    --text-muted: #c0b2a4;
    --border: #4a3d48;
    --border-strong: #8c7a86;
    --primary: #e9b892;
    --primary-hover: #f3c9a7;
    --on-primary: #2a1c16;
    --secondary: #d6a6a0;
    --focus: #ffd29f;
    --focus-halo: #221b22;
    --danger: #f0a090;
    --danger-soft: #4a2a2a;
    --breath-in: #cf9670;
    --breath-out: #6f9a90;
    --breath-core: #f3d7bd;
    --sky-top: #3a2634;
    --sky-bottom: #221b22;
    color-scheme: dark;
  }
}