/* theme.css — Design tokens, custom properties, font faces, glow utilities */

@font-face {
  font-family: 'Orbitron';
  src: url('/assets/fonts/Orbitron-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('/assets/fonts/Orbitron-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('/assets/fonts/Orbitron-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Backgrounds */
  --bg-void: #08080F;
  --bg-panel: #0F0F1A;
  --bg-elevated: #16162A;
  --bg-hover: #1C1C36;
  --border-dim: #1F1F38;
  --border-glow: #2F2F58;

  /* Neon accents */
  --neon-cyan: #00F0FF;
  --neon-magenta: #FF00E5;
  --neon-violet: #B026FF;
  --neon-lime: #39FF14;
  --neon-red: #FF0844;
  --neon-amber: #FFB800;

  /* Text */
  --text-primary: #F5F5FF;
  --text-muted: #8888A8;
  --text-dim: #4A4A6A;

  /* Typography */
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Glow utilities */
.neon-text {
  color: var(--neon-cyan);
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px rgba(0, 240, 255, 0.6);
}

.neon-text-magenta {
  color: var(--neon-magenta);
  text-shadow: 0 0 4px var(--neon-magenta), 0 0 12px rgba(255, 0, 229, 0.6);
}

.neon-text-violet {
  color: var(--neon-violet);
  text-shadow: 0 0 4px var(--neon-violet), 0 0 12px rgba(176, 38, 255, 0.6);
}

.neon-text-lime {
  color: var(--neon-lime);
  text-shadow: 0 0 4px var(--neon-lime), 0 0 12px rgba(57, 255, 20, 0.6);
}

.neon-text-amber {
  color: var(--neon-amber);
  text-shadow: 0 0 4px var(--neon-amber), 0 0 12px rgba(255, 184, 0, 0.6);
}

.neon-border {
  border: 1px solid var(--neon-cyan);
  box-shadow: inset 0 0 8px rgba(0, 240, 255, 0.2), 0 0 12px rgba(0, 240, 255, 0.4);
}

.neon-border-magenta {
  border: 1px solid var(--neon-magenta);
  box-shadow: inset 0 0 8px rgba(255, 0, 229, 0.2), 0 0 12px rgba(255, 0, 229, 0.4);
}

/* Dynamic CSS Theme Swaps applied to body */
body.theme-synthwave {
  --bg-void: #0B071A;
  --bg-panel: #130D26;
  --bg-elevated: #1B1236;
  --bg-hover: #261B4D;
  --border-dim: #211642;
  --border-glow: #3E297A;
  --neon-cyan: #FF007F; /* Glowing Synth Pink */
  --neon-magenta: #8A2BE2; /* Violet Glow */
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px rgba(255, 0, 127, 0.4);
}

body.theme-aurora {
  --bg-void: #040907;
  --bg-panel: #09130F;
  --bg-elevated: #102119;
  --bg-hover: #183327;
  --border-dim: #13281E;
  --border-glow: #214735;
  --neon-cyan: #39FF14; /* Radioactive Lime */
  --neon-magenta: #00FF87; /* Neo Teal */
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px rgba(57, 255, 20, 0.4);
}

body.theme-solar {
  --bg-void: #0E0808;
  --bg-panel: #170E0E;
  --bg-elevated: #231616;
  --bg-hover: #311F1F;
  --border-dim: #2A1A1A;
  --border-glow: #4C2F2F;
  --neon-cyan: #FF9F00; /* Amber Flare */
  --neon-magenta: #FF2A2A; /* Solar Crimson */
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px rgba(255, 159, 0, 0.4);
}

body.theme-hyperlight {
  --bg-void: #050811;
  --bg-panel: #0B1124;
  --bg-elevated: #131B39;
  --bg-hover: #1A264F;
  --border-dim: #162042;
  --border-glow: #293B7A;
  --neon-cyan: #00D2FF; /* Ice Blue */
  --neon-magenta: #4F46E5; /* Indigo Bolt */
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 12px rgba(0, 210, 255, 0.4);
}

body.theme-monochrome {
  --bg-void: #0A0A0A;
  --bg-panel: #121212;
  --bg-elevated: #1C1C1C;
  --bg-hover: #262626;
  --border-dim: #222222;
  --border-glow: #3E3E3E;
  --neon-cyan: #FFFFFF; /* High contrast stark white */
  --neon-magenta: #A3A3A3; /* Platinum silver */
  text-shadow: 0 0 4px var(--neon-cyan), 0 0 8px rgba(255, 255, 255, 0.3);
}