/* ==========================================================================
   GESDA — Anticipation Games v2 · tokens
   The only place colour values live (designv2.1 §16, §19). Carried over
   from the v1 page's :root block, plus the tokens the components ported
   from experiences-page/v5 read under their own names. (The Highlights
   slideshow now lives standalone in highlights-section.html.)
   ========================================================================== */

:root {
  /* Purple ramp — §3.1 */
  --purple-900: #27053D;
  --purple-800: #420866;
  --purple-700: #530982;
  --purple-600: #5C0C8E;
  --purple-300: #B570E0;
  --purple-100: #DAB7EF;
  --purple-050: #F7F2FD;
  --neutral-body: #333840;
  --neutral-muted: #5A5560;

  /* Platform colours — §3.2 */
  --p1-violet: #440B47;
  --p2-blue: #00747D;
  --p3-green: #008F7B;
  --p3-green-deep: #006F5F;
  --p4-orange: #F39323;   /* fill only on light; 7.7:1 on purple-900 */
  --p5-grey: #505050;

  /* Light semantics — §3.4 */
  --canvas: #FFFFFF;
  --canvas-tinted: var(--purple-050);
  --ink: var(--purple-900);
  --body: var(--neutral-body);
  --muted: var(--neutral-muted);
  --hairline: rgba(39, 5, 61, 0.14);
  --hairline-soft: rgba(39, 5, 61, 0.07);
  --action: var(--purple-700);
  --action-hover: var(--purple-600);
  --action-active: var(--purple-800);
  --on-action: #FFFFFF;

  /* Dark semantics — §3.6 */
  --canvas-dark: var(--purple-900);
  --ink-on-dark: var(--purple-050);
  --body-on-dark: var(--purple-100);
  --muted-on-dark: var(--purple-300);
  --hairline-on-dark: rgba(247, 242, 253, 0.16);
  --wash-on-dark: rgba(255, 255, 255, 0.10);         /* footer social icon hover */
  --wash-on-dark-strong: rgba(255, 255, 255, 0.18);  /* and pressed */

  /* Status — §3.5 */
  --color-warning: #A85C08;   /* darkened p4-orange; 5.0:1 with white */

  /* Photography — §14.2 */
  --color-white: #FFFFFF;
  --color-photo-wash: rgba(39, 5, 61, 0.25);   /* overlay on a video poster */
  --color-photo-tint: rgba(83, 9, 130, 0.28);  /* purple wash, deepest lower right */

  /* The v5 names the ported components read, mapped onto this page's */
  --color-canvas: var(--canvas);
  --color-ink: var(--ink);
  --color-body: var(--body);
  --color-muted: var(--muted);
  --color-hairline: var(--hairline);
  --color-action-primary: var(--action);
  --color-action-primary-hover: var(--action-active);
  --color-focus-ring: var(--action);

  /* The Game cards (experiences-page/v5 offers): the caption scrim, the
     hop's shadow and the placeholder tile's stripes. */
  --color-scrim:                 rgba(39, 5, 61, 0.6);
  --color-scrim-strong:          rgba(39, 5, 61, 0.9);
  --color-hairline-on-band-soft: rgba(247, 242, 253, 0.12);

  /* Type — §4 */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --font-accent: "Space Grotesk", "DM Sans", system-ui, sans-serif;

  --type-h1:      clamp(2rem, 3.5vw, 2.75rem);
  --type-h2:      clamp(1.5rem, 2.5vw, 1.875rem);
  --type-lead:    1.125rem;
  --type-h4:      1.125rem;
  --type-body:    1rem;
  --type-body-sm: 0.875rem;
  --type-label:   0.875rem;
  --type-data-label: 0.875rem;
  --type-eyebrow: 0.6875rem;
  --type-caption: 0.8125rem;

  /* Spacing — §5.1 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-section: 96px;

  /* Shape — §6.1 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* Elevation — §7 */
  --shadow-sm: 0 2px 8px rgba(39, 5, 61, 0.06);
  --shadow-md: 0 8px 24px rgba(39, 5, 61, 0.10);

  /* Motion — §8 */
  --motion-fast: 160ms ease-out;
  --motion-medium: 260ms ease;
  --motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --container: 1200px;
  --layout-container-max: var(--container);
  --header-h: 76px;
}

@media (max-width: 1023px) { :root { --space-section: 64px; } }
@media (max-width: 767px)  { :root { --space-section: 48px; --header-h: 64px; } }