/* ═══════════════════════════════════════════════════════════
   THE THEME. Every color, font, radius, shadow and motion curve
   in the entire app comes from this file. Change a variable here
   and it changes everywhere.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── palette ─────────────────────────────────────────── */
  --c-bg: #FFF7EC;            /* warm cream page background */
  --c-bg-dots: #FFE9CF;       /* polka-dot pattern color */
  --c-surface: #FFFFFF;       /* cards / panels */
  --c-ink: #33304E;           /* main text + borders (dark plum) */
  --c-ink-soft: #79749B;      /* secondary text */
  --c-line: #F0E4D2;          /* subtle separators */

  --c-coral: #FF6B6B;
  --c-teal: #33C6BB;
  --c-yellow: #FFC93D;
  --c-purple: #9B5DE5;
  --c-pink: #F15BB5;
  --c-mint: #06D6A0;
  --c-orange: #FF9F1C;
  --c-blue: #5BC0EB;

  /* role mapping — repaint the app by remapping these */
  --c-primary: var(--c-coral);     /* main actions */
  --c-secondary: var(--c-teal);    /* secondary actions */
  --c-accent: var(--c-yellow);     /* highlights, timers, stars */
  --c-fun: var(--c-purple);        /* constraint cards, special bits */
  --c-danger: #E63946;
  --c-success: var(--c-mint);

  /* ── typography ──────────────────────────────────────── */
  --font-display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-hero: clamp(2.5rem, 8vw, 4rem);

  /* ── shape ───────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --border-w: 2.5px;
  --border: var(--border-w) solid var(--c-ink);

  /* sticker look: hard offset shadow + soft ambient */
  --shadow-pop: 0 4px 0 rgba(51, 48, 78, 0.2);
  --shadow-pop-active: 0 1px 0 rgba(51, 48, 78, 0.2);
  --shadow-card: 0 10px 30px rgba(51, 48, 78, 0.12);

  /* ── motion ──────────────────────────────────────────── */
  --t-fast: 0.15s;
  --t-med: 0.3s;
  --t-slow: 0.6s;
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── layout ──────────────────────────────────────────── */
  --maxw: 580px;
  --maxw-wide: 760px;
  --gap: 1rem;
  --pad: 1.25rem;
}