/**
 * Design tokens.
 *
 * The only place platform-wide colours, fonts and spacing are defined.
 * Games may read these but should define their own board colours locally,
 * namespaced under their root class, so they stay portable.
 *
 * All token names are prefixed `--pd-` to guarantee they never collide with
 * the unprefixed custom properties games declare for themselves.
 */

:root,
html[data-theme="light"] {
  /* Typography
     Baloo 2 — game titles, playable letters/numbers, score figures.
     Source Sans 3 — product UI (hub chrome, modals, CTAs, copy). */
  --pd-font-ui: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --pd-font-body: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-heading: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --pd-weight-regular: 400;
  --pd-weight-medium: 500;
  --pd-weight-bold: 700;
  --pd-weight-black: 800;

  /* Colour */
  --pd-colour-background: #ffffff;
  --pd-colour-surface: #ffffff;
  --pd-colour-text: #1a1a1a;
  --pd-colour-heading: #161613;
  --pd-colour-muted: #6b6b66;
  --pd-colour-border: #c8c8c8;
  --pd-colour-border-strong: #1a1a1a;
  --pd-colour-accent: #2e9e5b;
  --pd-colour-accent-hover: #278a4f;
  --pd-colour-accent-shadow: rgba(46, 158, 91, 0.28);
  --pd-colour-danger: #f22f2c;
  --pd-colour-backdrop: rgba(0, 0, 0, 0.55);
  /* Solid stand-in for the dim — Safari 26+ samples fixed layers for the
     status / home bars and mishandles translucent rgba. */
  --pd-colour-backdrop-solid: #737373;
  --pd-colour-press: rgba(26, 26, 26, 0.08);

  /* Hub card / game welcome tones */
  --pd-tone-18words: #dceee3;
  --pd-tone-wordsnake: #f2ddd2;
  --pd-tone-themiddle: #f2e6c4;
  --pd-tone-zanagrams: #dce4f5;
  --pd-tone-sunflowers: #f4edbe;
  --pd-tone-headlines: #e4ebe3;
  --pd-tone-experiments: #f5ddd0;

  /* Radius */
  --pd-radius-small: 8px;
  --pd-radius-medium: 16px;
  --pd-radius-large: 24px;
  --pd-radius-pill: 999px;

  /* Spacing */
  --pd-spacing-1: 4px;
  --pd-spacing-2: 8px;
  --pd-spacing-3: 12px;
  --pd-spacing-4: 16px;
  --pd-spacing-5: 24px;
  --pd-spacing-6: 32px;
  --pd-spacing-7: 48px;
  --pd-spacing-8: 64px;

  /* Layout */
  --pd-content-width: 1403px;
  --pd-reading-width: 34rem;

  /* Elevation */
  --pd-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.12);
  --pd-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.24);

  /* Motion */
  --pd-transition-fast: 0.12s ease;
  --pd-transition-base: 0.15s ease;
  --pd-ease-rise: cubic-bezier(0.22, 1, 0.36, 1);

  /* Stacking. Kept together so the order is reviewable in one place. */
  --pd-z-toast: 12000;
  --pd-z-modal: 10000;
  --pd-z-rotate: 9000;
}

/* Site-wide dark theme. Games remap their local board vars under the same
   `html[data-theme="dark"]` switch so chrome + puzzles stay in sync. */
html[data-theme="dark"] {
  color-scheme: dark;

  --pd-colour-background: #141412;
  --pd-colour-surface: #1c1c19;
  --pd-colour-text: #f0efe8;
  --pd-colour-heading: #f5f4ed;
  --pd-colour-muted: #9a9a92;
  --pd-colour-border: #3a3a35;
  --pd-colour-border-strong: #f0efe8;
  --pd-colour-accent: #3cb87a;
  --pd-colour-accent-hover: #2e9e5b;
  --pd-colour-accent-shadow: rgba(60, 184, 122, 0.28);
  --pd-colour-danger: #ef5b58;
  --pd-colour-backdrop: rgba(0, 0, 0, 0.7);
  --pd-colour-backdrop-solid: #060605;
  --pd-colour-press: rgba(255, 255, 255, 0.08);

  --pd-tone-18words: #24362c;
  --pd-tone-wordsnake: #3a2c26;
  --pd-tone-themiddle: #3a3424;
  --pd-tone-zanagrams: #2a3142;
  --pd-tone-sunflowers: #3a3420;
  --pd-tone-headlines: #2a322a;
  --pd-tone-experiments: #3a2c26;

  --pd-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.4);
  --pd-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--pd-colour-background) !important;
  color: var(--pd-colour-text);
}

/* Full-bleed page paint so wide viewports never show light gutters beside
   max-width game shells. */
html[data-theme="dark"] body.pd-game,
html[data-theme="dark"] body.pd-hub,
html[data-theme="dark"] .pd-game-root {
  background: var(--pd-colour-background) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pd-transition-fast: 0s;
    --pd-transition-base: 0s;
  }
}