/* ============================================================================
   Theme packages for the LoL EHP web app.

   Each theme is just a set of CSS custom properties. style.css only ever
   references the variables below (never a raw hex), so swapping the theme is a
   single attribute change on <html>: data-theme="blue" | "gold".

   Switch it in code with setTheme("gold") from js/theme.js (persists to
   localStorage), or add a new theme by copying one block, renaming the
   [data-theme="..."] selector, and recoloring the variables.

   - "blue" is the default (applies via the bare :root selector too, so the
     page is themed even before theme.js runs — no flash).
   - "gold" is the original LoL legacy-client look (navy + gold + parchment).
   ========================================================================== */

/* ---- shared, theme-independent tokens ---- */
/* (--display / font roles now live in fonts.css, driven by the font pack) */
:root {
  /* blue color pack — always available as a palette reference */
  --color-50:  #E6EEFF;
  --color-100: #B8D1FF;
  --color-200: #8AB3FF;
  --color-300: #5C95FF;
  --color-400: #2E77FF;
  --color-500: #0059FF;
  --color-600: #004EE3;
  --color-700: #0039A3;
  --color-800: #002975;
  --color-900: #001947;
  --color-950: #00091A;
}

/* ===================== Royal (default) — gold + indigo ==================== */
:root,
:root[data-theme="royal"] {
  --chrome:      #080E42;   /* darkest navy — page background */
  --panel-dark:  #10184F;   /* indigo-navy panels (toolbar, graph surround) */
  --slot:        #303882;   /* indigo slot */
  --gold:        #C4B27C;   /* readable gold text (tint of #978545) */
  --gold-bright: #E0D0A0;
  --gold-border: #978545;   /* muted-gold borders */
  --gold-dim:    #423402;   /* dark brown */
  --parchment:   #ECE6D3;
  --field:       #ECE6D3;   /* bright text on dark wells / plot paper */
  --inset:       #978545;   /* buttons (gold) */
  --ink:         #080E42;   /* dark text on gold button */
  --ink-dim:     #423402;
  --band:        #978545;   /* section title band (gold) */
  --band-fg:     #080E42;
  --sband:       #303882;   /* menu indigo */
  --tab-lit:     #3D47A0;   /* active tab (lighter indigo) */
  --row-a:       #0E1550;   /* card / grid rows */
  --row-b:       #141C60;
  --grid-fg:     #C6CAE6;   /* body text on dark rows (periwinkle tint) */
  --entry-dark:  #050826;   /* value wells, bright text */
  --link:        #7880C2;
  --red:         #963c39;
  --dim:         #7880C2;    /* secondary text (periwinkle) */
  --menu-bg:     #10184F;    /* native <select> popup background */
  --menu-fg:     #ECE6D3;
  --menu-fg-dim: #C4B27C;    /* optgroup label */

  /* canvas charts — parchment plot, gold axes, ink marks on indigo surround */
  --chart-surround: #10184F;
  --chart-paper:    #ECE6D3;
  --chart-border:   #978545;
  --chart-axis:     #C4B27C;
  --chart-ink:      #080E42;
  --chart-grid:     rgba(151,133,69,0.30);
}

