/* =========================================================
   LEGENDS PANEL THEME — override for SVPanel (real Zem/SPRUKO variables)
   Include this AFTER Zem's compiled style.css, right before </head>:
   <link rel="stylesheet" href="/legends-panel-theme.css">

   How this works: Zem builds almost every color (buttons, badges,
   cards, sidebar, links, borders, charts) from a handful of root
   CSS variables via rgba(var(--x-rgb), opacity). Overriding those
   few variables re-colors the whole panel without touching markup.
   Re-declared under every [data-theme-color] mode (default/dark/
   light/glassy) so the "Dark Theme / Light Theme" toggle in the
   panel doesn't revert to Zem's stock colors.
   ========================================================= */

@font-face{font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(https://fonts.gstatic.com/s/orbitron/v35/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/rajdhani/v17/LDIxapCSOBg7S-QT7p4HM-Y.woff2) format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/rajdhani/v17/LDI2apCSOBg7S-QT7pbYF_Oreec.woff2) format('woff2');}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/rajdhani/v17/LDI2apCSOBg7S-QT7pa8FvOreec.woff2) format('woff2');}

/* ---------- core palette (this is 90% of the reskin) ---------- */
:root,
[data-theme-color=default],
[data-theme-color=dark],
[data-theme-color=light],
[data-theme-color=glassy]{
  --primary-rgb:      0, 191, 255;   /* #00bfff — LEGENDS blue accent  */
  --secondary-rgb:  255, 33, 79;     /* #ff214f — LEGENDS red accent   */
  --background-rgb:   2, 4, 7;       /* #020407 — page/surface base    */
  --dark-theme:  #070d13;            /* dropdown/modal/sidebar fill    */
  --dark-body:   #05080d;
  --dark:        #070d13;
  --muted:       #7e93a3;
  --color:       #cfe3ee;
  --color2:      rgba(238,246,251,.85);
  --border:      rgba(0,191,255,.14);
}

/* dark-mode toggle sets its own --background-rgb on these two elements
   specifically (more specific than :root) — pin them too */
[data-theme-color=dark] .app-sidebar,
[data-theme-color=dark] .main-header{
  --background-rgb: 2, 4, 7;
}

/* light-mode toggle inverts to a pale palette — keep it dark instead */
[data-theme-color=light]{
  --main-gradient-bg: radial-gradient(circle, rgb(var(--background-rgb)) 0%, #05080d, #05080d 100%);
  --color: #cfe3ee;
  --color2: rgba(238,246,251,.85);
}
[data-theme-color=light] body{ color: var(--color); }

/* ---------- typography ---------- */
html, body{ font-family:'Rajdhani', sans-serif !important; }
h1,h2,h3,h4,h5,h6,
.card-title,.app-title,.main-content-title,
.main-signin-header h2,.main-signup-header h2,
.side-menu__label1,.navbar-brand,.main-logo1{
  font-family:'Orbitron', sans-serif !important;
  letter-spacing:.5px;
}

/* ---------- misc accents Zem hardcodes outside the rgb() chain ---------- */
.side-menu__icon{ filter:none; }
a{ color:var(--primary-bg-color); }
::-webkit-scrollbar-thumb{ background:rgba(0,191,255,.35); }