/* Design tokens. Breakpoints: 480px, 768px, 1024px, 1440px. */
:root,
[data-theme="vanilla"] {
  --color-candy-cherry: #e5484d;
  --color-candy-cherry-dark: #a91f39;
  --color-candy-blueberry: #3b82d0;
  --color-candy-blueberry-dark: #1d5ca7;
  --color-candy-lime: #2fa66a;
  --color-candy-lime-dark: #197044;
  --color-candy-lemon: #e3a91a;
  --color-candy-lemon-dark: #b8790e;
  --color-candy-tangerine: #e97825;
  --color-candy-tangerine-dark: #b94a15;
  --color-candy-grape: #8051c7;
  --color-candy-grape-dark: #5b348e;
  --color-candy-pink: #e85db3;
  --color-candy-pink-dark: #a61f76;
  --color-primary: #d9366e;
  --color-primary-dark: #9f234f;
  --color-secondary: #3e2a72;
  --color-accent: #b45309;
  --color-success: #0f766e;
  --color-danger: #b42318;
  --color-text: #2a2040;
  --color-text-muted: #665c78;
  --color-surface: #fff9ef;
  --color-surface-raised: #ffffff;
  --color-surface-soft: #f7eadb;
  --color-border: #d9c6b3;
  --color-focus: #155eef;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-accent: #2a2040;
  --color-on-success: #ffffff;
  --color-on-danger: #ffffff;
  --color-app-bg: #8edcf0;
  --color-board-bg: #fff4df;
  --color-board-line: rgb(62 42 114 / 9%);
  --color-candy-highlight: rgb(255 255 255 / 88%);
  --color-candy-shadow: rgb(42 32 64 / 35%);
  --color-candy-special: #fff3b0;

  --grad-app: linear-gradient(135deg, #8edcf0 0%, #f7c8df 100%);
  --grad-primary: linear-gradient(135deg, #ed5685 0%, #d9366e 100%);
  --grad-surface: linear-gradient(145deg, #ffffff 0%, #fff3df 100%);
  --grad-board: linear-gradient(145deg, #8e4f32 0%, #5f3028 100%);
  --grad-success: linear-gradient(135deg, #159783 0%, #0f766e 100%);

  --shadow-sm: 0 0.2rem 0.45rem rgb(42 32 64 / 14%), 0 0.12rem 0 rgb(255 255 255 / 70%) inset;
  --shadow-md: 0 0.55rem 1rem rgb(42 32 64 / 16%), 0 0.18rem 0 rgb(255 255 255 / 70%) inset;
  --shadow-lg: 0 1.2rem 2.5rem rgb(42 32 64 / 22%), 0 0.3rem 0 rgb(255 255 255 / 60%) inset;
  --shadow-glow: 0 0 1.25rem rgb(255 255 255 / 55%), 0 0.35rem 1rem rgb(217 54 110 / 28%);

  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --candy-shape-round: 50%;
  --candy-shape-square: 28%;
  --candy-shape-triangle: 50% 12% 50% 12%;
  --candy-shape-drop: 46% 46% 40% 40% / 60% 60% 40% 40%;
  --candy-shape-star: 38% 62% 63% 37% / 41% 44% 56% 59%;
  --candy-shape-hex: 28% 72% 28% 72%;
  --border-width-sm: 0.1rem;
  --border-width-md: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --tap-min: 44px;
  --button-large-min-height: 3.75rem;
  --button-icon-size: var(--tap-min);
  --progress-height: 1rem;
  --modal-max-height: 90dvh;
  --modal-width: 30rem;
  --content-max: 70rem;
  --board-max: 36rem;
  --game-screen-gutter: 20px;

  --font-family: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: clamp(1.25rem, 3vw, 2rem);
  --font-size-xl: clamp(2rem, 6vw, 3.5rem);
  --font-size-hero: clamp(2.8rem, 11vw, 6rem);
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-body: 1.45;
  --line-height-tight: 1.1;

  --z-base: 0;
  --z-content: 1;
  --z-sticky: 10;
  --z-overlay: 50;
  --z-dialogue: 100;
  --z-toast: 200;
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.2, 1.4, 0.4, 1);
  --candy-size-inset: 8%;
  --board-cell-size: 12.5%;
  --candy-symbol-scale: 0.36;
  --candy-active-scale: 0.92;
  --candy-hover-scale: 1.08;
  --candy-selected-scale: 1.16;
  --candy-selected-pulse-start: 1.12;
  --candy-selected-pulse-end: 1.19;
  --candy-hint-pulse-end: 1.1;
  --candy-spawn-start-scale: 0.5;
  --candy-spawn-end-scale: 1.08;
  --candy-bomb-symbol-scale: 1.3;
  --candy-hint-angle: 3deg;
  --candy-gloss-size: 30%;
  --candy-pop-scale: 1.3;

  /* Compatibility aliases for the current game CSS. */
  --navy: var(--color-text);
  --pink: var(--color-primary);
  --pink-dark: var(--color-primary-dark);
  --mint: var(--color-success);
  --gold: var(--color-accent);
  --purple: var(--color-secondary);
  --cream: var(--color-surface);
  --on-bg: var(--color-text);
  --app-bg: var(--color-app-bg);
  --board-bg: var(--color-board-bg);
  --board-line: var(--color-board-line);
  --board-border: var(--color-accent);
}

:root { --cell: 48px; }