/* =====================================================================
   Athlitz theme — BASE
   Tokens, page grid background, typography, motion curves.
   Old variable names (--pitch, --ink, --seam, --brass...) are kept because
   app.js and inline styles still reference them.
   ===================================================================== */

:root {
  /* surfaces */
  --bg: #F3F2EE;            /* off-white paper */
  --pitch: var(--bg);
  --cream: #F3F2EE;
  --card: #FBFBF8;          /* raised paper */
  --panel: #111111;         /* dark surfaces (scoreboards, KPI tiles) */
  --panel-2: #1C1C1B;

  /* ink */
  --ink: #111111;
  --muted: #6B6B66;
  --line: rgba(17, 17, 17, .14);   /* hairlines */
  --line-strong: #111111;
  --grid: rgba(17, 17, 17, .055);  /* background grid */

  /* accent */
  --lime: #C5E65C;
  --lime-soft: rgba(197, 230, 92, .32);
  --brass: #4F6B0E;         /* lime family, dark enough to read on paper */
  --seam: #D64532;          /* errors / "needs work" */
  --good: #3C8D2F;

  /* type */
  --f-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* layout */
  --cell: 96px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: center top;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--lime); color: var(--ink); }

/* ---------- headings ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; }

h1 {
  font-size: 18px; margin: 0; text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
}
h1 .accent { color: inherit; }

h2 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 80px 0 20px;
  padding: 0;
  border: 0;
  position: relative;
}
h2::before { display: none; }

h3 { letter-spacing: -.02em; }

/* small mono label — the "SCROLL DOWN" / "YEARS OF COACHING" voice */
.mono, .eyebrow, .chip-label, .note.mono {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* lime bullet used before labels */
.dot::before, .sport-tagline::before, .eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); margin-right: 10px; vertical-align: .1em;
  box-shadow: 0 0 0 1px rgba(17,17,17,.08);
}

.note { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
.note a { color: var(--ink); }
.error { color: var(--seam); font-weight: 500; font-size: 14px; margin-top: 12px; }
.hidden { display: none !important; }
#results { display: none; }

/* focus: visible on paper and on dark panels */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--lime); }

@media (max-width: 720px) {
  :root { --cell: 72px; }
  h2 { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
}