/* =====================================================================
   Exhale · design tokens
   The pilates and yoga studio. Light is "Morning" (linen, moss ink); dark
   is "Evening". --clay is the one accent (buttons, links, the lit word).
   --sage marks levels and spots left. --sand is the warm highlight behind
   the breath and picked classes: a background, never text.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f6f1e9;
  --card: #fffdf9;
  --well: #ede5d8;
  --line: #e0d6c6;
  --ink: #22281f;
  --ink-2: #444a40;
  --muted: #5f6158;
  --clay: #9a4a32;
  --clay-2: #7e3b27;
  --on-clay: #ffffff;
  --clay-soft: #f6e2d8;
  --sage: #4d6a4f;
  --sage-soft: #e3ebdf;
  --sand: #ecd9bf;
  --focus: #9a4a32;
  --shadow-card: 0 1px 2px rgba(34, 40, 31, 0.05), 0 18px 36px -26px rgba(34, 40, 31, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(34, 40, 31, 0.4);

  --display: "Marcellus", "Cormorant", Georgia, serif;
  --body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--body);

  --fs-h1: clamp(44px, 6vw, 92px);
  --fs-h2: clamp(32px, 3.9vw, 58px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12.5px;

  --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: 12px;
  --r-m: 22px;
  --r-l: 36px;
  --r-pill: 999px;
  --arch: 999px 999px var(--r-m) var(--r-m);

  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 160ms;
  --d: 360ms;
  --d-slow: 1200ms;
}

/* ---------- Evening ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141712;
    --card: #1d211b;
    --well: #181b16;
    --line: #30352d;
    --ink: #efeae0;
    --ink-2: #d3cfc4;
    --muted: #a6a99c;
    --clay: #efa184;
    --clay-2: #f4bba5;
    --on-clay: #2a0f06;
    --clay-soft: #33211b;
    --sage: #9cc39f;
    --sage-soft: #1f2a20;
    --sand: #3a3122;
    --focus: #efa184;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 36px -22px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141712;
  --card: #1d211b;
  --well: #181b16;
  --line: #30352d;
  --ink: #efeae0;
  --ink-2: #d3cfc4;
  --muted: #a6a99c;
  --clay: #efa184;
  --clay-2: #f4bba5;
  --on-clay: #2a0f06;
  --clay-soft: #33211b;
  --sage: #9cc39f;
  --sage-soft: #1f2a20;
  --sand: #3a3122;
  --focus: #efa184;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}