/* ═══════════════════════════════════════════
   ZARABANDA SHIELD — Design System Tokens
   ═══════════════════════════════════════════ */

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

:root {
  /* ── Backgrounds ── */
  --bg:       #020c1b;
  --bg2:      #050f20;
  --bg3:      #0a1628;
  --panel:    rgba(10, 22, 40, 0.85);

  /* ── Brand Colors ── */
  --cyan:     #00d4ff;
  --cyan2:    #00f5c4;
  --blue:     #0066ff;
  --red:      #ff2d55;
  --gold:     #ffd166;

  /* ── Text ── */
  --text:     #cce7f5;
  --muted:    #4a7fa5;
  --white:    #ffffff;

  /* ── Borders ── */
  --border:   rgba(0, 212, 255, 0.15);
  --border2:  rgba(0, 212, 255, 0.35);

  /* ── Effects ── */
  --glow:     0 0 30px rgba(0, 212, 255, 0.2);
  --glow2:    0 0 60px rgba(0, 212, 255, 0.35);

  /* ── Typography ── */
  --font-h:   'Oxanium', sans-serif;
  --font-b:   'DM Sans', sans-serif;
  --font-m:   'JetBrains Mono', monospace;

  /* ── Spacing ── */
  --section-pad: 6rem 2rem;
  --container:   1200px;

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Grid Background ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 102, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Selection ── */
::selection {
  background: rgba(0, 212, 255, 0.3);
  color: var(--white);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}