/* KidsZone design tokens: colours, type, spacing, radii, shadows, motion.
   Bright, rounded, high-contrast. Text colours are checked against WCAG AA:
   --ink on --paper/--card/--sun is > 7:1; white text is only used on the "-deep" fills
   at large bold sizes (>= 3:1 large-text AA, most are > 4.5:1). */
:root {
  /* type: rounded system fonts only (no font files are shipped) */
  --font: ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.875rem;
  --fs-s: 1rem;
  --fs-m: 1.25rem;
  --fs-l: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --fs-xxl: clamp(2.75rem, 1.6rem + 6vw, 5.5rem);

  /* palette */
  --ink: #2b2d42;
  --ink-soft: #4a4e69;
  --paper: #fff9ee;
  --card: #ffffff;
  --line: #e9e3d5;

  --sky-top: #5ec4ff;
  --sky-bottom: #c8f0ff;
  --sun: #ffd23f;
  --sun-deep: #f5a300;
  --grass: #7bd35f;
  --grass-deep: #3d9b3a;

  --orange: #ff8a3d;
  --orange-deep: #c2410c;
  --blue: #3fa9f5;
  --blue-deep: #1b64b5;
  --green: #3ccf6e;
  --green-deep: #13803d;
  --pink: #ff7eb6;
  --pink-deep: #b8236b;
  --purple: #a77bf3;
  --purple-deep: #6a3fc4;
  --teal: #2ec4b6;
  --teal-deep: #0f766e;
  --red: #ff5a5f;

  --good: #13803d;
  --good-glow: rgba(60, 207, 110, 0.55);
  --try: #c2410c;
  --focus: #1b64b5;

  /* shape */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --tap: 64px;              /* minimum touch target */
  --tap-compact: 48px;      /* phones, where header, head and option rows are slimmer: still well over 44px */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter: clamp(16px, 4vw, 40px);
  --content: 1180px;

  /* depth: soft shadows plus a chunky "toy" bottom edge on buttons */
  --shadow-1: 0 2px 4px rgba(43, 45, 66, 0.08), 0 6px 16px rgba(43, 45, 66, 0.10);
  --shadow-2: 0 4px 8px rgba(43, 45, 66, 0.10), 0 14px 32px rgba(43, 45, 66, 0.16);
  --shadow-lift: 0 10px 18px rgba(43, 45, 66, 0.16), 0 26px 48px rgba(43, 45, 66, 0.24);
  --edge: rgba(43, 45, 66, 0.22);

  /* motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  /* motion switches (see animations.css): calm mode / reduced motion swaps these */
  --enter: pop-in;
  --enter-rise: fade-rise;
  --loops: running;
}