/* ══════════════════════════════════════════════════════════════════════════════
   JULIUS TECH — NEXUS CONTROL Design System v3
   Orbitron (brand/titles) · DM Sans (body) · JetBrains Mono (data/code)
══════════════════════════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  --bg:          #0E0E20;
  --surface:     #131328;
  --card:        #1A1A35;
  --card-hover:  #20203F;
  --border:      #2C2C52;
  --border-hi:   rgba(255,69,0,0.40);

  --accent:      #FF4500;
  --accent-d:    #CC3700;
  --accent-l:    rgba(255,69,0,0.11);
  --accent2:     #00D4FF;
  --accent2-l:   rgba(0,212,255,0.09);

  --text:        #EAEDF8;
  --text-muted:  #9096C0;
  --text-dim:    #52527A;

  --ok:      #00E676;
  --warn:    #FFD600;
  --danger:  #FF1744;
  --info:    #00B0FF;
  --purple:  #AA00FF;
  --teal:    #00BFA5;

  --sidebar-w: 244px;
  --topbar-h:  56px;
  --radius:    6px;
  --radius-lg: 10px;

  --font:       'DM Sans', system-ui, sans-serif;
  --font-title: 'Orbitron', sans-serif;
  --font-mono:  'JetBrains Mono', 'Consolas', monospace;

  --shadow:       0 8px 32px rgba(0,0,0,0.50);
  --shadow-glow:  0 0 24px rgba(255,69,0,0.14);
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur:          0.18s;
}

html, body { height: 100%; }

/* ── Global utility ─────────────────────────────────────────────────────── */
.hidden { display: none !important; }

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

/* Atmospheric background layers */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 15% -5%,  rgba(255,69,0,0.055) 0%, transparent 65%),
    radial-gradient(ellipse 65% 45% at 85% 105%, rgba(0,212,255,0.040) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 50% 50%,  rgba(10,10,40,0.4)   0%, transparent 100%);
  pointer-events: none;
}

/* Dot grid */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}