/* Pitch theme tokens shared by the website and the app. Base component styles live in app.css/site.css;
   the Pitch look overrides them here and in site-pitch.css / app-pitch.css. */

[data-theme="pitch"] {
  --grass: #1f7a3d;
  --grass-2: #24884a;
  --grass-deep: #0f4d25;
  --chalk: #f7f7f2;
  --card-yellow: #ffd400;
  --card-red: #e63b2e;
  --led: #ffb300;
  --navy: #0e1b2c;
  --bg: #1b6e37;
  --bg-2: #f3f1e8;
  --card: #fbfaf5;
  --card-2: #ecead9;
  --text: #13261a;
  --muted: #5b6b60;
  --line: #dcd9cc;
  --pop: 0 6px 0 rgba(0, 0, 0, .18);
  --pop-lg: 0 10px 0 rgba(0, 0, 0, .2);
  --border: 2px solid #13261a;
  --score: "Teko", "Barlow Condensed", "Arial Narrow", sans-serif;
  --kit: "Teko", Impact, "Arial Black", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}

/* Mowed-lawn stripes + chalk, reused by both surfaces. */
[data-theme="pitch"] body {
  background-color: var(--grass);
  background-image: repeating-linear-gradient(180deg, var(--grass) 0 64px, var(--grass-2) 64px 128px);
}

.pitch-lines { display: none; }

/* Chalk pitch markings (website hero + app login hero). Centre circle sits on the logo. */
[data-theme="pitch"] .pitch-lines {
  --pc-x: 50%; --pc-y: 42%; --pc-r: min(26vw, 230px); --chalk-w: 3px;
  display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
[data-theme="pitch"] .pitch-lines i { position: absolute; display: block; border: var(--chalk-w) solid rgba(255, 255, 255, .75); }
[data-theme="pitch"] .pl-half { left: var(--pc-x); top: -10px; bottom: -10px; width: 0; border-width: 0 0 0 var(--chalk-w) !important; }
[data-theme="pitch"] .pl-circle { left: var(--pc-x); top: var(--pc-y); width: calc(var(--pc-r) * 2); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
[data-theme="pitch"] .pl-spot { left: var(--pc-x); top: var(--pc-y); width: 12px; height: 12px; border-radius: 50%; translate: -50% -50%; background: rgba(255, 255, 255, .8); border: 0 !important; }
[data-theme="pitch"] .pl-box, [data-theme="pitch"] .pl-six, [data-theme="pitch"] .pl-arc { opacity: .55; }
[data-theme="pitch"] .pl-box { left: calc(var(--chalk-w) * -1); top: 50%; translate: 0 -50%; width: 15%; min-width: 90px; height: 58%; }
[data-theme="pitch"] .pl-six { left: calc(var(--chalk-w) * -1); top: 50%; translate: 0 -50%; width: 6%; min-width: 36px; height: 26%; }
[data-theme="pitch"] .pl-arc { left: max(15%, 90px); top: 50%; translate: -50% -50%; width: 12%; min-width: 72px; aspect-ratio: 1; border-radius: 50%; clip-path: inset(0 0 0 50%); }