/* Masix theme packs — White / Red / Black
   Selected via html.theme-white | html.theme-red | html.theme-black
   (applied by /static/js/core/theme.js, persisted in localStorage).
   Each pack overrides the canonical tokens from variables.css, so all
   page styles and theme-keka.css overrides inherit automatically. */

/* ─────────────────────────── WHITE ─────────────────────────── */
html.theme-white {
  --primary-color-text:       #17202B;
  --secondary-color-text:     #45536B;
  --hint-color-text:          #64748B;
  --border-color:             #C8C8C8;
  --background-color-light:   #D8D8D8;
  --primary-background-color: #E2E2E2;
  --secondary-background-color: #EBEBEB;
  --background-color-hover:   #D4D4D4;
  --input-border-color:       #B8B8B8;
  --primary-color:            #C2202B;
  --primary-color-light:      #FCE9EA;
  --gradient-color:           #C2202B;
  --primary-color-RGB:        194, 32, 43;
  --primary-button-bg:        #C2202B;
  --primary-button-hover-bg:  #A31A23;
  --primary-button-text:      #FFFFFF;
  --primary-button-hover-text:#FFFFFF;
  --primary-link-color:       #B41E28;

  --glass:    rgba(226, 226, 226, 0.94);
  --glass-hi: #EBEBEB;
  --t3:       #7A8494;
  --text-3:   #7A8494;

  --green:  #158A4C;
  --red:    #D2232E;
  --yellow: #A16207;
  --orange: #C2410C;
  --teal:   #0F766E;

  --nav-bg:          rgba(226, 226, 226, 0.94);
  --nav-bg-scrolled: rgba(226, 226, 226, 0.98);
  --meta-theme-color: #E2E2E2;

  --selection-bg:   rgba(194, 32, 43, 0.18);
  --selection-text: #17202B;
  --focus-ring:     #C2202B;

  --shadow-glow: 0 0 32px rgba(194, 32, 43, 0.12);
  --shadow-card: 0 8px 32px rgba(15, 23, 42, 0.10);
  --shadow:      0 4px 20px rgba(15, 23, 42, 0.08);

  color-scheme: light;
}

