/* ============================================
   BASE STYLES
   Variables, resets, and foundational elements
   ============================================ */

:root {
  /* Base colors - modeled after .tab design */
  --bg: #060912; /* starry night - dark background */
  --fg: #e6f1ff; /* off-white for text */
  --hud: #8fd3ff; /* light blue/cyan */
  --accent: #27f09c; /* green - primary accent */
  --warning: #ff6b6b; /* red */

  /* New consistent color scheme based on .tab - using HSL for easier reasoning */
  --green-primary: hsl(120, 100%, 20%); /* main green from tab */
  --green-secondary: hsl(120, 100%, 10%); /* secondary green from tab - lighter */
  --green-accent: hsl(120, 100%, 30%); /* border green from tab */
  --green-highlight: hsl(120, 100%, 50%); /* active tab green */
  --green-glow: hsl(120, 100%, 60%); /* glow green from tab */

  --blue-primary: hsl(220, 100%, 20%); /* light blue variant */
  --blue-secondary: hsl(220, 100%, 10%); /* darker blue variant - lighter */
  --blue-accent: hsl(220, 100%, 30%); /* blue border */
  --blue-highlight: hsl(220, 100%, 50%); /* blue highlight */

  --purple-primary: hsl(280, 100%, 20%); /* purple variant */
  --purple-secondary: hsl(280, 100%, 10%); /* darker purple - lighter */
  --purple-accent: hsl(280, 100%, 30%); /* purple border */
  --purple-highlight: hsl(280, 100%, 50%); /* purple highlight */

  --red-primary: hsl(0, 100%, 20%); /* red variant */
  --red-secondary: hsl(0, 100%, 10%); /* darker red - lighter */
  --red-accent: hsl(0, 100%, 30%); /* red border */
  --red-highlight: hsl(0, 100%, 50%); /* red highlight */

  --yellow-primary: hsl(40, 100%, 20%); /* yellow variant */
  --yellow-secondary: hsl(40, 100%, 10%); /* darker yellow - lighter */
  --yellow-accent: hsl(40, 100%, 30%); /* yellow border */
  --yellow-highlight: hsl(40, 100%, 50%); /* yellow highlight */

  --city: #7cffb2; /* keep existing city color */
  --tabW: 56px; /* tab width for blades UI */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Disable text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
  background: radial-gradient(1200px 700px at 50% 0%, #0b1326, var(--bg));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  cursor: crosshair;
}

a {
  color: var(--hud);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
}

canvas {
  image-rendering: pixelated;
}