/* Fonts are loaded via <link> in HTML for performance – not @import here */

:root {
  /* ── Backgrounds ── */
  --bg-base:        #020609;
  --bg-surface:     #050d15;
  --bg-surface-2:   #091420;
  --bg-surface-3:   #0d1c2c;
  --bg-glass:       rgba(0,245,212,0.03);
  --bg-glass-hover: rgba(0,245,212,0.06);

  /* ── Borders ── */
  --border:         rgba(0,245,212,0.09);
  --border-strong:  rgba(0,245,212,0.18);
  --border-accent:  rgba(0,245,212,0.45);

  /* ── Accents ── */
  --accent:         #00f5d4;
  --accent-dark:    #00c8ae;
  --accent-dim:     rgba(0,245,212,0.07);
  --accent-glow:    rgba(0,245,212,0.3);
  --accent-blue:    #0088ff;
  --accent-purple:  #9b59ff;
  --accent-cyan:    #00d4ff;

  /* ── Gradients ── */
  --grad-accent:   linear-gradient(135deg, #00f5d4 0%, #0088ff 100%);
  --grad-hero:     radial-gradient(ellipse 100% 80% at 50% -10%, rgba(0,245,212,0.18) 0%, rgba(0,136,255,0.1) 40%, transparent 72%);
  --grad-surface:  linear-gradient(180deg, #050d15 0%, #020609 100%);

  /* ── Text ── */
  --text:          #b4cce0;
  --text-muted:    #3a5268;
  --text-subtle:   #1c2e3e;
  --text-on-accent:#000000;

  /* ── Status ── */
  --success:       #00f5d4;
  --warning:       #ffb700;
  --danger:        #ff1f4b;
  --info:          #0088ff;

  /* ── Typography ── */
  --font-sans:  'Space Grotesk', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius — hard edges ── */
  --radius-sm:   1px;
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-xl:   2px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.9);
  --shadow-md:     0 4px 24px rgba(0,0,0,0.9);
  --shadow-lg:     0 8px 48px rgba(0,0,0,0.95);
  --shadow-accent: 0 0 24px rgba(0,245,212,0.22), 0 0 64px rgba(0,245,212,0.07);
  --shadow-blue:   0 0 24px rgba(0,136,255,0.22);

  /* ── Transitions ── */
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --dur-fast:  100ms;
  --dur-base:  180ms;
  --dur-slow:  300ms;

  /* ── Layout ── */
  --sidebar-w: 220px;
  --topbar-h:  56px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(circle, rgba(0,245,212,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ─── Scanline utility ─── */
.scan-bg {
  position: relative;
}
.scan-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}