/* Design tokens — the single source of truth for colour and type.
   Palette sampled from the cover of Awesome Blast.

   CONTRAST RULE (measured, not eyeballed — see scripts/check_contrast.py):
   bright colours carry INK text, deep colours carry WHITE text.
   Never use --c-magenta, --c-teal, --c-gold or --c-sunshine as a TEXT colour
   on paper — they measure 3.6, 2.5, 2.0 and 2.0 against it. Use the -text
   tokens below, which are the darkened variants and all clear 4.5:1. */

:root {
  /* ---- raw palette ---- */
  --c-sunshine: #f5d935;
  --c-gold: #f0a928;
  --c-gold-deep: #d98e1b;
  --c-magenta: #d9569f;
  --c-pink-deep: #c22778;
  --c-pink-soft: #ee8fc4;
  --c-teal: #2fb5a8;
  --c-teal-deep: #1b7469; /* darkened until it clears 4.5:1 on cream too */
  --c-teal-light: #7fd6c9;
  --c-sky: #5fb8e0;
  --c-cream: #fbf4de;
  --c-paper: #fffdf6;
  --c-ink: #153f49;
  --c-white: #fff;

  /* ---- semantic ---- */
  --bg: var(--c-paper);
  --surface: var(--c-cream);
  --surface-raised: var(--c-white);
  --text: var(--c-ink);
  --text-soft: #4a6b73; /* 5.9:1 on paper */
  --border: #e6dcc4;

  --accent: var(--c-magenta); /* fills, strokes, never text */
  --accent-text: var(--c-pink-deep); /* 5.35:1 on paper */
  --accent-on: var(--c-white); /* 5.45:1 on pink-deep */
  --alt: var(--c-teal);
  --alt-text: var(--c-teal-deep); /* 5.50:1 on paper, 5.09:1 on cream */
  --alt-on: var(--c-ink); /* 4.51:1 on teal */
  --done: var(--c-gold);
  --done-on: var(--c-ink); /* 5.66:1 on gold */
  --locked: #b9b2a6;

  /* ---- type ---- */
  --f-display: Ultra, Georgia, serif;
  --f-heading: 'Alegreya Sans', system-ui, sans-serif;
  --f-body: Alegreya, Georgia, serif;
  --f-hand: Caveat, 'Segoe Script', cursive;
  --f-hebrew: 'Noto Serif Hebrew', 'Times New Roman', serif;

  --t-body: 1.0625rem/1.6 var(--f-body);
  --t-lead: 1.1875rem/1.55 var(--f-body);
  --t-hand: 1.375rem/1.3 var(--f-hand);
  --t-small: 0.9375rem/1.5 var(--f-body);

  /* ---- shape & motion ---- */
  --r-card: 20px;
  --r-badge: 12px;
  --r-pill: 999px;
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 16px;
  --s-l: 24px;
  --s-xl: 40px;
  --shadow: 0 2px 10px rgb(21 63 73 / 8%);
  --shadow-lift: 0 6px 22px rgb(21 63 73 / 14%);
  --ease: cubic-bezier(0.32, 0.72, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-walk: 2400ms; /* the marker's walk between stations */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
    --t-walk: 1ms;
  }
}