/* ================================ Blue =================================== */
:root[data-theme="blue"] {
  /* blue + amber: #003E8F #4F3B15 #8F5E01 #14243A #FFD482 #ADD0FF */
  --chrome:      #14243A;   /* window / page background (dark navy) */
  --panel-dark:  #1A2C44;   /* dark panels (toolbar, graph surround) */
  --slot:        #003E8F;   /* inventory-slot blue */
  --gold:        #FFD482;   /* amber accent text on dark */
  --gold-bright: #FFE7B0;
  --gold-border: #8F5E01;   /* dark-gold borders */
  --gold-dim:    #4F3B15;   /* dark brown */
  --parchment:   #FFD482;
  --field:       #FFEBCB;   /* bright cream text on dark wells */
  --inset:       #003E8F;   /* buttons (blue) */
  --ink:         #FFEBCB;   /* cream text on blue button */
  --ink-dim:     #ADD0FF;
  --band:        #8F5E01;   /* section title band (gold) */
  --band-fg:     #FFEBCB;
  --sband:       #003E8F;   /* menu blue */
  --tab-lit:     #0A57C0;   /* active tab (lighter blue) */
  --row-a:       #16283F;   /* card / grid rows */
  --row-b:       #1D3350;
  --grid-fg:     #D6E3F5;   /* body text on dark rows */
  --entry-dark:  #0C1826;   /* value wells, bright text */
  --link:        #ADD0FF;
  --red:         #963c39;
  --dim:         #8FAAD0;    /* secondary text on dark */
  --menu-bg:     #16283F;    /* native <select> popup background */
  --menu-fg:     #FFEBCB;
  --menu-fg-dim: #FFD482;    /* optgroup label */

  /* canvas charts (read by graphs.js) — dark plot, amber axes, light marks */
  --chart-surround: #1A2C44;
  --chart-paper:    #101F31;
  --chart-border:   #8F5E01;
  --chart-axis:     #FFD482;   /* ticks / titles */
  --chart-ink:      #ADD0FF;   /* marks / labels on the plot */
  --chart-grid:     rgba(255,212,130,0.20);
}

/* ================ Garden — forest green + orange & warm gold ============= */
/* palette: #237227 #519A66 #FFAA00 #FFD786 */
:root[data-theme="garden"] {
  --chrome:      #0E1F0D;   /* very dark green — page background */
  --panel-dark:  #1B3A1A;   /* dark green panels (clearly lifted) */
  --slot:        #2E8A32;   /* forest-green slot */
  --gold:        #FFB01A;   /* orange accent text */
  --gold-bright: #FFDE9A;
  --gold-border: #74C186;   /* bright sage-green borders (crisp outlines) */
  --gold-dim:    #33623B;   /* mid sage (subtle rules) */
  --parchment:   #FFD786;
  --field:       #FFE9C2;   /* warm light-gold text on dark wells */
  --inset:       #FFB01A;   /* buttons (orange) */
  --ink:         #0E1F0D;   /* dark green text on orange button */
  --ink-dim:     #33623B;
  --band:        #FFB01A;   /* section title band (orange) */
  --band-fg:     #0E1F0D;
  --sband:       #235726;   /* menu green (inactive tabs) */
  --tab-lit:     #3EA246;   /* active tab (bright green) */
  --row-a:       #224322;   /* card / grid rows (well above chrome) */
  --row-b:       #2C532B;
  --grid-fg:     #E4F2DA;   /* body text on rows */
  --entry-dark:  #0A160A;   /* value wells */
  --link:        #FFB01A;
  --red:         #E8593F;   /* danger / remove */
  --dim:         #9DC0A4;    /* secondary text (muted sage) */
  --menu-bg:     #1B3A1A;    /* native <select> popup background */
  --menu-fg:     #FFE9C2;
  --menu-fg-dim: #FFB01A;    /* optgroup label */

  /* canvas charts — warm-gold plot, sage edge, dark marks */
  --chart-surround: #1B3A1A;
  --chart-paper:    #FFD786;
  --chart-border:   #74C186;
  --chart-axis:     #FFB01A;
  --chart-ink:      #0E1F0D;
  --chart-grid:     rgba(46,138,50,0.32);
}

