/* Web fonts loaded via <link> in base.njk for non-blocking parallel fetch.
   Don't add @import here - it serializes the font request behind this CSS. */

:root {
  --teal: #00c8b4;
  --teal-bright: #51e9b6;
  --teal-dim: rgba(0,200,180,0.1);
  --teal-glow: 0 0 20px rgba(0,200,180,0.25);
  --emerald: #0fbe7e;
  --emerald-dark: #0d6e4e;
  --emerald-dim: rgba(15,190,126,0.12);
  --amber: #e8a020;
  --amber-dim: rgba(232,160,32,0.12);
  --red: #e84040;
  --bg: #040a06;
  --bg-panel: rgba(5,14,9,0.94);
  --border: rgba(0,200,180,0.12);
  --border-bright: rgba(0,200,180,0.4);
  --text: #b8d4cc;
  --text-bright: #e6edf3;
  --text-muted: #4a7a6a;
  --font-hud: 'Orbitron', monospace;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius: 4px;
  --radius-lg: 8px;
  --nav-height: 64px;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SCANLINES ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.025) 2px, rgba(0,0,0,0.025) 4px
  );
}

img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--text-bright); }

h1, h2, h3, h4 {
  font-family: var(--font-hud);
  color: var(--text-bright);
  line-height: 1.2;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,200,180,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,200,180,0.45); }

/* ── UTILITY ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}