/* ─── Platyland design tokens ─────────────────────────────────────────────
   Warm storybook palette built around our platypus mascot.
   Deep navy ink on cream paper, with coral/mint/sun accents.            */

:root {
  /* Paper & ink */
  --paper: #fdf4e3;
  --paper-deep: #f6e9cd;
  --paper-edge: #ecdcb6;
  --ink: #1b3a5b;
  --ink-soft: #3d5775;
  --ink-muted: #7b8aa0;

  /* Primary characters */
  --coral: #ff6b6b;
  --coral-deep: #e8514d;
  --mint: #7ecec4;
  --mint-deep: #4ab0a4;
  --sun: #ffd23f;
  --sun-deep: #f2b705;
  --berry: #d65d9e;
  --sky: #6fb3e0;

  /* Semantic */
  --primary: var(--coral);
  --primary-deep: var(--coral-deep);
  --accent: var(--sun);
  --success: #5bb974;
  --error: #e8514d;

  /* Surfaces */
  --card: #fffaf0;
  --card-soft: #fff5e0;
  --line: rgba(27, 58, 91, 0.14);
  --line-strong: rgba(27, 58, 91, 0.22);

  /* Shadow — offset hand-drawn style */
  --shadow-stamp: 4px 4px 0 rgba(27, 58, 91, 0.92);
  --shadow-stamp-sm: 3px 3px 0 rgba(27, 58, 91, 0.9);
  --shadow-soft: 0 14px 32px rgba(27, 58, 91, 0.12);
  --shadow-soft-lg: 0 24px 50px rgba(27, 58, 91, 0.18);
  --shadow-inset-paper: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* Radii — slightly irregular, storybook feel */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Fonts */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Legacy bridge (existing game-styles.css / memory board) */
  --bg-1: var(--paper);
  --bg-2: var(--paper-deep);
  --bg-3: var(--paper);
  --primary-dark: var(--coral-deep);
  --secondary: var(--berry);
  --accent-soft: #ffe8a8;
  --text: var(--ink);
  --muted: var(--ink-muted);
  --border: var(--line);
  --shadow: var(--shadow-soft);
  --shadow-hover: var(--shadow-soft-lg);
  --card-radius: var(--r-lg);
  --tile-height: 260px;
  --tile-front: linear-gradient(180deg, #fffaf0, #fff1d4);
  --tile-back: linear-gradient(135deg, var(--ink), #284a6e);
  --tile-matched: linear-gradient(135deg, var(--mint-deep), var(--mint));
}