/* =====================================================================
   Pebble · design tokens
   Soft, tactile and friendly: squishy clay shapes with layered inner and
   outer shadows on a pebble-grey ground, four pastels and one bold colour
   that carries text and buttons. "Dusk" is the dark mode: the same soft
   depth, with shadows turned into glows.
   Dark mode follows the visitor's system setting unless <html> carries
   data-theme="light" | "dark".
   Keep in sync with tokens.json (scripts/sync-tokens.mjs copies this file
   into template/css/tokens.css).
   ===================================================================== */
:root {
  /* ---- ground and surfaces ---- */
  --bg: #f1eef5;            /* pebble grey with a breath of lilac; never cream, never white */
  --surface: #fcfbfe;       /* white clay: cards, phone screens, plans */
  --sunk: #e6e0ee;          /* pressed-in wells: tracks, inputs, toggle beds */
  --tray: #e3dcee;          /* the basin the pebbles settle in */
  --line: #ddd5e6;          /* the rare hairline */
  --ink: #2b1435;           /* deep plum: all text */
  --ink-2: #4e3a59;
  --muted: #67566f;         /* quiet text; AA on bg, surface, sunk and every tint */

  /* ---- the four pastels (pigments: pebbles, coins, knobs, dots) ---- */
  --mint: #9fe0c0;
  --lilac: #c8b7fb;
  --butter: #ffd86a;
  --blush: #ffb3a6;
  --on-pastel: #2b1435;     /* text on a pigment (pebbles, coins, pills): plum in both modes */
  /* ---- the same pastels as card surfaces (paler in light, deep in dusk) ---- */
  --tint-mint: #d3f1e2;
  --tint-lilac: #e6defd;
  --tint-butter: #fff0c2;
  --tint-blush: #ffe2dc;

  /* ---- the one bold colour: buttons, the featured plan, the closing slab ---- */
  --bold: #3a1748;
  --bold-2: #4c2160;        /* bold, hovered */
  --on-bold: #fff3cc;       /* text on bold */
  --focus: #6a2fd8;         /* focus ring */
  --ok: #1d7650;            /* "covered", "on track" text */
  --glow: rgba(58, 23, 72, 0.28); /* the coloured part of outer shadows (a glow in dusk) */
  --hi: rgba(255, 255, 255, 0.6); /* specular highlight on clay */
  --knob: #ffffff;          /* switch knobs: the brightest clay on the page */

  /* ---- depth: every raised thing is clay ---- */
  --shadow-clay: inset 0 2px 1px rgba(255, 255, 255, 0.75), inset 0 -10px 18px -8px rgba(43, 20, 53, 0.16), 0 2px 3px rgba(43, 20, 53, 0.06), 0 18px 34px -18px var(--glow);
  --shadow-lift: inset 0 2px 1px rgba(255, 255, 255, 0.8), inset 0 -10px 18px -8px rgba(43, 20, 53, 0.14), 0 6px 10px -4px rgba(43, 20, 53, 0.08), 0 38px 60px -26px var(--glow);
  --shadow-press: inset 0 6px 14px rgba(43, 20, 53, 0.26), inset 0 -2px 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-sunk: inset 0 5px 12px rgba(43, 20, 53, 0.13), inset 0 -2px 1px rgba(255, 255, 255, 0.85);
  --shadow-btn: inset 0 2px 1px rgba(255, 255, 255, 0.26), inset 0 -7px 12px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(43, 20, 53, 0.18), 0 14px 26px -12px rgba(43, 20, 53, 0.6);
  --shadow-btn-press: inset 0 6px 12px rgba(0, 0, 0, 0.42), inset 0 -1px 1px rgba(255, 255, 255, 0.14), 0 1px 1px rgba(43, 20, 53, 0.12);

  /* ---- type ---- */
  --display: "Fredoka", "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --fs-h1: clamp(46px, 6.2vw, 92px);
  --fs-h2: clamp(34px, 4.6vw, 64px);
  --fs-cta: clamp(40px, 6vw, 88px);
  --fs-h3: 23px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-tiny: 12.5px;

  /* ---- space ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 72px; --s-9: 120px; --s-10: 160px;
  --wrap: 1200px;
  --gutter: 24px;

  /* ---- shape: generous everywhere, nested radii step down ---- */
  --r-xs: 10px; --r-sm: 16px; --r-md: 24px; --r-lg: 32px; --r-xl: 44px; --r-pill: 999px;

  /* ---- motion: springs, not fades ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot: lifts, knobs, reveals */
  --spring-soft: cubic-bezier(0.3, 1.3, 0.6, 1);
  --d-press: 0.14s;         /* button press in */
  --d-release: 0.5s;        /* button springs back out */
  --d-lift: 0.55s;          /* card hover lift */
  --d-enter: 0.9s;          /* scroll reveal pop */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1322; --surface: #261c31; --sunk: #130e19; --tray: #150f1c; --line: #34293f;
    --ink: #f8f1fb; --ink-2: #ddcfe5; --muted: #ae9eb9;
    --mint: #8ee3bc; --lilac: #bca9ff; --butter: #ffd664; --blush: #ffa999;
    --tint-mint: #1b3530; --tint-lilac: #2b2346; --tint-butter: #362d18; --tint-blush: #3c2229;
    --bold: #ffd664; --bold-2: #ffe28c; --on-bold: #2b1435; --focus: #ffd664; --ok: #8ee3bc;
    --glow: rgba(188, 169, 255, 0.3); --hi: rgba(255, 255, 255, 0.07); --knob: #f3eaf8;
    --shadow-clay: inset 0 1px 1px rgba(255, 255, 255, 0.13), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.035), 0 18px 46px -18px var(--glow);
    --shadow-lift: inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 70px -20px var(--glow);
    --shadow-press: inset 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
    --shadow-sunk: inset 0 5px 14px rgba(0, 0, 0, 0.55), inset 0 -1px 1px rgba(255, 255, 255, 0.07);
    --shadow-btn: inset 0 2px 1px rgba(255, 255, 255, 0.65), inset 0 -7px 12px rgba(150, 90, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 34px -8px rgba(255, 214, 100, 0.55);
    --shadow-btn-press: inset 0 6px 12px rgba(120, 70, 0, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.3), 0 0 18px -4px rgba(255, 214, 100, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1322; --surface: #261c31; --sunk: #130e19; --tray: #150f1c; --line: #34293f;
  --ink: #f8f1fb; --ink-2: #ddcfe5; --muted: #ae9eb9;
  --mint: #8ee3bc; --lilac: #bca9ff; --butter: #ffd664; --blush: #ffa999;
  --tint-mint: #1b3530; --tint-lilac: #2b2346; --tint-butter: #362d18; --tint-blush: #3c2229;
  --bold: #ffd664; --bold-2: #ffe28c; --on-bold: #2b1435; --focus: #ffd664; --ok: #8ee3bc;
  --glow: rgba(188, 169, 255, 0.3); --hi: rgba(255, 255, 255, 0.07); --knob: #f3eaf8;
  --shadow-clay: inset 0 1px 1px rgba(255, 255, 255, 0.13), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.035), 0 18px 46px -18px var(--glow);
  --shadow-lift: inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 70px -20px var(--glow);
  --shadow-press: inset 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
  --shadow-sunk: inset 0 5px 14px rgba(0, 0, 0, 0.55), inset 0 -1px 1px rgba(255, 255, 255, 0.07);
  --shadow-btn: inset 0 2px 1px rgba(255, 255, 255, 0.65), inset 0 -7px 12px rgba(150, 90, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 34px -8px rgba(255, 214, 100, 0.55);
  --shadow-btn-press: inset 0 6px 12px rgba(120, 70, 0, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.3), 0 0 18px -4px rgba(255, 214, 100, 0.45);
  color-scheme: dark;
}