/* ================================================================
   BASE — Custom Properties, Reset, Scrollbar
   ================================================================ */

:root {
  /* ── Palette ── */
  --background:        #0a0e1a;
  --foreground:        #e0f7fa;
  --card:              rgba(10, 30, 50, 0.8);
  --muted-foreground:  #6b8a9a;
  --hud-cyan:          #00e5ff;
  --hud-dark-blue:     #0a1628;
  --hud-green:         #00ff88;

  /* ── Semantic color tokens ── */
  --hud-border:        rgba(0, 229, 255, 0.2);   /* subtle border */
  --hud-border-accent: rgba(0, 229, 255, 0.5);   /* left-accent border */
  --hud-glow:          rgba(0, 229, 255, 0.3);   /* glow / focus border */
  --hud-dim:           rgba(0, 229, 255, 0.08);  /* light hover / tag bg */
  --hud-mid:           rgba(0, 229, 255, 0.1);   /* active bg */
  --hud-bg-block:      rgba(0, 14, 30, 0.55);    /* card block bg */

  /* ── Text tokens ── */
  --text-body:         rgba(224, 247, 250, 0.9);  /* standard body copy */
  --text-muted-soft:   rgba(224, 247, 250, 0.72); /* secondary / legal text */

  /* ── Typography ── */
  --font-display: Orbitron, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  /* ── Motion ── */
  --transition-base: 0.25s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Rajdhani, sans-serif;
}

/* ── Scrollbar ── */
::-webkit-scrollbar             { width: 4px; }
::-webkit-scrollbar-track       { background: var(--hud-dark-blue); }
::-webkit-scrollbar-thumb       { background: var(--hud-cyan); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 10px var(--hud-cyan); }