/* =====================================================================
   Cairn · design tokens
   Care built stone by stone. Light is "Birch" (warm white paper, slate
   ink, river stones); dark is "Polar night". --lake is the one accent
   (buttons, links, the lit phrase and its contour underline); the stone
   tokens colour the cairn; --topo draws the contour lines.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f4f3ef;
  --card: #fdfcf9;
  --well: #ebe9e2;
  --line: #d9d6cc;
  --topo: #cfd6d9;                    /* contour lines (decoration only) */
  --ink: #1c2329;
  --ink-2: #3c454d;
  --muted: #5b636b;
  --lake: #1f5f8b;
  --lake-2: #174a6d;
  --on-lake: #ffffff;
  --lake-soft: #dce9f2;
  --stone-1: #c9c4b8;
  --stone-2: #b3ada0;
  --stone-3: #9aa3a6;
  --stone-4: #d6d2c8;
  --stone-ink: #1c2329;
  --ember: #a6561a;                   /* one warm mark: "today", the current month */
  --focus: #1f5f8b;
  --shadow-card: 0 1px 0 rgba(28, 35, 41, 0.05), 0 14px 30px -20px rgba(28, 35, 41, 0.45);
  --shadow-stone: inset 0 -6px 10px rgba(28, 35, 41, 0.16), inset 0 4px 6px rgba(255, 255, 255, 0.5), 0 6px 10px -6px rgba(28, 35, 41, 0.45);

  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Reddit Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(42px, 5.6vw, 82px);
  --fs-h2: clamp(32px, 3.7vw, 52px);
  --fs-h3: 21px;
  --fs-lead: clamp(18px, 1.35vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.25, 0.8, 0.3, 1);
  --settle: cubic-bezier(0.3, 1.35, 0.5, 1);
  --d-fast: 160ms;
  --d: 320ms;
  --d-slow: 800ms;
}

/* ---------- Polar night ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #10151a;
    --card: #172029;
    --well: #131a21;
    --line: #2a3540;
    --topo: #22303b;
    --ink: #e9edf0;
    --ink-2: #c3cbd2;
    --muted: #97a1aa;
    --lake: #7cc0ef;
    --lake-2: #a3d4f5;
    --on-lake: #06223a;
    --lake-soft: #16324a;
    --stone-1: #4a5157;
    --stone-2: #3c4349;
    --stone-3: #56636b;
    --stone-4: #5d6369;
    --stone-ink: #eef1f3;
    --ember: #f0a868;
    --focus: #7cc0ef;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.8);
    --shadow-stone: inset 0 -6px 10px rgba(0, 0, 0, 0.35), inset 0 4px 6px rgba(255, 255, 255, 0.08), 0 6px 12px -6px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #10151a;
  --card: #172029;
  --well: #131a21;
  --line: #2a3540;
  --topo: #22303b;
  --ink: #e9edf0;
  --ink-2: #c3cbd2;
  --muted: #97a1aa;
  --lake: #7cc0ef;
  --lake-2: #a3d4f5;
  --on-lake: #06223a;
  --lake-soft: #16324a;
  --stone-1: #4a5157;
  --stone-2: #3c4349;
  --stone-3: #56636b;
  --stone-4: #5d6369;
  --stone-ink: #eef1f3;
  --ember: #f0a868;
  --focus: #7cc0ef;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 30px -18px rgba(0, 0, 0, 0.8);
  --shadow-stone: inset 0 -6px 10px rgba(0, 0, 0, 0.35), inset 0 4px 6px rgba(255, 255, 255, 0.08), 0 6px 12px -6px rgba(0, 0, 0, 0.8);
}