/* ===================== Sunset — deep blue + red/orange/gold ============== */
/* palette: #003049 #D62828 #F77F00 #FCBF49 */
:root[data-theme="sunset"] {
  --chrome:      #002234;   /* darkest blue — page background */
  --panel-dark:  #003049;   /* deep blue panels */
  --slot:        #0E4A6E;   /* lighter-blue slot */
  --gold:        #FCBF49;   /* warm gold accent text */
  --gold-bright: #FFD673;
  --gold-border: #F77F00;   /* orange borders */
  --gold-dim:    #7A3F00;   /* dark orange */
  --parchment:   #FCBF49;
  --field:       #FFE9C4;   /* cream text on dark wells */
  --inset:       #F77F00;   /* buttons (orange) */
  --ink:         #002234;   /* dark text on orange button */
  --ink-dim:     #7A3F00;
  --band:        #F77F00;   /* section title band (orange) */
  --band-fg:     #002234;
  --sband:       #0E4A6E;   /* menu blue */
  --tab-lit:     #135C86;   /* active tab (lighter blue) */
  --row-a:       #063C57;   /* card / grid rows */
  --row-b:       #0A4463;
  --grid-fg:     #DCE9F0;   /* body text on dark rows */
  --entry-dark:  #001C2B;   /* value wells, bright text */
  --link:        #FCBF49;
  --red:         #D62828;   /* danger / remove */
  --dim:         #8FB3C6;    /* secondary text (muted blue) */
  --menu-bg:     #063C57;    /* native <select> popup background */
  --menu-fg:     #FFE9C4;
  --menu-fg-dim: #FCBF49;    /* optgroup label */

  /* canvas charts (read by graphs.js) — cream plot, orange axes, blue marks */
  --chart-surround: #003049;
  --chart-paper:    #FCEFD5;
  --chart-border:   #F77F00;
  --chart-axis:     #F77F00;   /* ticks / titles */
  --chart-ink:      #003049;   /* marks / labels on the plot */
  --chart-grid:     rgba(247,127,0,0.28);
}

/* ============ Retro Kids — red / yellow / green / black (high pop) ======= */
/* palette: #D90000 #FFEA93 #8DB355 #000000 */
:root[data-theme="retro"] {
  --chrome:      #000000;   /* black — page background */
  --panel-dark:  #0D0D0D;   /* near-black panels */
  --slot:        #D90000;   /* red slot */
  --gold:        #FFEA93;   /* pale-yellow accent text */
  --gold-bright: #FFF3B8;
  --gold-border: #8DB355;   /* green borders */
  --gold-dim:    #3A4A22;   /* dark green */
  --parchment:   #FFEA93;
  --field:       #FFF3C4;   /* bright yellow text on dark wells */
  --inset:       #D90000;   /* buttons (red) */
  --ink:         #000000;   /* black text on red button */
  --ink-dim:     #3A4A22;
  --band:        #D90000;   /* section title band (red) */
  --band-fg:     #FFEA93;
  --sband:       #2A2A2A;   /* menu dark grey */
  --tab-lit:     #8DB355;   /* active tab (green) */
  --row-a:       #0D0D0D;   /* card / grid rows */
  --row-b:       #161616;
  --grid-fg:     #EDE6C2;   /* body text on dark rows */
  --entry-dark:  #000000;   /* value wells, bright text */
  --link:        #8DB355;
  --red:         #D90000;   /* danger / remove */
  --dim:         #9A9A6E;    /* secondary text (muted) */
  --menu-bg:     #0D0D0D;    /* native <select> popup background */
  --menu-fg:     #FFEA93;
  --menu-fg-dim: #8DB355;    /* optgroup label */

  /* canvas charts (read by graphs.js) — pale-yellow plot, green edge, black marks */
  --chart-surround: #0A0A0A;
  --chart-paper:    #FFF0B8;
  --chart-border:   #8DB355;
  --chart-axis:     #8DB355;   /* ticks / titles */
  --chart-ink:      #000000;   /* marks / labels on the plot */
  --chart-grid:     rgba(0,0,0,0.20);
}

