/* ============================================================================
   PlayVia OS — Theme v3 (UI Redesign Handoff v1)
   Warm-paper light default + real dark mode · navy + gold · Space Grotesk / Inter.

   SCOPED under html[data-pv-theme="v3"] so it is INERT unless that flag is set.
   It's loaded + flag-set ONLY in index.test.html → TEST-only, and completely
   INDEPENDENT of App._redesignOn() (which gates the Runs/Relay platform). To take
   this skin live later: load this file + set data-pv-theme="v3" in index.live.html
   — a single deliberate change that does NOT expose Relay/Runs.

   Strategy: remap the CSS variables the whole app ALREADY consumes (--bg, --primary,
   --card-bg, --text, --gold, --divider, --radius, --font-*, …) to the handoff tokens,
   so every existing component adopts the new look at once — no per-component rewrite.
   Tokens copied verbatim from playvia-platform-system.html.
   ============================================================================ */

/* ─────────────────────────── LIGHT (default) ─────────────────────────── */
html[data-pv-theme="v3"] {
  /* Handoff's own tokens (used by the new component classes below) */
  --bg:#F7F5F0; --surface:#FFFFFF; --surface-2v:#EFEBE2; --border:#E2DCCD;
  --ink:#1B1A17; --ink-dim:#6E6A5F; --ink-faint:#A6A192;
  --navy:#16233A; --navy-2:#0F1A2C;
  --gold:#D4851F; --gold-bright:#EFA23F; --gold-deep:#9C5F12; --gold-tint:rgba(212,133,31,0.12);
  --good:#3E8F5C; --bad:#C0503D;
  --court-line:rgba(212,133,31,0.08);
  --display:'Space Grotesk','Barlow Condensed',sans-serif;
  --body:'Inter','DM Sans',sans-serif;
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --shadow:0 1px 2px rgba(20,18,10,0.04), 0 8px 20px rgba(20,18,10,0.05);

  /* ── Remap the EXISTING app variables → handoff palette (this reskins everything) ── */
  --primary:#16233A; --primary-dark:#0F1A2C; --primary-light:#2A3B57;
  --card-bg:#FFFFFF; --card-bg-hover:#FBF9F4;
  --surface-1:#FFFFFF; --surface-2:#EFEBE2; --surface-sunken:#EFEBE2;
  --text:#1B1A17; --text-primary:#1B1A17; --text-secondary:#6E6A5F; --text-muted:#A6A192;
  --divider:#E2DCCD;
  --success:#3E8F5C; --danger:#C0503D; --warning:#C77D2B; --info:#16233A;
  --radius:12px; --radius-sm:9px; --radius-xs:6px;
  --font-display:'Space Grotesk','Barlow Condensed',sans-serif;
  --font-body:'Inter','DM Sans',sans-serif;
  --shadow-sm:0 1px 2px rgba(20,18,10,0.05);
  --shadow-md:0 1px 2px rgba(20,18,10,0.04), 0 8px 20px rgba(20,18,10,0.05);
  --shadow-lg:0 4px 8px rgba(20,18,10,0.08), 0 18px 40px rgba(20,18,10,0.14);
  --pv-elev-1:var(--shadow-sm); --pv-elev-2:var(--shadow-md); --pv-elev-3:var(--shadow-lg);
  --team-deep:#16233A;
}

/* ─────────────────────────── DARK (opt-in via data-theme) ─────────────── */
html[data-pv-theme="v3"][data-theme="dark"] {
  --bg:#0D1219; --surface:#141B26; --surface-2v:#1A2330; --border:#26303F;
  --ink:#F2F0EA; --ink-dim:#9BA3B0; --ink-faint:#5C6472;
  --navy:#1B2A45; --navy-2:#0F1A2C;
  --gold:#E8A23F; --gold-bright:#F4B85E; --gold-deep:#B4771E; --gold-tint:rgba(232,162,63,0.14);
  --good:#5BB37B; --bad:#D97361;
  --court-line:rgba(232,162,63,0.06);
  --shadow:0 1px 2px rgba(0,0,0,0.2), 0 10px 26px rgba(0,0,0,0.35);

  --primary:#1B2A45; --primary-dark:#0F1A2C; --primary-light:#2A3B57;
  --card-bg:#141B26; --card-bg-hover:#1A2330;
  --surface-1:#141B26; --surface-2:#1A2330; --surface-sunken:#0D1219;
  --text:#F2F0EA; --text-primary:#F2F0EA; --text-secondary:#9BA3B0; --text-muted:#5C6472;
  --divider:#26303F;
  --success:#5BB37B; --danger:#D97361; --warning:#E8A23F; --info:#1B2A45;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 1px 2px rgba(0,0,0,0.2), 0 10px 26px rgba(0,0,0,0.35);
  --shadow-lg:0 6px 14px rgba(0,0,0,0.3), 0 22px 48px rgba(0,0,0,0.45);
  --team-deep:#1B2A45;
}

