/* =====================================================================
   Sprout · design tokens
   Childcare and early learning. Light is "Playtime"; dark is "Nap time".
   --pond is the one accent (buttons, links, the chosen room and days).
   --sun (sunshine) and --coral are fills only (the crayon underline, places left, room colours); text on them is ink. --sun-ink is sunshine as text.
   --alert is only for invalid fields, a full day and fees above the hourly cap.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #fffaf2;
  --card: #ffffff;
  --well: #fbf1e2;
  --line: #eadfcd;
  --ink: #1d2230;
  --ink-2: #3f4556;
  --muted: #5b6170;
  --pond: #0f5f73;
  --pond-2: #0a4a5a;
  --on-pond: #ffffff;
  --pond-soft: #dff0f3;
  --sun: #ffd166;
  --sun-soft: #fff1cc;
  --sun-ink: #8a5300;
  --coral: #ff9f80;
  --coral-soft: #ffe6dc;
  --alert: #b2341c;
  --focus: #0f5f73;
  --shadow-card: 0 1px 2px rgba(29, 34, 48, 0.05), 0 18px 36px -26px rgba(29, 34, 48, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(29, 34, 48, 0.45);

  --display: "Nunito", "Varela Round", system-ui, sans-serif;
  --body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Sono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(42px, 5.8vw, 86px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: 21px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --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: 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;
}

/* ---------- Nap time ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #11141b;
    --card: #1b1f28;
    --well: #161921;
    --line: #2e3441;
    --ink: #eef0f5;
    --ink-2: #d0d4de;
    --muted: #a3a9b6;
    --pond: #7fd0e0;
    --pond-2: #a7e0eb;
    --on-pond: #062a33;
    --pond-soft: #15303a;
    --sun: #ffd166;
    --sun-soft: #2d2714;
    --sun-ink: #ffd166;
    --coral: #ff9f80;
    --coral-soft: #33201b;
    --alert: #ff9a8a;
    --focus: #7fd0e0;
    --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);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #11141b;
  --card: #1b1f28;
  --well: #161921;
  --line: #2e3441;
  --ink: #eef0f5;
  --ink-2: #d0d4de;
  --muted: #a3a9b6;
  --pond: #7fd0e0;
  --pond-2: #a7e0eb;
  --on-pond: #062a33;
  --pond-soft: #15303a;
  --sun: #ffd166;
  --sun-soft: #2d2714;
  --sun-ink: #ffd166;
  --coral: #ff9f80;
  --coral-soft: #33201b;
  --alert: #ff9a8a;
  --focus: #7fd0e0;
  --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);
}