/* =========== Scholar — the math page: dark desk, parchment, ink ========== */
/* palette: #16131E desk · #D9CDAD parchment · #1A2238 navy ink · #7A5F17 gold */
:root[data-theme="scholar"] {
  --chrome:      #16131E;   /* dark ink "desk" — page background */
  --panel-dark:  #201B2A;   /* lifted dark panels */
  --slot:        #7A5F17;   /* old-gold slot */
  --gold:        #C9B27A;   /* readable parchment-gold text on dark */
  --gold-bright: #E6DCBE;
  --gold-border: #7A5F17;   /* old-gold borders */
  --gold-dim:    #3A3320;   /* dark gold-brown */
  --parchment:   #D9CDAD;
  --field:       #E6DCBE;   /* parchment text on dark wells / plot paper */
  --inset:       #96781E;   /* buttons (gold) */
  --ink:         #16131E;   /* dark text on gold button */
  --ink-dim:     #3A3320;
  --band:        #96781E;   /* section title band (gold) */
  --band-fg:     #16131E;
  --sband:       #2A2436;   /* menu dark purple */
  --tab-lit:     #3E3552;   /* active tab (lifted purple) */
  --row-a:       #1E1A28;   /* card / grid rows */
  --row-b:       #251F30;
  --grid-fg:     #CFC7B0;   /* parchment-tinted body text on dark rows */
  --entry-dark:  #100D16;   /* value wells */
  --link:        #C9B27A;
  --red:         #8C2F2A;   /* danger / remove (math "bad" red) */
  --dim:         #8A8298;    /* muted purple-grey secondary */
  --menu-bg:     #1E1A28;    /* native <select> popup background */
  --menu-fg:     #E6DCBE;
  --menu-fg-dim: #C9B27A;    /* optgroup label */

  /* canvas charts — dimmed parchment plot with NAVY INK marks, like math.html */
  --chart-surround: #201B2A;
  --chart-paper:    #D9CDAD;
  --chart-border:   #7A5F17;
  --chart-axis:     #96781E;   /* ticks / titles on the dark surround */
  --chart-ink:      #1A2238;   /* navy-ink marks / labels on the parchment */
  --chart-grid:     rgba(122,95,23,0.30);
}

/* ================= Crimson (lava) — charcoal + red/orange/yellow ========= */
/* palette: #df0000 #fd4000 #fdff17 #2c322e #b0bdc3 — glowing lava on ash */
:root[data-theme="crimson"] {
  --chrome:      #1B1F1C;   --panel-dark:  #2C322E;
  --slot:        #B01000;   --gold:        #FD6A20;
  --gold-bright: #FDFF17;   --gold-border: #FD4000;
  --gold-dim:    #3A403C;   --parchment:   #FDFF17;
  --field:       #E6EBEE;   --inset:       #DF0000;
  --ink:         #1B1F1C;   --ink-dim:     #3A403C;
  --band:        #DF0000;   --band-fg:     #FDFF17;
  --sband:       #262B27;   --tab-lit:     #FD4000;
  --row-a:       #242925;   --row-b:       #2C322E;
  --grid-fg:     #CDD6DA;   --entry-dark:  #141715;
  --link:        #FD6A20;   --red:         #DF0000;
  --dim:         #B0BDC3;   --menu-bg:     #242925;
  --menu-fg:     #E6EBEE;   --menu-fg-dim: #FD6A20;
  --chart-surround: #2C322E; --chart-paper: #F2E4C6;
  --chart-border: #FD4000;  --chart-axis:  #DF0000;
  --chart-ink:   #1B1F1C;   --chart-grid:  rgba(253,64,0,0.30);
}

