/* =====================================================================
   Enamel · design tokens
   The dental practice. Light is "Clinic" (cool white, deep ink); dark is
   "After hours". --teal is the one accent (buttons, links, the lit
   phrase, chosen teeth). --coral is only for toothache and emergencies.
   --tooth-* draw the teeth: decoration, never text.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f5f9fb;
  --card: #ffffff;
  --well: #e9f1f5;
  --line: #d3e0e7;
  --ink: #0f2233;
  --ink-2: #2f4354;
  --muted: #4f6170;
  --teal: #0a6e7d;
  --teal-2: #085865;
  --on-teal: #ffffff;
  --teal-soft: #d6eef1;
  --coral: #b8401f;
  --on-coral: #ffffff;
  --coral-soft: #fbe3da;
  --focus: #0a6e7d;
  --shadow-card: 0 1px 2px rgba(15, 34, 51, 0.05), 0 16px 34px -22px rgba(15, 34, 51, 0.35);
  --shadow-lift: 0 30px 60px -28px rgba(15, 34, 51, 0.42);

  --tooth: #fbfdfe;
  --tooth-edge: #9fb4c2;
  --gum: #f3c9c9;
  --tooth-pick: #0a6e7d;

  --display: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--body);

  --fs-h1: clamp(42px, 5.8vw, 86px);
  --fs-h2: clamp(32px, 3.8vw, 54px);
  --fs-h3: 21px;
  --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: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- After hours ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0b141c;
    --card: #122130;
    --well: #0f1a24;
    --line: #22364a;
    --ink: #e8f1f6;
    --ink-2: #c6d6e0;
    --muted: #9fb2c0;
    --teal: #5fd0dc;
    --teal-2: #8fdfe8;
    --on-teal: #032a30;
    --teal-soft: #123039;
    --coral: #ff8a66;
    --on-coral: #2e0d03;
    --coral-soft: #3a1d14;
    --focus: #5fd0dc;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
    --tooth: #e9f1f5;
    --tooth-edge: #5d7486;
    --gum: #6b3a44;
    --tooth-pick: #5fd0dc;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b141c;
  --card: #122130;
  --well: #0f1a24;
  --line: #22364a;
  --ink: #e8f1f6;
  --ink-2: #c6d6e0;
  --muted: #9fb2c0;
  --teal: #5fd0dc;
  --teal-2: #8fdfe8;
  --on-teal: #032a30;
  --teal-soft: #123039;
  --coral: #ff8a66;
  --on-coral: #2e0d03;
  --coral-soft: #3a1d14;
  --focus: #5fd0dc;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  --tooth: #e9f1f5;
  --tooth-edge: #5d7486;
  --gum: #6b3a44;
  --tooth-pick: #5fd0dc;
}