/* Playful primary (playful-primary) — generated by design-kit/scripts/tokens.mjs
   Mood: friendly, bright, energetic
   Signature: Chunky rounded shapes, hard offset shadows (4px 4px 0 text color), big friendly illustrations, three primaries used as a set, never more.
   Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap">
   Use ONLY these variables for color, type, space, radius, shadow, motion. */
:root {
  color-scheme: light;

  /* color roles */
  --color-bg: #FFF9EC;
  --color-surface: #FFFFFF;
  --color-text: #1E1B3A;
  --color-muted: #55507A;
  --color-border: #EADFC4;
  --color-accent: #D96F4E;          /* fills: primary buttons, selected states */
  --color-on-accent: #121212;         /* text on accent fills */
  --color-accent-text: #BA5333;     /* links and accent-colored text on bg */
  --color-accent-soft: #FFE5DD;     /* tinted backgrounds */
  --color-accent-2: #FF6B3D;         /* secondary highlight, use rarely */
  --color-accent-3: #FFC933;
  --color-success: #0E8243;
  --color-warning: #9F6501;
  --color-danger: #D6334A;
  --color-on-danger: #FFFFFF;
  --color-focus: #BA5333;
  --accent-50: #FEF4F1;
  --accent-100: #FFE5DD;
  --accent-200: #FECABA;
  --accent-300: #F6A88F;
  --accent-400: #E48365;
  --accent-500: #CC6342;
  --accent-600: #AF4C2D;
  --accent-700: #90391D;
  --accent-800: #6F2911;
  --accent-900: #501A09;

  /* type */
  --font-heading: "Baloo 2", 'Trebuchet MS', system-ui, sans-serif;
  --font-body: "Nunito", 'Trebuchet MS', system-ui, sans-serif;
  --font-ui: "Nunito", 'Trebuchet MS', system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --step-n2: 0.75rem;   /* 12px */
  --step-n1: 0.875rem;   /* 14px */
  --step-0: 1.0625rem;   /* 17px */
  --step-1: 1.3125rem;   /* 21px */
  --step-2: 1.6875rem;   /* 27px */
  --step-3: 2.0625rem;   /* 33px */
  --step-4: 2.625rem;   /* 42px */
  --step-5: 3.25rem;   /* 52px */
  --step-6: 4.0625rem;   /* 65px */
  --weight-heading: 800;
  --tracking-heading: 0;
  --leading-body: 1.55;
  --leading-heading: 1.12;
  --measure: 65ch;

  /* space (use only these) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* shape and depth */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-1: 3px 3px 0 var(--color-text);
  --shadow-2: 5px 5px 0 var(--color-text);

  /* controls */
  --control-sm: 40px;
  --control-md: 44px;
  --control-lg: 52px;

  /* motion */
  --dur-fast: 150ms;
  --dur-slow: 360ms;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-slow: 0ms; }
}