/* =============================================================
   STYLE SKINS  —  visual identity layer (the "design style" axis)
   -------------------------------------------------------------
   Underlying mechanism is still two attributes, same as before:
     data-theme  -> '' / darkmode         (brightness; theme_config.css)
     data-style  -> '' / swiss / obsidian (visual identity)

   The header picker presents these as one flat list — Navy, Dark,
   Swiss, Obsidian — since e.g. "Dark Swiss" never meant anything;
   Navy/Dark just toggle data-theme with data-style cleared, and
   each skin sets data-style and always clears data-theme.

   ADDING A SKIN: a block here (palette) + one entry in
   THEME_OPTIONS in style_controller.js (id/label/heatmap) is the
   whole job. base.html's picker <option>s are generated from
   THEME_OPTIONS at load time, so it never needs touching.

   Each skin overrides the same CSS variables theme_config.css
   defines, so renderers.js (which reads --accent3, --bg, etc. at
   runtime) re-skins itself with zero JS changes.

   Load AFTER style.css in base.html so these win.

   theme_config.css already exposes --radius-card, --radius-btn and
   --font-display tokens. The markup currently hardcodes Tailwind
   rounded-* classes instead, so setting these here only affects
   components already wired to the tokens. Tier 2 = point the
   hardcoded rounded-* classes at --radius-* to finish the job.
   ============================================================= */


/* -------------------------------------------------------------
   OBSIDIAN  —  High-contrast, technical dark mode.
   Built to avoid the mushy slate/blue look of standard templates.
   ------------------------------------------------------------- */
html[data-style="obsidian"] {
    --bg:          #050505;   /* True deep void black */
    --bg-card:     #121212;   /* Elevated matte black for surfaces */
    --bg-card2:    #1A1A1A;   /* Slightly lighter for sticky headers */
    --bg-header:   rgba(5, 5, 5, 0.95);

    --accent1:     #333333;   /* Structural grid lines */
    --accent2:     #A0A0A0;   /* Secondary text/icons */
    --accent3:     #00E5FF;   /* Cyan primary marquee - high contrast data pop */
    --accent4:     #FF2A5F;   /* Crimson for contrasting cap/alerts */
    --accent5:     #B0FF24;   /* Volt green for positive deltas */

    --text-primary:   #F5F5F5;
    --text-secondary: #888888;

    --border: #262626;        /* Hard crisp lines, no soft transparent whites */

    --radius-card: 2px;       /* Sharper, more technical corners */
    --radius-btn:  2px;

    /* Leaning into a data-heavy feel for the numbers */
    --font-body:    'Inter', sans-serif;
    --font-display: 'DM Mono', monospace; 

    --bg-card-rgb:  18, 18, 18;
    --accent1-rgb:  51, 51, 51;
    --accent3-rgb:  0, 229, 255;
    --accent4-rgb:  255, 42, 95;
    --accent5-rgb:  176, 255, 36;
}

/* 
   UI Enhancement: BI Metric Hierarchy
   Proper Business Intelligence dashboards should visually prioritize 
   metrics selected by the user at the top over the standard defaults. 
*/
html[data-style="obsidian"] #player-data-table th.user-selected-metric,
html[data-style="obsidian"] #player-data-table td.user-selected-metric {
    background: rgba(var(--accent3-rgb), 0.08) !important;
    border-top: 2px solid var(--accent3) !important;
    color: #ffffff !important;
}

html[data-style="obsidian"] .theme-select {
    border-radius: 4px;
    border: 1px solid var(--accent1);
}

html[data-style="obsidian"] .heatmap-text {
    /* Ensure legibility against dark cells by removing soft shadows */
    text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
    letter-spacing: -0.02em;
}
/* -------------------------------------------------------------
   SWISS  —  bone + ink, burnt-orange marquee, hard edges
   ------------------------------------------------------------- */