/* ─────────────────────────── BASE ─────────────────────────── */
html[data-pv-theme="v3"] { background:var(--bg); }
html[data-pv-theme="v3"] body {
  background:var(--bg); color:var(--ink);
  font-family:var(--body);
  transition:background 0.25s var(--ease), color 0.25s var(--ease);
}
/* Neutralize the v1 atmospheric page wash so the warm paper reads clean */
html[data-pv-theme="v3"] body::before { display:none !important; }

/* ─────────────────────────── NEW COMPONENT CLASSES ─────────────────────
   Wired into markup in later batches; harmless (unused) until then. ─────── */

/* Navy page header with subtle court-line grid (replaces plain white <h1>) */
html[data-pv-theme="v3"] .page-head {
  position:relative; padding:20px 24px; border-radius:16px; margin-bottom:22px;
  overflow:hidden; background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#F2F0EA;
}
html[data-pv-theme="v3"] .page-head::before {
  content:''; position:absolute; inset:0; opacity:0.5;
  background-image:
    repeating-linear-gradient(90deg, var(--court-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, var(--court-line) 0 1px, transparent 1px 40px);
}
html[data-pv-theme="v3"] .page-head-inner { position:relative; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
html[data-pv-theme="v3"] .page-head h1 { font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-0.01em; color:#F2F0EA; }
html[data-pv-theme="v3"] .page-head h1 em { font-style:normal; color:var(--gold-bright); }
html[data-pv-theme="v3"] .page-head .sub { font-size:13px; color:rgba(242,240,234,0.65); margin-top:3px; }

/* Division badge — distinguishes the two "FWAB Men's Basketball" leagues */
html[data-pv-theme="v3"] .division-badge {
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px;
  background:var(--gold-tint); color:var(--gold-deep); margin-left:8px; vertical-align:middle;
}
html[data-pv-theme="v3"][data-theme="dark"] .division-badge { color:var(--gold-bright); }

/* Deterministic team color chip */
html[data-pv-theme="v3"] .team-chip {
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:11px; color:#fff; flex-shrink:0;
}

/* Headings pick up the display face inside the v3 skin */
html[data-pv-theme="v3"] h1, html[data-pv-theme="v3"] h2, html[data-pv-theme="v3"] h3 {
  font-family:var(--display);
}

/* ============================================================================
   BATCH 2 — global chrome: navy page headers + gold active-nav (no markup change)
   ============================================================================ */

/* Every page title becomes the navy / court-line header block. This restyles the
   existing `.page-title` h2 in place — no markup edits, so it can't affect logic.
   Paint order inside the stacking context: box bg (navy) → ::before court lines
   (z-index:-1) → the title text → the gold second-word <span>. */
html[data-pv-theme="v3"] .page-title {
  position:relative; z-index:0; overflow:hidden;
  font-family:var(--display); font-weight:700; font-size:26px;
  text-transform:none; letter-spacing:-0.01em;
  color:#F2F0EA;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  padding:20px 24px; border-radius:16px; margin-bottom:22px;
}
html[data-pv-theme="v3"] .page-title::before {
  content:''; position:absolute; inset:0; z-index:-1; opacity:0.5;
  background-image:
    repeating-linear-gradient(90deg, var(--court-line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, var(--court-line) 0 1px, transparent 1px 40px);
}
html[data-pv-theme="v3"] .page-title span { color:var(--gold-bright); }

/* Sidebar active item: gold left-edge bar + gold tint (replaces the navy "blue box"
   background + navy right-border). box-shadow inset = no layout shift. */
html[data-pv-theme="v3"] .side-nav-item.active {
  color:var(--gold-deep); background:var(--gold-tint);
  border-right:none; box-shadow:inset 3px 0 0 var(--gold);
}
html[data-pv-theme="v3"] .side-nav-item:focus,
html[data-pv-theme="v3"] .nav-item:focus { outline:none; }
html[data-pv-theme="v3"] .side-nav-item:focus-visible,
html[data-pv-theme="v3"] .nav-item:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
html[data-pv-theme="v3"][data-theme="dark"] .side-nav-item.active { color:var(--gold-bright); background:var(--gold-tint); }

/* Bottom (mobile) nav active: gold */
html[data-pv-theme="v3"] .nav-item.active { color:var(--gold-deep); }
html[data-pv-theme="v3"] .nav-item.active::before { background:var(--gold); }
html[data-pv-theme="v3"][data-theme="dark"] .nav-item.active { color:var(--gold-bright); }

/* Underline tabs: gold instead of navy */
html[data-pv-theme="v3"] .tab.active { color:var(--gold-deep); border-bottom-color:var(--gold); }
html[data-pv-theme="v3"][data-theme="dark"] .tab.active { color:var(--gold-bright); }

/* SVG sidebar icons (emoji → _navIcon under v3): align icon + label */
html[data-pv-theme="v3"] .side-nav-item { display:flex; align-items:center; gap:11px; }
html[data-pv-theme="v3"] .side-nav-item svg { width:19px; height:19px; flex-shrink:0; }