/* Storycard design tokens.
   Two layers:
   1. Scale tokens (type, space, radius, shadow, motion): theme-independent, defined here.
   2. Semantic color + mood tokens (--c-*, --tex-*, --orn-*): neutral winter defaults here, overridden by a theme file
      selected with <html data-theme="christmas|hanukkah|winter">. A new season = one new file in themes/. */

:root {
  /* ---- type ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* modular scale, ratio 1.25 from 16px; display sizes clamp with the viewport */
  --fs-xs: 0.8125rem;   /* 13 - counters, captions */
  --fs-sm: 0.9375rem;   /* 15 - help text */
  --fs-md: 1.0625rem;   /* 17 - body, inputs (>=16 so iOS doesn't zoom) */
  --fs-lg: 1.25rem;     /* 20 - card titles */
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.1rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 4.6vw, 4.6rem);
  --lh-tight: 1.08;
  --lh-ui: 1.45;
  --lh-story: 1.62;     /* serif story text gets more air than UI sans */
  --measure: 34rem;     /* ~65 characters */

  /* ---- space (4px base) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --gutter: 1rem;       /* 16px phone gutter; widened at breakpoints */

  /* ---- radius: hand-cut, slightly irregular, so nothing reads as a stamped SaaS card ---- */
  --r-sm: 6px;
  --r-md: 12px 14px 11px 15px / 14px 11px 15px 12px;
  --r-lg: 20px 24px 19px 26px / 24px 19px 26px 20px;
  --r-pill: 999px;

  /* ---- shadow: warm, low, like paper on a table ---- */
  --sh-1: 0 1px 0 rgb(var(--shadow-rgb) / .10), 0 2px 6px rgb(var(--shadow-rgb) / .08);
  --sh-2: 0 1px 0 rgb(var(--shadow-rgb) / .10), 0 10px 24px -8px rgb(var(--shadow-rgb) / .28);
  --sh-3: 0 30px 60px -20px rgb(var(--shadow-rgb) / .45), 0 8px 18px -6px rgb(var(--shadow-rgb) / .3);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-ink: cubic-bezier(.55, .1, .35, 1);
  --ease-page: cubic-bezier(.45, .05, .25, 1);
  --t-fast: 140ms; --t-med: 280ms; --t-slow: 600ms; --t-page: 900ms;

  /* ---- semantic colors: neutral winter defaults (a theme overrides these) ---- */
  --c-paper: #f3f1ec;
  --c-paper-2: #e7e4dc;
  --c-card: #fbfaf7;
  --c-ink: #22262b;
  --c-ink-2: #545b63;       /* secondary text, AA on paper */
  --c-line: #c9c6bd;
  --c-primary: #2d4a63;
  --c-on-primary: #ffffff;
  --c-accent: #8a3242;
  --c-on-accent: #ffffff;
  --c-glow: #e2b75a;        /* lit bulbs, highlights; never text */
  --c-ok: #2f6a48;
  --c-danger: #a1262f;
  --c-focus: #1f6fbf;
  --shadow-rgb: 40 30 20;
  --tex-paper: none;        /* background texture */
  --orn-divider: none;      /* ornament image used between story sections and on book pages */
}

/* Reduced motion: zero out the tokens; components also gate their keyframes on this query. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; --t-page: 1ms; }
}