/* ============================================================================
   PlayVia OS — "Hardwood" Redesign Token Layer
   Loaded AFTER styles.css. Purely additive + overriding via the cascade, so it
   can be removed by deleting its <link> with zero side effects.

   Goals (per S12 handoff §4):
   - Light is the default; dark is an opt-in toggle (data-theme="dark").
   - Flat gray cards -> layered surfaces with real depth + hierarchy.
   - Preserve brand DNA: navy #1B2A4A + gold #D4A843, Barlow Condensed / DM Sans.
   - Keep legacy tokens (--card-bg, --text) working during migration.
   - FIX: dark mode never overrode --text (only --text-primary), so base rules
     using var(--text) rendered near-black on dark. We override --text in dark
     and alias --text-primary <-> --text in both themes.
   ============================================================================ */

/* ─────────────────────────── LIGHT (default) ─────────────────────────── */
:root {
  /* Layered surfaces — page sits behind, cards float above it */
  --bg:             #EEF1F5;   /* page base (cool light gray so white cards pop) */
  --surface-1:      #FFFFFF;   /* primary card surface */
  --surface-2:      #F7F9FC;   /* raised inner panels / table headers */
  --surface-sunken: #E7EBF1;   /* wells / inset fields */
  --card-bg:        var(--surface-1);        /* legacy alias */
  --card-bg-hover:  #F4F6FA;                 /* legacy alias */

  /* Text — alias so base (--text) and dark-era (--text-primary) rules agree */
  --text:           #14181F;
  --text-primary:   var(--text);
  --text-secondary: #4C5564;
  --text-muted:     #828B9A;
  --divider:        #E2E6EC;

  /* Per-team accent — overridable inline (style="--team:#xxxxxx") per team view */
  --team:           var(--gold);
  --team-deep:      var(--primary);

  /* Atmosphere — soft layered page wash (gold whisper top, navy whisper base) */
  --atmosphere:
    radial-gradient(1200px 480px at 50% -8%, rgba(212,168,67,0.10), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(27,42,74,0.07), transparent 55%),
    linear-gradient(180deg, #F3F5F8 0%, #EAEEF4 100%);

  /* Elevation + glow */
  --pv-elev-1: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);
  --pv-elev-2: 0 2px 4px rgba(16,24,40,0.06), 0 6px 16px rgba(16,24,40,0.10);
  --pv-elev-3: 0 4px 8px rgba(16,24,40,0.08), 0 18px 40px rgba(16,24,40,0.16);
  --pv-glow:   0 0 0 1px rgba(212,168,67,0.45), 0 8px 24px rgba(212,168,67,0.28);

  /* Type scale (display = Barlow Condensed, body = DM Sans) */
  --pv-fs-display: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  --pv-fs-title:   clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
  --pv-fs-lead:    1.05rem;
  --pv-fs-body:    0.95rem;
  --pv-fs-meta:    0.78rem;
}

/* ─────────────────────────── DARK (opt-in) ─────────────────────────── */
[data-theme="dark"] {
  --bg:             #0E1524;
  --surface-1:      #16213E;
  --surface-2:      #1B2A4A;
  --surface-sunken: #0B1120;
  --card-bg:        var(--surface-1);
  --card-bg-hover:  #1C2950;

  --text:           #E7E9EE;   /* <-- the fix: base rules read --text */
  --text-primary:   var(--text);
  --text-secondary: #A2A9B8;
  --text-muted:     #7C8597;
  --divider:        #273350;

  --atmosphere:
    radial-gradient(1100px 460px at 50% -10%, rgba(212,168,67,0.10), transparent 60%),
    radial-gradient(900px 640px at 15% 115%, rgba(44,62,107,0.30), transparent 55%),
    linear-gradient(180deg, #0E1524 0%, #0A0F1B 100%);

  --pv-elev-1: 0 1px 2px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.55);
  --pv-elev-2: 0 2px 6px rgba(0,0,0,0.50), 0 8px 20px rgba(0,0,0,0.55);
  --pv-elev-3: 0 6px 14px rgba(0,0,0,0.55), 0 20px 44px rgba(0,0,0,0.65);
  --pv-glow:   0 0 0 1px rgba(212,168,67,0.55), 0 8px 28px rgba(212,168,67,0.30);
}

/* ─────────────────── GLOBAL SURFACE APPLICATION ─────────────────── */
/* Page atmosphere — applied app-wide so the whole shell gains depth. */
body {
  background: var(--atmosphere);
  background-attachment: fixed;
  color: var(--text);
}

