/* ===================================================================
   tdc-skin.css — the 2026 "clean base + team-tinted accent + depth" skin.
   Loaded AFTER tdc-dense.css / tdc-player-dense.css so its palette wins.
   Rolls out page-by-page: add this <link> to a page to opt it in.
   Nothing structural — only color/surface tokens + a translucent depth
   treatment on the stat panels. Team color still rides --tc for the
   minimal accent slots; grades keep their own tier color.
   =================================================================== */

/* ---- LIGHT base: white / cool-grey ---- */
:root[data-theme="light"], :root:not([data-theme="dark"]){
  --bg:#f6f7f9; --bg2:#ffffff; --bg3:#eef1f6;
  --border:#e6e9ef; --border2:#d7dce4;
  --text:#181b21; --text2:#5c6572; --text3:#98a1ad;
  --accent:#2952e0;
  --green:#12996a; --red:#e0533b;
  /* translucent depth for stat trays + tiles */
  --tray-bg:rgba(255,255,255,.42); --tray-border:rgba(28,40,74,.10); --tray-shadow:rgba(24,32,58,.06);
  --tile-bg:rgba(255,255,255,.74); --tile-border:rgba(28,40,74,.11); --tile-hi:rgba(255,255,255,.85);
  --tile-shadow:0 1px 2px rgba(20,26,40,.04),0 6px 16px rgba(20,26,40,.05);
}

/* ---- DARK base: dark-grey / light-grey / white ---- */
:root[data-theme="dark"]{
  --bg:#1a1c20; --bg2:#24272d; --bg3:#2c3037;
  --border:#33373f; --border2:#45464d;
  --text:#ffffff; --text2:#aeb4bd; --text3:#6c727c;
  --accent:#8fa2ff;
  --green:#3fd39a; --red:#ff6b6b;
  --tray-bg:rgba(255,255,255,.028); --tray-border:rgba(255,255,255,.08); --tray-shadow:rgba(0,0,0,.28);
  --tile-bg:rgba(255,255,255,.05); --tile-border:rgba(255,255,255,.10); --tile-hi:rgba(255,255,255,.06);
  --tile-shadow:0 2px 10px rgba(0,0,0,.26);
}

/* ---- neutralize tdc-dense.css's hardcoded navy field: make the ground theme-aware ---- */
html{ background:var(--bg) !important; }
.tdc-bg{ background:var(--bg) !important; }
.nav-wrap{ background:color-mix(in srgb, var(--bg2) 90%, transparent) !important; border-bottom-color:var(--border) !important; }

/* ---- translucent depth on the stat panels (player overview cards) ---- */
.stat-cards{
  background:var(--tray-bg); border:1px solid var(--tray-border); border-radius:14px;
  padding:9px; box-shadow:inset 0 1px 0 var(--tile-hi), 0 8px 22px var(--tray-shadow);
}
.stat-card{
  background:var(--tile-bg) !important; border:1px solid var(--tile-border) !important; border-radius:10px;
  box-shadow:inset 0 1px 0 var(--tile-hi), var(--tile-shadow);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ===== TEAM PAGE: neutralize tdc-team-dense.css's dark-first panels (they render grey
   and wash out labels in light) → theme-aware, and add the translucent depth on the
   top-stats metrics bar + grade tiles. ===== */
.hero-ribbon{ background:var(--tray-bg) !important; border-top-color:var(--border) !important;
  box-shadow:inset 0 1px 0 var(--tile-hi); }
.hero-grade{ background:var(--tile-bg) !important; border:1px solid var(--tile-border) !important;
  box-shadow:inset 0 1px 0 var(--tile-hi), var(--tile-shadow) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hr-wrap{ background:var(--bg2) !important; }
.hr-table th, .sched-table th, .sortable-table th, .nil-table th{ background:var(--bg3) !important; color:var(--text3) !important; }
.pos-col-head, .side-card-head{ background:var(--bg3) !important; }

/* ===== LIGHT-MODE HERO TINT: very-dark team colors (Gonzaga navy #041e42, etc.) laid
   as a low-alpha wash over white read as muddy grey, not the team's color. Use a
   brightened team variant (--tc-hero-rgb: L lifted to ~60%, saturation floored — set by
   team.html/setColor and player.html/applyTeamTheme) for the light wash so the hue reads.
   Falls back to raw --tc-rgb for greyscale/unknown teams (stays neutral). Dark mode is
   untouched (the raw --tc-rgb wash over the dark ground already reads fine). ===== */
:root[data-theme="light"] .hero-top, :root:not([data-theme="dark"]) .hero-top{
  background:
    radial-gradient(130% 220% at 0% 0%, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.28), transparent 55%),
    linear-gradient(100deg, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.16), var(--bg2) 70%) !important;
}
:root[data-theme="light"] .team-hero, :root:not([data-theme="dark"]) .team-hero{
  background:linear-gradient(145deg, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.15) 0%, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.06) 45%, transparent 100%) !important;
}
:root[data-theme="light"] .player-hero::before, :root:not([data-theme="dark"]) .player-hero::before{
  background:linear-gradient(102deg, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.14) 0%, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.05) 34%, transparent 58%) !important;
}
:root[data-theme="light"] .player-hero::after, :root:not([data-theme="dark"]) .player-hero::after{
  background:radial-gradient(circle, rgba(var(--tc-hero-rgb,var(--tc-rgb)),.18), transparent 66%) !important;
}

/* ===== RANKINGS / HOME (index): tdc-dense.css hardcodes the grid + rail panels dark
   (rgba(16,21,34,…), #0d1220) → grey in light. Make theme-aware; rail panels get depth. ===== */
.table-scroll{ background:var(--bg2) !important; }
.table-header{ background:var(--bg3) !important; }
.rl-card{ background:var(--tile-bg) !important; border:1px solid var(--tile-border) !important;
  box-shadow:inset 0 1px 0 var(--tile-hi), var(--tile-shadow) !important; }