/* =====================================================================
   TallyPuck base styles + Clean theme
   Every page loads this file. Other themes (Classic, Night, Game Day,
   Bold, Retro) will be small files in assets/css/themes/ that only
   change the tokens below. Page structure never changes per theme.
   League colors are set on <html> by JavaScript:
     --primary, --secondary
   ===================================================================== */

:root {
  /* League colors (defaults until a league picks its own) */
  --primary: #101D32;
  --secondary: #F47721;
  --on-primary: #FFFFFF;

  /* Clean theme, light */
  --bg: #F4F6F8;          /* ice white */
  --surface: #FFFFFF;     /* boards */
  --ink: #101D32;
  --ink-muted: #52606D;
  --line: #D3DCE4;
  --link: var(--primary);
  --on-secondary: #101D32;
  --primary-ink: var(--primary-ink-light, var(--primary));   /* league color as text, made readable */
  --focus: #2457A6;
  --danger: #B42318;
  --ok: #1D7A46;
  /* TallyPuck's own colors (league pages use the league's) */
  --brand-navy: #101D32;
  --brand-orange: #F47721;
  --brand-ice: #F4F6F8;

  /* Rink markings, used for illustration only */
  --rink-blue: #2457A6;
  --rink-red: #C62828;

  /* Type */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step--1: 0.875rem;   /* 14 */
  --step-0: 1rem;        /* 16 */
  --step-1: 1.125rem;    /* 18 */
  --step-2: 1.5rem;      /* 24 */
  --step-3: 2.25rem;     /* 36 */
  --step-4: 3rem;        /* 48 */
  --step-5: 4.5rem;      /* 72 */

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* Shape */
  --radius-s: 4px;
  --radius-m: 8px;
  --tap: 44px;           /* smallest touch target */
  --measure: 40rem;      /* comfortable reading width */
  --page: 72rem;
}

/* Color safety: a pale league color is too faint for links on white, so links use ink instead.
   (app.js sets this attribute after checking the league's color.) */
:root[data-pale-primary] { --link: var(--ink); }

/* Every page is light, whatever the phone's own setting: easiest to read at the rink and
   what the league's colors were picked against. data-scheme="dark" on <html> still gives
   the dark look, kept for the Night theme later. */
:root { color-scheme: light; }
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0E1823;
  --surface: #16222F;
  --ink: #E8EEF3;
  --ink-muted: #9AA8B5;
  --line: #2A3A4A;
  --link: color-mix(in oklab, var(--primary) 45%, white);
  --primary-ink: var(--primary-ink-dark, #8DB4F0);
  --focus: #8DB4F0;
  --danger: #F28B82;
  --ok: #7BD3A0;
  --rink-blue: #4C7DD0;
  --rink-red: #E05252;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-weight: 800;
  font-variation-settings: 'wdth' 72;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(var(--step-3), 7vw, var(--step-5)); }
h2 { font-size: clamp(var(--step-2), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: var(--measure); text-wrap: pretty; }
small, .small { font-size: var(--step--1); }
.muted { color: var(--ink-muted); }
.num { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-s); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--s-6); } }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-5);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-muted); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.1); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- forms ---------- */
label { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); outline: none; }
.field .hint { color: var(--ink-muted); font-size: var(--step--1); margin-top: var(--s-1); }
.field .error { color: var(--danger); font-size: var(--step--1); margin-top: var(--s-1); }

/* ---------- stat tables ---------- */
.stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats th, .stats td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: right; }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats th { font-size: var(--step--1); color: var(--ink-muted); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ---------- sponsor logos always sit on white so any logo reads ---------- */
.sponsor-tile {
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--s-3);
}
.sponsor-tile img { max-height: 64px; width: auto; object-fit: contain; }

/* ---------- utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- a league as a card, in its own colors (front page and account) ---------- */
.league-tiles { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .league-tiles.two { grid-template-columns: 1fr 1fr; } }
.league-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 24px rgba(16, 24, 32, 0.06); }
.league-tile .lt-strip { height: 6px; background: linear-gradient(90deg, var(--lt-primary) 0 70%, var(--lt-secondary) 70% 100%); }
.league-tile .lt-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.lt-head { display: flex; align-items: center; gap: var(--s-4); }
.lt-head > div { min-width: 0; }
.lt-logo { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); padding: 4px; }
.lt-initials { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--lt-primary); color: var(--lt-on-primary);
  font-weight: 900; font-size: var(--step-1); font-variation-settings: 'wdth' 75; }
.lt-name { display: block; font-size: var(--step-1); font-weight: 800; line-height: 1.2; color: var(--lt-ink); overflow-wrap: anywhere; }
.lt-role { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lt-role span { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-muted); background: var(--bg); }
.lt-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.lt-acts .btn { min-height: 40px; padding: var(--s-1) var(--s-4); }
.lt-acts .btn.lt-main { background: var(--lt-primary); border-color: var(--lt-primary); color: var(--lt-on-primary); }
.lt-acts .btn.lt-main:hover { filter: brightness(1.1); }

/* The wordmark: Tally in ink, Puck in orange */
.wm-o { color: var(--brand-orange); font-weight: inherit; }