/* ==========================================================================
   playbook.cash — theme.css
   Theme tokens, Bootstrap variable overrides, base typography, layout shell.
   Palette: Emerald Modern.
   ========================================================================== */

/* ============ TYPOGRAPHY TOKENS ============
   Theme-independent. --font-ui drives all body/UI text; --font-mono drives
   .mono/.num (stats). Both point at IBM Plex Mono — the app is intentionally
   all-monospace. Defined here once so the face can be swapped in one place. */
:root {
  --font-ui:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============ THEME TOKENS ============ */
:root,
[data-bs-theme="light"] {
  --bg-base:        #FAFAF9;
  --bg-elevated:    #FFFFFF;
  --bg-sunken:      #F4F4F2;
  --bg-inset:       #F4F4F2;
  --border-subtle:  #E5E5E7;
  --border-strong:  #D4D4D8;
  --text-primary:   #0A0A0B;
  --text-muted:     #71717A;
  --text-faint:     #A1A1AA;
  --accent:         #059669;
  --accent-soft:    rgba(5, 150, 105, 0.10);
  --accent-line:    rgba(5, 150, 105, 0.35);
  --active-bg:      rgba(5, 150, 105, 0.07);
  --danger:         #DC2626;
  --row-hover:      rgba(0, 0, 0, 0.025);
  --live-dot:       #DC2626;
  --pregame:        #D97706;
  --hit-color:      #047857;
  --miss-color:     #B91C1C;
  --chip-active-bg: #EDEDEB;
  --tab-badge-bg:   #F4F4F2;
}

[data-bs-theme="dark"] {
  --bg-base:        #0A0A0B;
  --bg-elevated:    #141416;
  --bg-sunken:      #08080A;
  --bg-inset:       #0F0F11;
  --border-subtle:  #27272A;
  --border-strong:  #3F3F46;
  --text-primary:   #E5E5E7;
  --text-muted:     #A1A1AA;
  --text-faint:     #71717A;
  --accent:         #10B981;
  --accent-soft:    rgba(16, 185, 129, 0.14);
  --accent-line:    rgba(16, 185, 129, 0.40);
  --active-bg:      rgba(16, 185, 129, 0.10);
  --danger:         #F87171;
  --row-hover:      rgba(255, 255, 255, 0.035);
  --live-dot:       #F87171;
  --pregame:        #FBBF24;
  --hit-color:      #34D399;
  --miss-color:     #F87171;
  --chip-active-bg: #1F1F23;
  --tab-badge-bg:   #1A1A1D;
}

/* ============ TEAM COLORS ============
   Primary brand color per MLB club, keyed on the DB `abbreviation`
   (sql/002_seed.sql). Theme-independent — brand colors are fixed across
   light/dark. Any element with data-team="XXX" inherits --team-bg/--team-fg as
   CSS vars; each component decides how to spend them (filled chip vs. accent
   bar/dot). Identification only — the abbreviation text is nominative fair use;
   no logos or marks are reproduced. */
[data-team]       { --team-fg: #fff; }
[data-team="ARI"] { --team-bg: #A71930; }
[data-team="ATL"] { --team-bg: #13274F; }
[data-team="BAL"] { --team-bg: #DF4601; }
[data-team="BOS"] { --team-bg: #BD3039; }
[data-team="CHC"] { --team-bg: #0E3386; }
[data-team="CHW"] { --team-bg: #27251F; }
[data-team="CIN"] { --team-bg: #C6011F; }
[data-team="CLE"] { --team-bg: #0C2340; }
[data-team="COL"] { --team-bg: #333366; }
[data-team="DET"] { --team-bg: #0C2340; }
[data-team="HOU"] { --team-bg: #002D62; }
[data-team="KC"]  { --team-bg: #004687; }
[data-team="LAA"] { --team-bg: #BA0021; }
[data-team="LAD"] { --team-bg: #005A9C; }
[data-team="MIA"] { --team-bg: #00A3E0; }
[data-team="MIL"] { --team-bg: #12284B; }
[data-team="MIN"] { --team-bg: #002B5C; }
[data-team="NYM"] { --team-bg: #002D72; }
[data-team="NYY"] { --team-bg: #132448; }
[data-team="PHI"] { --team-bg: #E81828; }
[data-team="PIT"] { --team-bg: #27251F; }
[data-team="SD"]  { --team-bg: #2F241D; }
[data-team="SEA"] { --team-bg: #0C2C56; }
[data-team="SF"]  { --team-bg: #27251F; }
[data-team="STL"] { --team-bg: #C41E3A; }
[data-team="TB"]  { --team-bg: #092C5C; }
[data-team="TEX"] { --team-bg: #003278; }
[data-team="TOR"] { --team-bg: #134A8E; }
[data-team="WSH"] { --team-bg: #AB0003; }
[data-team="ATH"] { --team-bg: #003831; }

/* ============ BOOTSTRAP VARIABLE OVERRIDES ============ */
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-primary: var(--accent);
  --bs-link-color: var(--text-primary);
  --bs-link-hover-color: var(--accent);
}

/* ============ BASE TYPOGRAPHY ============ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-size: 14px;
  letter-spacing: -0.005em;
}

.mono,
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 0;
}

/* ============ GENERIC FOCUS ============ */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: 6px;
}

/* ============ LAYOUT CONTAINER ============ */
.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 767.98px) {
  .page-container { padding: 0 16px; }
}