/* The public site: a full-screen football pitch with the content presented in
   a scrollable window on top of it. Everything is scoped under .pitch-site so
   the authenticated app keeps its own look. */

.pitch-site {
  /* Palette */
  --ps-night: #071a0e;
  --ps-turf: #0c2e19;
  --ps-turf-stripe: #103820;
  --ps-turf-deep: #14401f;
  --ps-line: rgba(255, 255, 255, 0.16);
  --ps-paper: #f5f2ea;
  --ps-paper-raised: #fffdf7;
  --ps-paper-shade: #ede9dd;
  --ps-paper-deep: #e8e4d8;
  --ps-ink: #0e1111;
  --ps-ink-soft: rgba(14, 17, 17, 0.62);
  --ps-red: #e63329;
  --ps-red-deep: #c7281f;
  --ps-yellow: #f5d547;
  --ps-live: #48d07a;
  --ps-cream: #f5f2ea;
  --ps-cream-soft: rgba(245, 242, 234, 0.72);
  --ps-hard-shadow: 4px 4px 0 rgba(14, 17, 17, 0.16);
  --ps-chrome: rgba(10, 28, 16, 0.78);
  --ps-chrome-shadow: 5px 5px 0 rgba(6, 20, 11, 0.7);

  /* Re-wire the shared design tokens to the paper-and-ink look */
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display-tracking: -0.03em;

  --color-canvas: var(--ps-paper);
  --color-surface: var(--ps-paper-raised);
  --color-surface-2: var(--ps-paper-shade);
  --color-shade: var(--ps-paper-shade);
  --color-hover: var(--ps-paper-deep);

  --color-ink: var(--ps-ink);
  --color-ink-darkest: var(--ps-ink);
  --color-ink-darker: #232727;
  --color-ink-dark: #3a3f3f;
  --color-ink-medium: var(--ps-ink-soft);
  --color-ink-light: #d4cfc0;
  --color-ink-lighter: #e0dccd;
  --color-ink-lightest: var(--ps-paper-shade);
  --color-text-body: var(--ps-ink);
  --color-background: var(--ps-paper);

  --color-border-subtle: rgba(14, 17, 17, 0.14);
  --color-border: rgba(14, 17, 17, 0.55);
  --color-border-strong: var(--ps-ink);

  --color-accent: var(--theme-primary);
  --color-accent-rotate: var(--theme-accent);
  --color-primary: var(--theme-primary);
  --color-primary-rotate: var(--theme-accent);
  --color-link: var(--theme-accent);
  --color-negative: var(--ps-red-deep);
  --color-sun: var(--ps-yellow);
  --color-marker: var(--theme-primary);
  --color-highlight: #f7ecc0;

  /* Home/away chart colours (shot map, stat bars, xG race, momentum) follow
     the pitch-layer convention: home red, away ink. */
  --lch-blue-dark: 58% 0.21 28;
  --lch-pink-medium: 28% 0.008 290;

  /* The theme tokens. Everything a customer can recolour reads these and
     nothing else: the accent, the chart series, and the two sides on the
     turf. They sit on .pitch-site so the public site reads the same values,
     at the Playmaker look; only the signed-in app is ever handed a theme. */
  --theme-primary: var(--ps-red);
  --theme-secondary: var(--ps-ink);
  --theme-accent: var(--ps-red-deep);
  --theme-home: var(--ps-red);
  --theme-away: var(--ps-ink);
  --theme-away-turf: var(--ps-cream);
  --theme-series-1: oklch(var(--lch-pink-medium));
  --theme-series-2: oklch(var(--lch-blue-dark));
  --theme-series-3: oklch(var(--lch-yellow-medium));
  --theme-series-4: oklch(var(--lch-green-medium));
  --theme-series-5: oklch(var(--lch-aqua-medium));
  --theme-series-6: oklch(var(--lch-violet-medium));
  --theme-series-7: oklch(var(--lch-purple-medium));
  --theme-series-8: oklch(var(--lch-uncolor-medium));

  --shadow: var(--ps-hard-shadow);
  --border-radius-s: 7px;
  --border-radius-m: 9px;
  --border-radius-l: 12px;

  background: var(--ps-night);
  color: var(--ps-ink);
  font-family: var(--font-sans);
}

/* The stage owns the page height; above it the site itself stops scrolling. */
@media (min-width: 75rem) {
  .pitch-site {
    height: 100dvh;
    overflow: hidden;
  }
}

@keyframes pitch-site-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hockey: the stage becomes an ice rink ---------- */

.pitch-site--hockey {
  --ps-night: #081722;
  --ps-turf-deep: #123043;
  --ps-chrome: rgba(9, 25, 37, 0.78);
  --ps-chrome-shadow: 5px 5px 0 rgba(4, 14, 22, 0.7);
}

@keyframes stage-trusted-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}