/* ===================== Frost — deep navy + ice blue ===================== */
/* palette: #1c222e #263a50 #376893 #6a99bd #ceeffe */
:root[data-theme="frost"] {
  --chrome:      #161B25;   --panel-dark:  #1C222E;
  --slot:        #376893;   --gold:        #6A99BD;
  --gold-bright: #CEEFFE;   --gold-border: #376893;
  --gold-dim:    #263A50;   --parchment:   #CEEFFE;
  --field:       #E4F4FD;   --inset:       #376893;
  --ink:         #161B25;   --ink-dim:     #263A50;
  --band:        #376893;   --band-fg:     #EAF6FD;
  --sband:       #22303F;   --tab-lit:     #4A80AD;
  --row-a:       #1E2735;   --row-b:       #263A50;
  --grid-fg:     #CFE2EF;   --entry-dark:  #12161F;
  --link:        #6A99BD;   --red:         #D96662;
  --dim:         #6A8299;   --menu-bg:     #1E2735;
  --menu-fg:     #E4F4FD;   --menu-fg-dim: #6A99BD;
  --chart-surround: #1C222E; --chart-paper: #CEEFFE;
  --chart-border: #376893;  --chart-axis:  #376893;
  --chart-ink:   #1C222E;   --chart-grid:  rgba(55,104,147,0.30);
}

/* ================== Amethyst — indigo + violet & periwinkle ============= */
/* palette: #b0bef0 #6564bf #2c2776 #5a3693 #9b96cb */
:root[data-theme="amethyst"] {
  --chrome:      #16143A;   --panel-dark:  #2C2776;
  --slot:        #5A3693;   --gold:        #B0BEF0;
  --gold-bright: #D6DEFA;   --gold-border: #6564BF;
  --gold-dim:    #2C2776;   --parchment:   #B0BEF0;
  --field:       #E8ECFB;   --inset:       #5A3693;
  --ink:         #16143A;   --ink-dim:     #2C2776;
  --band:        #5A3693;   --band-fg:     #E8ECFB;
  --sband:       #221D5A;   --tab-lit:     #6564BF;
  --row-a:       #1F1A52;   --row-b:       #262063;
  --grid-fg:     #CDD3EE;   --entry-dark:  #100E2A;
  --link:        #B0BEF0;   --red:         #E0608A;
  --dim:         #9B96CB;   --menu-bg:     #1F1A52;
  --menu-fg:     #E8ECFB;   --menu-fg-dim: #B0BEF0;
  --chart-surround: #2C2776; --chart-paper: #E2E6F8;
  --chart-border: #6564BF;  --chart-axis:  #6564BF;
  --chart-ink:   #2C2776;   --chart-grid:  rgba(101,100,191,0.32);
}

/* ===================== Solarized (dark) — canonical palette ============== */
/* base03 #002b36 · base02 #073642 · yellow #b58900 · orange #cb4b16 ·
   cyan #2aa198 · blue #268bd2 · cream #fdf6e3 — orange featured on bands+axis */
:root[data-theme="solarized"] {
  --chrome:      #002B36;   --panel-dark:  #073642;
  --slot:        #094C58;   --gold:        #C9932A;
  --gold-bright: #E8B84A;   --gold-border: #2AA198;
  --gold-dim:    #0E4650;   --parchment:   #FDF6E3;
  --field:       #EEE8D5;   --inset:       #268BD2;
  --ink:         #002B36;   --ink-dim:     #586E75;
  --band:        #CB4B16;   --band-fg:     #002B36;
  --sband:       #073642;   --tab-lit:     #2AA198;
  --row-a:       #06333E;   --row-b:       #0A4550;
  --grid-fg:     #93A1A1;   --entry-dark:  #001C24;
  --link:        #268BD2;   --red:         #DC322F;
  --dim:         #586E75;   --menu-bg:     #06333E;
  --menu-fg:     #EEE8D5;   --menu-fg-dim: #C9932A;
  --chart-surround: #073642; --chart-paper: #FDF6E3;
  --chart-border: #CB4B16;  --chart-axis:  #CB4B16;
  --chart-ink:   #073642;   --chart-grid:  rgba(203,75,22,0.24);
}

/* ===================== Hextech (Riot brand: magic + metal) ================ */
/* Brand-guide split: BLUE (Hextech Magic) draws the eye — bands, tabs, links,
   interactive accents. GOLD (Hextech Metal) frames info — borders, values.
   GREY for text/backgrounds. Never pure black or white (guide rule). */
