/* =====================================================================
   Vigil · design tokens
   Telehealth with a lamp left on. Light is "Day clinic" (cool linen and
   white card); dark is "Night shift" (deep navy). --lamp is the warm amber
   that carries meaning (buttons, links, the next free time, the clock
   hand); --screen is the cool blue of a video call (online, connected);
   --live is the small "doctor online" mark. The night dial (.dial) is
   always night, whatever the mode.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f2f4f8;
  --card: #ffffff;
  --well: #e8ecf3;
  --line: #d3d9e4;
  --ink: #121a2e;
  --ink-2: #33405a;
  --muted: #5a6580;
  --lamp: #a34e00;
  --lamp-2: #843e00;
  --on-lamp: #ffffff;
  --lamp-soft: #fbead8;
  --glow: #ffb35c;
  --screen: #2d55c8;
  --screen-soft: #e2e9fb;
  --live: #0d7f55;
  --alert: #b42318;
  --focus: #2d55c8;
  --night: #0b1222;
  --night-2: #131d35;
  --night-line: #27324e;
  --night-ink: #eef2fa;
  --night-muted: #9aa5be;
  --moon: #ffb35c;                    /* the lamp on night surfaces (dial, call, closing card), both modes */
  --moon-2: #ffc788;                  /* lit figures on night: the next free time */
  --moon-pale: #ffe1b8;               /* the next free tick */
  --on-moon: #2a1400;                 /* text on a moon button */
  --shadow-card: 0 1px 2px rgba(18, 26, 46, 0.05), 0 10px 28px -18px rgba(18, 26, 46, 0.35);
  --shadow-lift: 0 2px 4px rgba(18, 26, 46, 0.05), 0 30px 60px -30px rgba(18, 26, 46, 0.5);

  --display: "Outfit", "Avenir Next", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(44px, 6.2vw, 88px);
  --fs-h2: clamp(32px, 3.9vw, 54px);
  --fs-h3: 21px;
  --fs-lead: clamp(18px, 1.4vw, 21px);
  --fs-body: 17.5px;
  --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: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --soft: cubic-bezier(0.45, 0, 0.25, 1);
  --d-fast: 160ms;
  --d: 320ms;
  --d-slow: 800ms;
}

/* ---------- Night shift ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b1222;
    --card: #121b30;
    --well: #0f172a;
    --line: #26314c;
    --ink: #eef2fa;
    --ink-2: #c4ccdd;
    --muted: #919cb5;
    --lamp: #ffb35c;
    --lamp-2: #ffc788;
    --on-lamp: #2a1400;
    --lamp-soft: #2c2114;
    --screen: #93b0ff;
    --screen-soft: #18244a;
    --live: #4fd6a0;
    --alert: #ff8a7a;
    --focus: #93b0ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -16px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 34px 60px -28px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1222;
  --card: #121b30;
  --well: #0f172a;
  --line: #26314c;
  --ink: #eef2fa;
  --ink-2: #c4ccdd;
  --muted: #919cb5;
  --lamp: #ffb35c;
  --lamp-2: #ffc788;
  --on-lamp: #2a1400;
  --lamp-soft: #2c2114;
  --screen: #93b0ff;
  --screen-soft: #18244a;
  --live: #4fd6a0;
  --alert: #ff8a7a;
  --focus: #93b0ff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -16px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 34px 60px -28px rgba(0, 0, 0, 0.9);
}