/* =====================================================================
   Lucent · design tokens
   Clinical calm, layered light. Light is "Clinic" (cool white, frosted
   panels); dark is "Night clinic". --mineral is the one accent (buttons,
   links, the lit phrase, the pause ring); the layer tokens colour the
   cross-section; --frost is the glass on panels.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f4f6f5;
  --card: #ffffff;
  --well: #eaefee;
  --line: #d6dfdd;
  --frost: rgba(255, 255, 255, 0.62);
  --ink: #1b2425;
  --ink-2: #3d4a4b;
  --muted: #586667;
  --mineral: #2a6670;
  --mineral-2: #1f515a;
  --on-mineral: #ffffff;
  --mineral-soft: #dcecee;
  --caution: #8a5a12;                 /* risk labels: an amber that reads */
  --caution-soft: #f6ead2;
  --layer-1: #f1d0bf;                 /* outer layer */
  --layer-2: #e2a993;                 /* middle layer */
  --layer-3: #efd8a8;                 /* deep layer */
  --layer-4: #d3a497;                 /* base */
  --focus: #2a6670;
  --shadow-card: 0 1px 0 rgba(27, 36, 37, 0.04), 0 18px 40px -26px rgba(27, 36, 37, 0.45);
  --shadow-lift: 0 34px 70px -32px rgba(27, 36, 37, 0.5);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(46px, 6.2vw, 92px);
  --fs-h2: clamp(34px, 4.1vw, 58px);
  --fs-h3: 21px;
  --fs-lead: clamp(17.5px, 1.3vw, 20px);
  --fs-body: 16.5px;
  --fs-small: 14.5px;
  --fs-label: 11.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: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --soft: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 160ms;
  --d: 360ms;
  --d-slow: 1200ms;
}

/* ---------- Night clinic ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1517;
    --card: #172022;
    --well: #131b1d;
    --line: #2a3739;
    --frost: rgba(23, 32, 34, 0.66);
    --ink: #eaf1f0;
    --ink-2: #c4d0cf;
    --muted: #97a7a7;
    --mineral: #8fd0d8;
    --mineral-2: #b2dfe5;
    --on-mineral: #07282d;
    --mineral-soft: #173539;
    --caution: #f0c27a;
    --caution-soft: #3a2d17;
    --layer-1: #6b5248;
    --layer-2: #7d5548;
    --layer-3: #6e6044;
    --layer-4: #5a3f3a;
    --focus: #8fd0d8;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 34px 70px -30px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1517;
  --card: #172022;
  --well: #131b1d;
  --line: #2a3739;
  --frost: rgba(23, 32, 34, 0.66);
  --ink: #eaf1f0;
  --ink-2: #c4d0cf;
  --muted: #97a7a7;
  --mineral: #8fd0d8;
  --mineral-2: #b2dfe5;
  --on-mineral: #07282d;
  --mineral-soft: #173539;
  --caution: #f0c27a;
  --caution-soft: #3a2d17;
  --layer-1: #6b5248;
  --layer-2: #7d5548;
  --layer-3: #6e6044;
  --layer-4: #5a3f3a;
  --focus: #8fd0d8;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 34px 70px -30px rgba(0, 0, 0, 0.9);
}