styles/theme.css

/* Military/Tech Tactical Theme Tokens */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Roboto+Mono:wght@400;700&family=Inter:wght@400;600&display=swap');

:root {
  /* Palette */
  --bg-0: #0c0f10;           /* canvas background */
  --bg-1: #111517;           /* base panel */
  --bg-2: #151b1e;           /* elevated panel */
  --bg-3: #0b1114;           /* deep panel */
  --panel-border: #243039;
  --panel-glow: #0aa39b33;

  /* Accents */
  --accent: #0aa39b;         /* teal accent */
  --accent-600: #08877f;
  --accent-700: #066d67;
  --accent-300: #3bc6bf;
  --accent-200: #69ddd7;

  /* Status */
  --ok: #12b886;
  --warn: #f59e0b;
  --danger: #ef4444;

  /* Text */
  --text-1: #e6edf3;
  --text-2: #b6c2cc;
  --text-3: #8a99a7;

  /* Grid / Texture */
  --grid-line: #1a2228;
  --scanline: #0e1417;

  /* Shadows */
  --shadow-1: 0 6px 18px rgba(0,0,0,.35);
  --shadow-2: 0 10px 24px rgba(0,0,0,.4);
  --inset-1: inset 0 0 0 1px var(--panel-border);
  --glow-1: 0 0 0 2px var(--panel-glow);

  /* Radii */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 16px;
  --s-7: 20px;

  /* Typography */
  --font-display: "Rajdhani", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-10: 10px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;

  /* Transitions */
  --t-fast: 120ms ease-out;
  --t-med: 180ms ease-out;
  --t-slow: 260ms cubic-bezier(.22,1,.36,1);
}

/* Global baseline */
html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
}

.game-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--scanline) 1px, transparent 1px) 0 0 / 100% 3px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 100%,
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 24px;
  opacity: .25;
  z-index: 0;
}

/* Utility */
.u-flex { display: flex; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-gap-2 { gap: var(--s-3); }
.u-gap-3 { gap: var(--s-4); }
.u-muted { color: var(--text-3); }

.hidden { display: none !important; }