/* ==========================================================================
   Yoga in the North — design tokens
   Bespoke warm, sattvic, grounded palette. Two visitor-chosen themes from one
   build: data-theme="bright" (day, default) / "dark" (dusk).
   ========================================================================== */

:root {
  /* type families */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-small: 0.86rem;
  --fs-body: 1.02rem;
  --fs-lead: clamp(1.1rem, 0.98rem + 0.5vw, 1.28rem);
  --fs-h5: 1.06rem;
  --fs-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-display: clamp(2.7rem, 1.7rem + 4.6vw, 5.2rem);

  /* spacing (8pt) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --s-9: 6rem; --s-10: 8rem;

  /* structure */
  --maxw: 1200px;
  --maxw-narrow: 860px;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 22px;
  --radius-pill: 999px;

  /* motion */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);
  --t-1: 120ms; --t-2: 240ms; --t-3: 420ms; --t-4: 700ms;

  --header-h: 70px;
}

/* -------- DAY (bright) — the brand default --------
   Teal-led, anchored on #5B99A1 (the reference studio's published theme-color),
   over a warm-neutral paper so the existing photography — warm wood, sage mat,
   the portrait — still sits naturally against it. Every pair that carries text
   is verified against WCAG 2.2 AA by tools/contrast.py; do not hand-edit a
   value here without re-running it. */
:root,
:root[data-theme="bright"] {
  color-scheme: light;
  --paper: #F2EFE8;
  --paper-2: #E9E5DC;
  --surface: #FAF8F3;
  --surface-2: #EFEBE2;
  --surface-3: #E4DFD4;
  --ink: #1F2A2C;
  --ink-soft: #42565A;
  --muted: #5F6D70;
  --line: #D7D2C7;
  --line-soft: #E6E2D9;

  /* semantic accents */
  --accent: #2F7078;          /* fills, links, focus            4.93:1 on paper */
  --accent-deep: #235B62;
  --accent-mid: #4F8B93;      /* decorative only                3.34:1 on paper */
  --warm: #A15837;            /* terracotta counterpoint        4.61:1 on paper */
  --warm-deep: #86452A;
  --gold: #8B6524;            /* small caps + markers           4.59:1 on paper */
  --on-accent: #F7FBFB;

  /* legacy names kept as aliases so no rule or inline style had to be rewritten */
  --clay: var(--accent);
  --clay-deep: var(--accent-deep);
  --sage: var(--accent-mid);
  --sage-deep: var(--accent-deep);
  --blush: #D8C3B4;
  --on-clay: var(--on-accent);
  --focus: #2F7078;            /* a colour: app.css writes "2px solid var(--focus)" */

  --shadow-1: 0 1px 2px rgba(20,34,36,.05), 0 6px 18px rgba(20,34,36,.06);
  --shadow-2: 0 2px 6px rgba(20,34,36,.07), 0 18px 44px rgba(20,34,36,.10);
  --grain-opacity: .030;
}

/* -------- DUSK (dark) — low-light evening register --------
   The reference teal #5B99A1 is used literally here, where it clears 5.49:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101A1C;
  --paper-2: #152124;
  --surface: #18262A;
  --surface-2: #1F2F33;
  --surface-3: #26383D;
  --ink: #E9EFEE;
  --ink-soft: #BFCFD0;
  --muted: #8DA0A2;
  --line: #2A3B3F;
  --line-soft: #1E2C30;

  --accent: #7FBEC5;
  --accent-deep: #9BD0D6;
  --accent-mid: #5B99A1;
  --warm: #D98A62;
  --warm-deep: #E8A078;
  --gold: #DFB55E;
  --on-accent: #0E1719;

  --clay: var(--accent);
  --clay-deep: var(--accent-deep);
  --sage: var(--accent-mid);
  --sage-deep: var(--accent-deep);
  --blush: #B79A8A;
  --on-clay: var(--on-accent);
  --focus: #7FBEC5;

  --shadow-1: 0 1px 2px rgba(0,0,0,.34), 0 8px 22px rgba(0,0,0,.38);
  --shadow-2: 0 3px 10px rgba(0,0,0,.42), 0 24px 54px rgba(0,0,0,.50);
  --grain-opacity: .05;
}