:root[data-theme="hextech"] {
  --chrome:      #091428;   /* blue 6 — page depth */
  --panel-dark:  #0A1428;   /* blue 7 — panels */
  --slot:        #0A323C;   /* blue 5 — inventory-slot teal */
  --gold:        #C8AA6E;   /* gold 2 — metal text/accent */
  --gold-bright: #F0E6D2;   /* gold 1 — bright metal */
  --gold-border: #785A28;   /* gold 4 — frames */
  --gold-dim:    #463714;   /* gold 5 */
  --parchment:   #F0E6D2;
  --field:       #F0E6D2;   /* plot paper */
  --inset:       #0397AB;   /* blue 3 — magic buttons */
  --ink:         #1E2328;   /* grey 2 on parchment (not pure black) */
  --ink-dim:     #5B5A56;   /* grey 1.5 */
  --band:        #0397AB;   /* blue 3 — magic band */
  --band-fg:     #F0E6D2;
  --sband:       #0A323C;   /* blue 5 mini-band */
  --tab-lit:     #0AC8B9;   /* blue 2 — charged magic */
  --row-a:       #0A1B2E;
  --row-b:       #10233A;
  --grid-fg:     #A09B8C;   /* grey 1 — body text on dark */
  --entry-dark:  #010A13;   /* hextech black — value wells */
  --link:        #0AC8B9;
  --red:         #963C39;
  --dim:         #A09B8C;
  --menu-bg:     #F0E6D2;   /* parchment scroll popup */
  --menu-fg:     #1E2328;
  --menu-fg-dim: #785A28;

  /* canvas charts — parchment plot, gold frame, teal accents */
  --chart-surround: #0A1428;
  --chart-paper:    #F0E6D2;
  --chart-border:   #785A28;
  --chart-axis:     #C8AA6E;
  --chart-ink:      #1E2328;
  --chart-grid:     rgba(120,90,40,0.28);
}

/* ===================== Gold (original LoL legacy look) ==================== */
:root[data-theme="gold"] {
  --chrome:      #010a13;   /* window / page background */
  --panel-dark:  #0a1428;   /* dark panels (toolbar, graph surround) */
  --slot:        #0a323c;   /* inventory-slot teal */
  --gold:        #c8aa6e;   /* text/accent on dark */
  --gold-bright: #c89b3c;
  --gold-border: #785a28;
  --gold-dim:    #463714;
  --parchment:   #e8dbc0;
  --field:       #f0e6d2;   /* entry / plot paper */
  --inset:       #d5c4a1;   /* buttons */
  --ink:         #3c2f14;   /* text on parchment */
  --ink-dim:     #7a6a45;
  --band:        #785a28;   /* section title band (brown) */
  --band-fg:     #f0e6d2;
  --sband:       #122c47;   /* blue mini-band */
  --tab-lit:     #1e5079;
  --row-a:       #0a1428;   /* card / grid rows */
  --row-b:       #10203a;
  --grid-fg:     #c6c9d3;   /* body text on dark rows */
  --entry-dark:  #050d18;   /* value wells, white text */
  --link:        #c89b3c;
  --red:         #963c39;
  --dim:         #8a93a8;   /* secondary text on dark */
  --menu-bg:     #f0e6d2;   /* native <select> popup background */
  --menu-fg:     #3c2f14;
  --menu-fg-dim: #7a6a45;   /* optgroup label */

  /* canvas charts (read by graphs.js) — parchment plot, ink marks */
  --chart-surround: #0a1428;
  --chart-paper:    #f0e6d2;
  --chart-border:   #785a28;
  --chart-axis:     #c8aa6e;   /* ticks / titles */
  --chart-ink:      #3c2f14;   /* marks / labels on the plot */
  --chart-grid:     rgba(120,90,40,0.28);
}