/* ─────────────────────────────────────────────────────────────────────────────
   CommandNexus Design System
   "Where Execution Converges."
   ───────────────────────────────────────────────────────────────────────────── */

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

:root {
  /* Core palette */
  --bg:           #060C14;
  --surface:      #0A1220;
  --surface2:     #0D1828;
  --surface3:     #121F32;
  --border:       #182840;
  --border-bright:#213456;
  --text:         #FFFFFF;
  --text-sec:     #E5E5EA;
  --muted:        #8FAAC8;
  --muted-bright: #B4CCDF;

  /* Brand */
  --blue:    #0057FF;
  --violet:  #6A00FF;
  --magenta: #C400FF;

  /* Gradient system */
  --grad:    linear-gradient(135deg, #0057FF 0%, #6A00FF 50%, #C400FF 100%);
  --grad-h:  linear-gradient(135deg, #2571FF 0%, #7A10FF 50%, #D410FF 100%);
  --grad-90: linear-gradient(90deg,  #0057FF 0%, #6A00FF 50%, #C400FF 100%);

  /* Semantic */
  --success: #3fb950;
  --error:   #f85149;
  --warning: #d29922;

  /* Layout */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --font:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'SF Mono', 'Fira Code', 'Fira Mono', monospace;
}

/* ── Background glow ───────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(0, 87, 255, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(196, 0, 255, 0.07) 0%, transparent 50%);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
}

/* ── Gradient utilities ────────────────────────────────────────────────────── */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.grad-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.grad-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--grad);
  z-index: -1;
}

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #0057FF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }