/* ══════════════════════════════════════════════════════════════════════
   PROGRAM & PRESS GUIDE — CFB27 design system
   Loaded after /css/style.css (and after any page's own <style> block) so
   these tokens win the cascade without needing !important anywhere.
   Most components (cards, tables, badges, buttons, inputs) already consume
   the shared --bg/--surface/--card/--border/--accent/--text variable names,
   so redefining those tokens here reskins them with no HTML changes needed.
   Bespoke hero/masthead sections are restyled directly per-page.
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Spectral'; src: url(/fonts/Spectral-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(/fonts/Spectral-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url(/fonts/Spectral-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* raw palette */
  --paper:      #e8e4d7;
  --paper2:     #dfdac9;
  --paper3:     #d5cfba;
  --ink:        #1c1a17;
  --ink-soft:   #58513f;
  --ink-dim:    #8a8368;
  --rule:       #c3bda5;
  --crimson:    #8a1626;
  --crimson-dim:rgba(138,22,38,.1);
  --teal:       #3c6169;
  --teal-dim:   rgba(60,97,105,.12);
  --loss:       #5b6570;
  --loss-dim:   rgba(91,101,112,.12);

  --font-serif: 'Spectral', Georgia, serif;
  --font-cond:  'Barlow Condensed', -apple-system, sans-serif;

  /* remapped onto the tokens the rest of the app already uses. !important is required here:
     auth.js applies the global settings' accent color via root.style.setProperty(), an INLINE
     style that beats any non-important stylesheet rule regardless of load order. */
  --bg:         var(--paper) !important;
  --surface:    var(--paper2) !important;
  --surface-2:  var(--paper3) !important;
  --card:       var(--paper) !important;
  --border:     var(--rule) !important;
  --accent:     var(--crimson) !important;
  --accent-dim: var(--crimson-dim) !important;
  --accent-secondary: var(--teal) !important;
  --green:      #2f6a3d !important;
  --green-dim:  rgba(47,106,61,.12) !important;
  --red:        var(--loss) !important;
  --red-dim:    var(--loss-dim) !important;
  --orange:     #a05a1f !important;
  --orange-dim: rgba(160,90,31,.12) !important;
  --yellow:     var(--teal) !important;
  --yellow-dim: var(--teal-dim) !important;
  --blue:       var(--teal) !important;
  --blue-dim:   var(--teal-dim) !important;
  --text:       var(--ink) !important;
  --text-muted: var(--ink-soft) !important;
  --text-dim:   var(--ink-dim) !important;
  --r:          4px !important;
}

body {
  font-family: var(--font-cond);
  font-size: 19px;
}

/* Condensed grotesk is the UI workhorse; serif is reserved for names/headlines/editorial moments */
.page-title, .card-title, .section-title, .form-section-title, h1, h2, h3 { font-family: var(--font-cond); }
.font-serif { font-family: var(--font-serif) !important; }

/* ── NAV: dark ink "cover", distinct from the paper interior ─────────── */
.nav, body.hub { background: var(--ink); }
.nav { border-right: 1px solid #000; }
.nav-brand .logo, a.nav-brand .logo { font-family: var(--font-serif); font-weight: 700; color: var(--paper); letter-spacing: 0; text-transform: none; font-size: 21px; }
.nav-brand .sub { color: rgba(232,228,215,.55); }
.nav-links a { color: rgba(232,228,215,.55); font-family: var(--font-cond); font-weight: 600; letter-spacing: .02em; }
.nav-links a:hover { color: var(--paper); }
.nav-links a.active { color: #fff; background: rgba(138,22,38,.35); }
.nav-links a.active::before { background: var(--crimson); }
a.nav-brand:hover { background: rgba(255,255,255,.06); }
.nav-hub-link { color: rgba(232,228,215,.35); border-top-color: rgba(255,255,255,.1); }
.nav-hub-link:hover { color: rgba(232,228,215,.6); }

/* ── Cards read as flat printed panels, not raised UI boxes ──────────── */
.card { border-width: 1px; box-shadow: none; }
.card-title, .form-section-title, .section-title {
  font-weight: 700; letter-spacing: .09em;
}

/* ── Tables: condensed labels, serif for proper names ─────────────────── */
th { font-family: var(--font-cond); font-weight: 600; letter-spacing: .07em; }
td { font-family: var(--font-cond); }
td.font-serif, .stat-editor-table .player-cell, td.player-name-cell { font-family: var(--font-serif); font-weight: 600; }
tbody tr:hover td { background: rgba(28,26,23,.03); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { font-family: var(--font-cond); font-weight: 700; letter-spacing: .03em; border-radius: var(--r); }
.btn-primary { color: #fff; }
.btn-ghost { border-color: var(--rule); }

/* ── Badges: condensed, tracked ───────────────────────────────────────── */
.badge { font-family: var(--font-cond); font-weight: 700; letter-spacing: .04em; border-radius: 3px; }

/* ── Stat boxes ───────────────────────────────────────────────────────── */
.stat-box { border-radius: var(--r); }
.stat-box .label { font-family: var(--font-cond); font-weight: 700; }
.stat-box .val { font-family: var(--font-cond); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tab-btn { font-family: var(--font-cond); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ── Inputs ───────────────────────────────────────────────────────────── */
input, select, textarea { font-family: var(--font-cond); border-radius: var(--r); }
label { font-family: var(--font-cond); font-weight: 700; }

/* ── Scrollbar tuned for the paper ground ─────────────────────────────── */
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

/* ── Mobile nav: put the tab bar at the top instead of the bottom ────── */
@media (max-width: 720px) {
  a.nav-brand {
    display: none;
  }
  .nav {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--rule);
  }
  .main {
    margin-top: 56px;
    margin-bottom: 0;
  }
}