/* =========================
   THEME VARIABLES
========================= */
:root.theme-default {
  --theme-bg: #111;
  --theme-text: #fff;
  --theme-card-bg: #222;
  --theme-card-border: #333;
  --theme-active-bg: #2e2e2e;
  --theme-active-border: #00ff99;
  --dj-name-color: #fff;
  --dj-name-inactive-color: #fff;
  --time-color: #ccc;
  --dj-genre-color: #fff;
  --dj-genre-bg: transparent;
  --status-on-bg: #00ff99;
  --status-on-text: #000;
  --status-off-bg: #555;
  --status-off-text: #fff;
}

:root.theme-wood {
  --theme-bg: #5E4928;
  --theme-text: #fdf7f7;
  --theme-card-bg: #4a270d;
  --theme-card-border: #3B220F;
  --theme-active-bg: #705b29;
  --theme-active-border: #b17232;
  --dj-name-color: #de8f3f;
  --dj-name-inactive-color: #fdf7f7;
  --time-color: #ccc;
  --dj-genre-color: #fdf7f7;
  --dj-genre-bg: transparent;
  --status-on-bg: #b17232;
  --status-on-text: #fff;
  --status-off-bg: #4a270d;
  --status-off-text: #fff;
}

:root.theme-neon {
  --theme-bg: #13132a;
  --theme-text: #fff;
  --theme-card-bg: #1a1a40;
  --theme-card-border: #333366;
  --theme-active-bg: #330033;
  --theme-active-border: #00ffcc;
  --dj-name-color: #ff00ff;
  --dj-name-inactive-color: #fff;
  --time-color: #ccc;
  --dj-genre-color: #fff;
  --dj-genre-bg: transparent;
  --status-on-bg: #00ffcc;
  --status-on-text: #000;
  --status-off-bg: #1a1a40;
  --status-off-text: #fff;
}

:root.theme-fantasia {
  --theme-bg:#946705;
  --theme-text:#fff;
  --theme-card-bg:#1c1c1c;
  --theme-card-border:#ffb10a;
  --theme-active-bg:#222;
  --theme-active-border:#00ff88;
  --dj-name-color:#ffb10a;
  --dj-name-inactive-color:#ffb10a;
  --time-color:#ccc;
  --dj-genre-color:#fff;
  --dj-genre-bg:transparent;
  --status-on-bg:#00ff88;
  --status-on-text:#000;
  --status-off-bg:#333;
  --status-off-text:#fff;
}

:root.theme-darkGold {
  --theme-bg: #1c1c1c;
  --theme-text: #fff;
  --theme-card-bg: #1c1c1c;
  --theme-card-border: #333;
  --theme-active-bg: #222;
  --theme-active-border: #00ff88;
  --dj-name-color: #FFB90F;
  --dj-name-inactive-color: #FFB90F;
  --time-color: #ccc;
  --dj-genre-color: #FFB90F;
  --dj-genre-bg: transparent;
  --status-on-bg: #00ff88;
  --status-on-text: #000;
  --status-off-bg: #333;
  --status-off-text: #FFF;
}

:root.theme-cabaret {
  --theme-bg: #2b0f14;
  --theme-text: #ffe6e6;
  --theme-card-bg: #3a1419;
  --theme-card-border: #5c1f26;
  --theme-active-bg: #5c1f26;
  --theme-active-border: #ff3366;
  --dj-name-color: #ff99aa;
  --dj-name-inactive-color: #ffe6e6;
  --time-color: #ccc;
  --dj-genre-color: #ffe6e6;
  --dj-genre-bg: transparent;
  --status-on-bg: #ff3366;
  --status-on-text: #fff;
  --status-off-bg: #3a1419;
  --status-off-text: #ffe6e6;
}

:root.theme-silverBlue {
  --theme-bg: #8a8a8a;
  --theme-text: #3e196c;
  --theme-card-bg: #7377f2;
  --theme-card-border: #5c1f26;
  --theme-active-bg: #4607da;
  --theme-active-border: #33ff4b;
  --dj-name-color: #0bf432;
  --dj-name-inactive-color: #ffe6e6;
  --time-color: #ccc;
  --dj-genre-color: #20f410;
  --dj-genre-bg: transparent;
  --status-on-bg: #99ff33;
  --status-on-text: #1f0665;
  --status-off-bg: #9f9d9d;
  --status-off-text: #fff;
}