/**
 * 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 {
  /* Typography */
  --pd-font-body: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-heading: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-display: "Copernicus", Georgia, serif;
  --pd-font-condensed: "American Grotesk Condensed", "Baloo 2", 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: #f6f4ef;
  --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.35);
  --pd-colour-press: rgba(26, 26, 26, 0.08);

  /* 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-gate: 11000;
  --pd-z-modal: 10000;
  --pd-z-rotate: 9000;
}

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