/* ---------------------------------------------------------------
   DESIGN TOKENS — the app's single palette and scale. Every colour,
   spacing, radius and motion value lives here; css/style.css only uses
   these variables.

   Palette: "Muted Reef" (owner's pick, 2026-09-29; from the Coolors cold-trending ocean palette,
   docs/design/palettes-2-ocean.html). Before that: "Onyx" (2026-09-24), cooled down:
   blue-black base, steel board, cold accent. Accent: "ice" (owner, 2026-09-24).

   Scale: spacing 4 8 12 16 24 32; radius 6 8 12; touch target 44.
--------------------------------------------------------------- */
:root {
  /* scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --r-1: 6px; --r-2: 8px; --r-3: 12px;
  --tap: 44px;
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* surfaces — colder, less saturated than round 2 */
  --bg: #0a1520;
  --surface: #132636;
  --surface-2: #1a3044;
  --line: rgba(200, 235, 245, 0.09);
  --text: #e4eff4;
  --text-dim: #8aa6b6;

  /* accent (default "ice") */
  --accent: #48cae4;
  --accent-deep: #2a93b0;
  --accent-ink: #06202b;

  /* semantic */
  --good: #4fe0bf;
  --good-wash: rgba(79, 224, 191, 0.45);
  --bad: #ff6470;
  --bad-wash: rgba(255, 100, 112, 0.45);
  --warn: #ffc26b;
  --info: #48cae4;
  --xp: #ffd166;

  /* Muted Reef application palette; the selected Classic piece set overrides
     board squares below to match the current phone build. */
  --sq-light: linear-gradient(135deg, #d7ecf1, #caf0f8);
  --sq-dark: linear-gradient(135deg, #4f8199, #3a687f);
  --sq-last: rgba(255, 207, 105, 0.32);
  --sq-target: rgba(5, 12, 16, 0.24);
  --sq-check: #ff4b55;
  --coord: rgba(5, 12, 16, 0.55);
  --hint: #ffd166;

  /* ice family (the accent expanded into a palette) + complements that sit with it */
  --ice-50: #eef9fb; --ice-100: #d3f0f6; --ice-200: #a9e3ef; --ice-300: #48cae4; --ice-400: #34b3d2;
  --ice-500: #2a93b0; --ice-700: #1c5a70; --ice-800: #173f50; --ice-900: #0f2533;
  --mint: #4fe0bf;      /* success, "my games" */
  --lilac: #aab6ff;     /* surprises, secondary accents */
  --coral: #ff8a93;     /* traps, errors */
  --amber: #ffc26b;     /* streak, due */
  --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.10) 46%, rgba(255, 255, 255, 0) 50%);
  --glow-ice: 0 0 0 1px rgba(72, 202, 228, 0.25), 0 8px 24px rgba(42, 147, 176, 0.25);

  /* tiers */
  --bronze: #cd7f32; --silver: #b9c4d3; --gold: #ffc800; --master: #ff6b9d;
}

/* The installed phone build uses the Classic ivory / blue board with its
   Classic raster piece variants. Keep the Reef shell and accent colors. */
:root[data-pieces="pieces-concept-classic"] {
  --sq-light: linear-gradient(135deg, #f7f3e8, #efe8d6);
  --sq-dark: linear-gradient(135deg, #506f92, #456383);
}