/* Cards float above the atmosphere with real elevation. */
.card {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--pv-elev-1);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--pv-elev-2); }

/* Chrome surfaces read as one layer above the page. */
.app-header,
header,
.side-nav,
.bottom-nav {
  background: var(--surface-1);
  border-color: var(--divider);
}

/* Inset form controls sit in a sunken well. */
.form-input,
.form-select,
.form-textarea {
  background: var(--surface-2);
  border-color: var(--divider);
  color: var(--text);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background: var(--surface-1);
  border-color: var(--team-deep);
  box-shadow: 0 0 0 3px rgba(27,42,74,0.10);
}

/* Tables share the layered surfaces. */
.data-table th { background: var(--surface-2); color: var(--text); }
.data-table td { border-color: var(--divider); }

/* ─────────────────────── UTILITY CLASSES ─────────────────────── */
.pv-atmosphere { background: var(--atmosphere); background-attachment: fixed; }

.pv-elev-1 { box-shadow: var(--pv-elev-1); }
.pv-elev-2 { box-shadow: var(--pv-elev-2); }
.pv-elev-3 { box-shadow: var(--pv-elev-3); }

/* Left accent rail — color it per team with style="--team:#xxx" */
.pv-rail {
  position: relative;
  padding-left: 18px;
}
.pv-rail::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--team), var(--team-deep));
}

/* Gold call-to-action button. */
.pv-btn-gold {
  background: linear-gradient(180deg, #E1B954 0%, var(--gold) 60%, #C79A36 100%);
  color: var(--primary-dark);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--pv-elev-1);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pv-btn-gold:hover { box-shadow: var(--pv-glow); transform: translateY(-1px); }
.pv-btn-gold:active { transform: translateY(0); }

/* Orchestrated entrance — opt-in per element/page. */
@keyframes pvRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pv-rise { animation: pvRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pv-rise-2 { animation: pvRise 0.5s cubic-bezier(0.2,0.7,0.2,1) 0.06s both; }
.pv-rise-3 { animation: pvRise 0.5s cubic-bezier(0.2,0.7,0.2,1) 0.12s both; }

@media (prefers-reduced-motion: reduce) {
  .pv-rise, .pv-rise-2, .pv-rise-3 { animation: none; }
  body { background-attachment: scroll; }
}

/* ═══════════════ PAGE: MY TEAM ═══════════════ */
/* Team hero — elevated header card with a per-team accent bar. */
.pv-team-hero {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.pv-team-hero-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--team), var(--team-deep));
}
.pv-team-hero-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.pv-team-hero-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.pv-team-hero-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 3px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════ PAGE: ADMIN DASHBOARD ═══════════════ */
/* Stat tiles float above the page like the rest of the system. */
.admin-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  box-shadow: var(--pv-elev-1);
  transition: box-shadow var(--transition), transform var(--transition);
}
.admin-stat-card:hover { box-shadow: var(--pv-elev-2); transform: translateY(-1px); }

/* Mode segmented control — elevated pill. */
.admin-mode-toggle {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  box-shadow: var(--pv-elev-1);
  overflow: hidden;
}

/* Admin menu cards — depth + a gold accent rail that grows in on hover. */
.more-menu-item {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  box-shadow: var(--pv-elev-1);
  position: relative;
  overflow: hidden;
}
.more-menu-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--team), var(--team-deep));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.more-menu-item:hover::before { transform: scaleY(1); }
.more-menu-item:hover { box-shadow: var(--pv-elev-2); transform: translateY(-1px); }

/* ═══════════════ PAGE: SCHEDULE / COMPONENT: GAME CARD ═══════════════ */
/* Status accent rail for fast scanning. (live keeps its red rail from styles.css.) */
.score-card.scheduled { border-left: 4px solid var(--team); }
.score-card.halftime  { border-left: 4px solid var(--warning); }
.score-card.final     { border-left: 4px solid var(--divider); }
/* Soft status glow on in-progress games so they read as "happening now". */
.score-card.live      { box-shadow: var(--pv-elev-1), 0 0 0 1px rgba(192,57,43,0.20); }
.score-card.halftime  { box-shadow: var(--pv-elev-1), 0 0 0 1px rgba(230,126,34,0.20); }
/* Winners pop in the team accent. */
.score-num.winner { color: var(--team-deep); }