@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rubik:wght@400;500;700&display=swap');

:root {
  /* Core */
  --bg-deep:        #0a0a1a;
  --bg-surface:     #1a1a2e;
  --bg-elevated:    #2d2d44;

  /* Track */
  --track-asphalt:  #1e1e35;
  --track-border:   #3a3a5c;
  --track-kerb-red: #FF1744;
  --track-kerb-wht: #FFFFFF;
  --track-offroad:  #0d1a0d;

  /* Neon accents */
  --neon-blue:      #00B8FF;
  --neon-green:     #00E676;
  --neon-red:       #FF1744;
  --neon-gold:      #FFD600;
  --neon-purple:    #B388FF;
  --neon-cyan:      #18FFFF;

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #8888AA;
  --text-speed-normal: #FFFFFF;
  --text-speed-fast:   #FFD600;
  --text-speed-max:    #FF1744;

  /* Effects */
  --glow-blue:      0 0 20px rgba(0, 184, 255, 0.5), 0 0 40px rgba(0, 184, 255, 0.2);
  --glow-green:     0 0 20px rgba(0, 230, 118, 0.5), 0 0 40px rgba(0, 230, 118, 0.2);
  --glow-gold:      0 0 20px rgba(255, 214, 0, 0.5), 0 0 40px rgba(255, 214, 0, 0.2);
  --glow-red:       0 0 20px rgba(255, 23, 68, 0.5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  font-family: 'Rubik', sans-serif;
  color: var(--text-primary);
}

canvas {
  display: block;
}