html[data-style="swiss"] {
    --bg:          #EDEAE3;
    --bg-card:     #FBEEE6;
    --bg-card2:    #E4DFD4;
    --bg-header:   rgba(237, 234, 227, 0.94);

    --accent1:     #5A5247;
    --accent2:     #18130C;
    --accent3:     #C0410B;   /* burnt-orange marquee */
    --accent4:     #A6790A;   /* goldenrod, cap value */
    --accent5:     #5B3A5C;   /* ink-violet, wins-over-contract */

    --text-primary:   #18130C;
    --text-secondary: #5A5247;

    --border: #18130C;        /* ink-black rules */

    --radius-card: 0px;
    --radius-btn:  0px;

    --font-body:    'Inter', sans-serif;
    --font-display: 'Inter', sans-serif;

    --bg-card-rgb:  251, 238, 230;
    --accent1-rgb:  90, 82, 71;
    --accent3-rgb:  192, 65, 11;
    --accent4-rgb:  166, 121, 10;
    --accent5-rgb:  91, 58, 92;
}

/* Swiss reads as a firmer data board even at Tier 1: flatten the
   logo mark to ink and thicken the header rule. Scoped tweaks that
   don't depend on de-hardcoding radius elsewhere. */
html[data-style="swiss"] .theme-logo-gradient {
    background: none;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
}
html[data-style="swiss"] .site-header-bg {
    border-bottom-width: 2px;
}


/* -------------------------------------------------------------
   PARQUET  —  red-oak hardwood + aged brass, vintage court signage
   -------------------------------------------------------------
   Not a texture pastiche — no fake wood-grain gradients. Just the
   color story of an old arena floor, rendered as the same flat,
   confident blocks every other skin uses:
     - warm oak page background, a richer honey-oak card surface a
       shade darker (the "alternating panel" idea from the actual
       floor, without literally drawing a checkerboard)
     - aged brass as the marquee accent — the panels were bolted
       together with brass hardware; --accent3 borrows that color
       rather than a generic gold gradient
     - deep hunter green + brick oxblood for accent4/5, the two
       paint colors that show up again and again on old gym floors
       and trim (lane lines, baseline, wall stripes) — used here
       generically, not as a nod to any one franchise's colors
     - dark walnut ink instead of pure black for text

   Display type swaps to Oswald, a real (Google Fonts, OFL) revival
   of "Alternate Gothic" — the condensed gothic sans that's been the
   default American scoreboard/athletic-program face since the early
   1900s. Body copy stays on Inter for legibility in dense tables.
   ------------------------------------------------------------- */
html[data-style="parquet"] {
    --bg:          #EDE0C8;
    --bg-card:     #E2C89C;
    --bg-card2:    #D8B87F;
    --bg-header:   rgba(226, 200, 156, 0.92);

    --accent1:     #6B4A2F;   /* dark walnut, structural */
    --accent2:     #8C6B3F;   /* mid oak-brown, secondary */
    --accent3:     #A6741F;   /* aged brass, marquee */
    --accent4:     #35573C;   /* hunter green, cap value */
    --accent5:     #8B3A2E;   /* brick oxblood, wins-over-contract */

    --text-primary:   #2A1B10;
    --text-secondary: #645032;

    --border: rgba(42, 27, 16, 0.22);

    --radius-card: 6px;
    --radius-btn:  6px;

    --font-body:    'Inter', sans-serif;
    --font-display: 'Oswald', sans-serif;

    --bg-card-rgb:  226, 200, 156;
    --accent1-rgb:  107, 74, 47;
    --accent3-rgb:  166, 116, 31;
    --accent4-rgb:  53, 87, 60;
    --accent5-rgb:  139, 58, 46;
}

/* Signature details, scoped like Swiss/Obsidian's own tweaks:
   a solid brass wordmark in the condensed display face instead of
   the default blue gradient (a gradient reads as "modern app," a
   flat condensed brass lockup reads as varsity signage), and a
   brass strip under the header — a small echo of the hardware that
   held the actual panels together. */
html[data-style="parquet"] .theme-logo-gradient {
    background: none;
    -webkit-text-fill-color: var(--accent3);
    color: var(--accent3);
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
html[data-style="parquet"] .site-header-bg {
    border-bottom: 2px solid var(--accent3);
}
html[data-style="parquet"] .theme-select {
    border-color: var(--accent1);
}


/* .theme-select is a plain JS hook (see style_controller.js) — the
   two <select> elements in base.html are styled via .input-field
   plus their own sizing classes, so there's nothing to add here. */