/* ──────────────────────────── RED ──────────────────────────── */
html.theme-red {
  --primary-color-text:       #FFF3F5;
  --secondary-color-text:     #F6CBD2;
  --hint-color-text:          #E3ABB6;
  --border-color:             #571A26;
  --background-color-light:   #250309;
  --primary-background-color: #33060E;
  --secondary-background-color: #470C18;
  --background-color-hover:   #56101E;
  --input-border-color:       #782435;
  --primary-color:            #FF4D6D;
  --primary-color-light:      #4A0E1A;
  --gradient-color:           #FF4D6D;
  --primary-color-RGB:        255, 77, 109;
  --primary-button-bg:        #FF4D6D;
  --primary-button-hover-bg:  #FF7590;
  --primary-button-text:      #33060E;
  --primary-button-hover-text:#33060E;
  --primary-link-color:       #FF8FA3;

  --glass:    rgba(71, 12, 24, 0.92);
  --glass-hi: #470C18;
  --t3:       #B27E89;
  --text-3:   #B27E89;

  --green:  #4ADE80;
  --red:    #FF9B9B;
  --yellow: #FBBF24;
  --orange: #FB923C;
  --teal:   #5EEAD4;

  --nav-bg:          rgba(51, 6, 14, 0.95);
  --nav-bg-scrolled: rgba(51, 6, 14, 0.98);
  --meta-theme-color: #33060E;

  --selection-bg:   rgba(255, 77, 109, 0.35);
  --selection-text: #FFEBEE;
  --focus-ring:     #FF8FA3;

  --shadow-glow: 0 0 32px rgba(255, 77, 109, 0.25);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow:      0 4px 20px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* ─────────────────────────── BLACK ─────────────────────────── */
html.theme-black {
  --primary-color-text:       #F2F2F3;
  --secondary-color-text:     #B4B4BB;
  --hint-color-text:          #8B8B94;
  --border-color:             #26262B;
  --background-color-light:   #0F0F12;
  --primary-background-color: #08080A;
  --secondary-background-color: #16161A;
  --background-color-hover:   #1D1D22;
  --input-border-color:       #35353C;
  --primary-color:            #E5484D;
  --primary-color-light:      #2A1215;
  --gradient-color:           #E5484D;
  --primary-color-RGB:        229, 72, 77;
  --primary-button-bg:        #E5484D;
  --primary-button-hover-bg:  #F2555A;
  --primary-button-text:      #FFFFFF;
  --primary-button-hover-text:#FFFFFF;
  --primary-link-color:       #FF7B7F;

  --glass:    rgba(22, 22, 26, 0.92);
  --glass-hi: #16161A;
  --t3:       #5C5C64;
  --text-3:   #5C5C64;

  --green:  #3DDC97;
  --red:    #F87171;
  --yellow: #FBBF24;
  --orange: #FB923C;
  --teal:   #5EEAD4;

  --nav-bg:          rgba(8, 8, 10, 0.95);
  --nav-bg-scrolled: rgba(8, 8, 10, 0.98);
  --meta-theme-color: #08080A;

  --selection-bg:   rgba(229, 72, 77, 0.35);
  --selection-text: #F2F2F3;
  --focus-ring:     #FF7B7F;

  --shadow-glow: 0 0 32px rgba(229, 72, 77, 0.22);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow:      0 4px 20px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* ── Shared derived aliases (re-point Masix aliases at new tokens) ── */
html.theme-white, html.theme-red, html.theme-black {
  --gold:  var(--primary-link-color);
  --gold2: var(--primary-color);
  --purple: var(--primary-color);
  --cyan:  var(--primary-link-color);
  --cyan2: var(--primary-color);
  --accent:  var(--primary-color);
  --accent2: var(--primary-color);
}

/* ── Surface patches for hardcoded page styles ─────────────────
   These sections carry literal dark hex values in page CSS;
   route them through tokens so every theme renders correctly. */
html.theme-white body, html.theme-red body, html.theme-black body {
  background: var(--primary-background-color);
  color: var(--secondary-color-text);
}

html.theme-white .hp-bar, html.theme-red .hp-bar, html.theme-black .hp-bar,
html.theme-white .mod-check-icon, html.theme-red .mod-check-icon, html.theme-black .mod-check-icon {
  background: var(--primary-background-color) !important;
  border-color: var(--border-color) !important;
}
html.theme-white .hp-act-stream, html.theme-red .hp-act-stream, html.theme-black .hp-act-stream,
html.theme-white .mod-check, html.theme-red .mod-check, html.theme-black .mod-check {
  background: var(--background-color-light) !important;
  border-color: var(--border-color) !important;
}
html.theme-white .adv-section, html.theme-red .adv-section, html.theme-black .adv-section {
  background: var(--secondary-background-color) !important;
  border-top-color: var(--border-color) !important;
}
html.theme-white .quote-section, html.theme-red .quote-section, html.theme-black .quote-section {
  background: var(--secondary-background-color) !important;
}
html.theme-white .role-tab.active, html.theme-red .role-tab.active, html.theme-black .role-tab.active {
  background: var(--primary-color-light) !important;
  color: var(--primary-link-color) !important;
}
html.theme-white .hw-toggle input:checked ~ .hw-thumb,
html.theme-red   .hw-toggle input:checked ~ .hw-thumb,
html.theme-black .hw-toggle input:checked ~ .hw-thumb {
  background: var(--primary-background-color) !important;
}

/* Ambient orbs recolored per theme */
html.theme-white .ambient .orb-1 { background: radial-gradient(circle, rgba(194, 32, 43, 0.10), transparent 70%); }
html.theme-white .ambient .orb-2 { background: radial-gradient(circle, rgba(148, 163, 184, 0.18), transparent 70%); }
html.theme-white .ambient .orb-3 { background: radial-gradient(circle, rgba(194, 32, 43, 0.06), transparent 70%); }
html.theme-white .cursor-glow    { background: radial-gradient(circle, rgba(194, 32, 43, 0.06), transparent 70%); }

html.theme-red .ambient .orb-1 { background: radial-gradient(circle, rgba(255, 77, 109, 0.28), transparent 70%); }
html.theme-red .ambient .orb-2 { background: radial-gradient(circle, rgba(87, 26, 38, 0.65), transparent 70%); }
html.theme-red .ambient .orb-3 { background: radial-gradient(circle, rgba(255, 143, 163, 0.12), transparent 70%); }
html.theme-red .cursor-glow    { background: radial-gradient(circle, rgba(255, 77, 109, 0.10), transparent 70%); }

html.theme-black .ambient .orb-1 { background: radial-gradient(circle, rgba(229, 72, 77, 0.20), transparent 70%); }
html.theme-black .ambient .orb-2 { background: radial-gradient(circle, rgba(38, 38, 43, 0.75), transparent 70%); }
html.theme-black .ambient .orb-3 { background: radial-gradient(circle, rgba(255, 123, 127, 0.10), transparent 70%); }
html.theme-black .cursor-glow    { background: radial-gradient(circle, rgba(229, 72, 77, 0.08), transparent 70%); }

/* White theme: soften heavy dark drop-shadows used across pages */
html.theme-white .auth-card, html.theme-white .quote-card,
html.theme-white .card, html.theme-white .kpi-card {
  box-shadow: var(--shadow-card) !important;
}

/* ── Theme switcher widget ─────────────────────────────────── */
.theme-switcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 99px;
  background: var(--glass);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.theme-switcher-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hint-color-text);
  user-select: none;
}
.theme-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.active {
  border-color: var(--primary-link-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-RGB), 0.25);
}
.theme-dot-white { background: linear-gradient(135deg, #EBEBEB 55%, #E2E2E2 55%); }
.theme-dot-red   { background: linear-gradient(135deg, #FF4D6D 55%, #33060E 55%); }
.theme-dot-black { background: linear-gradient(135deg, #26262B 55%, #08080A 55%); }

@media (max-width: 640px) {
  .theme-switcher { right: 10px; bottom: 10px; padding: 6px 8px; }
  .theme-switcher-label { display: none; }
}