/* Nova Keyboard Utility - Theme Variables */

:root {
  color-scheme: dark;
  --bg-primary: #0a0a0c;
  --bg-secondary: #111114;
  --bg-tertiary: hsl(240, 8%, 10%);
  --bg-quaternary: #070707;
  --bg-modifier-hover: rgba(50, 50, 56, 0.5);
  /* Default (Nova): neutral desaturated gray (higher opacity to avoid hue bleed) */
  --bg-modifier-selected: rgba(46, 46, 46, 0.4);
  --text-normal: #e4e4e7;
  --text-muted: #71717a;
  /* Nova accent colors */
  --accent: #7C5CFF;
  --accent-hover: #6B4EE0;
  --secondary: #4DA3FF;
  --active: #66E3FF;
  --green: #22c55e;
  --pink: #EF476F;
  --yellow: #FFD166;
  --nova-blue-vibrant: #338AFF;
  --nova-blue-darker: #0051bb;
  --nova-blue-shadow: #0051bb66;
  --key-bg: #1a1a1e;
  --key-bg-hover: #2a2a30;
  --key-bg-pressed: #7C5CFF;
  --key-border: #111114;
  --slider-track: #1a1a1e;
  --slider-thumb: #7C5CFF;
  --radius: 8px;
  --radius-sm: 4px;
  --key-size: 60px;
}

/* Deep Space Nova theme */
[data-theme="deep-space"] {
  --accent: #6B4EFF;
  --accent-hover: #5A3EE0;
  --secondary: #3A6EFF;
  --active: #2ED3C6;
  --key-bg: #1A1D2B;
  --key-bg-hover: #252A3C;
  --key-bg-pressed: #6B4EFF;
  --key-border: #0D1020;
  --slider-track: #1A1D2B;
  --slider-thumb: #6B4EFF;
  --bg-primary: #080A12;
  --bg-secondary: #0D1020;
  --bg-tertiary: #1A1D2B;
  --bg-modifier-hover: rgba(107, 78, 255, 0.15);
}

/* Nova Energy theme */
[data-theme="nova-energy"] {
  --accent: #8B5CFF;
  --accent-hover: #7A4EE0;
  --secondary: #3FA9F5;
  --active: #66E3FF;
  --key-bg: #1A1525;
  --key-bg-hover: #2A2238;
  --key-bg-pressed: #8B5CFF;
  --key-border: #120E1A;
  --slider-track: #1A1525;
  --slider-thumb: #8B5CFF;
  --bg-primary: #0E1020;
  --bg-secondary: #14122A;
  --bg-tertiary: #1A1525;
  --bg-modifier-hover: rgba(139, 92, 255, 0.15);
}

/* Vampire theme - deep blood red */
[data-theme="vampire"] {
  --accent: #dc1414;
  --accent-hover: #ff3333;
  --secondary: #8B0000;
  --active: #860000;
  --green: #22c55e;
  --yellow: #FFB347;
  --key-bg: #240d0d;
  --key-bg-hover: #2a1212;
  --key-bg-pressed: #dc1414;
  --key-border: #0d0505;
  --slider-track: #1a0a0a;
  --slider-thumb: #DC143C;
  --bg-primary: #0a0505;
  --bg-secondary: #0d0707;
  --bg-tertiary: #140909;
  --bg-modifier-hover: rgba(220, 20, 20, 0.2);
  --text-normal: #ffcccc;
  --red: #ff5555;
}

/* Vampire theme toggle styles */
[data-theme="vampire"] .toggle-switch::after {
  background: #2a1212;
}

[data-theme="vampire"] .toggle-switch.active::after {
  background: #2a1212;
}

/* Valorant theme */
[data-theme="valorant"] {
  --accent: #ff5052;
  --accent-hover: #ff6b6e;
  --secondary: #ff5052;
  --active: #ff7577;
  --green: #22c55e;
  --yellow: #FFD166;
  --key-bg: #1a2230;
  --key-bg-hover: #253545;
  --key-bg-pressed: #ff5052;
  --key-border: #0c1824;
  --slider-track: #1a2230;
  --slider-thumb: #ff5052;
  --bg-primary: #0c1824;
  --bg-secondary: #0a131b;
  --bg-tertiary: #1a2230;
  --bg-modifier-hover: rgba(255, 80, 82, 0.15);
}

/* Accent-tinted selected background for non-default themes.
   Default (Nova) stays neutral gray via :root --bg-modifier-selected. */
@supports (color: color-mix(in srgb, #000 0%, #fff)) {
  [data-theme="deep-space"],
  [data-theme="nova-energy"],
  [data-theme="vampire"],
  [data-theme="valorant"] {
    --bg-modifier-selected: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary));
  }
}