/* Mission Control — Design Tokens */
:root {
  /* Background layers */
  --bg-base:        #0a0a0f;
  --bg-surface:     #111118;
  --bg-elevated:    #16161f;
  --bg-overlay:     #1c1c28;
  --bg-hover:       #1f1f2e;

  /* Borders */
  --border:         rgba(255,255,255,0.07);
  --border-strong:  rgba(255,255,255,0.13);

  /* Brand accent */
  --accent:         #6d6aff;
  --accent-soft:    rgba(109,106,255,0.12);
  --accent-glow:    rgba(109,106,255,0.25);

  /* Semantic colors */
  --green:          #22c55e;
  --green-soft:     rgba(34,197,94,0.12);
  --yellow:         #eab308;
  --yellow-soft:    rgba(234,179,8,0.12);
  --red:            #ef4444;
  --red-soft:       rgba(239,68,68,0.12);
  --blue:           #3b82f6;
  --blue-soft:      rgba(59,130,246,0.12);
  --orange:         #f97316;
  --orange-soft:    rgba(249,115,22,0.12);

  /* Text */
  --text-primary:   #f0f0f8;
  --text-secondary: #8b8ba0;
  --text-muted:     #4a4a60;
  --text-accent:    #6d6aff;

  /* Typography */
  --font-base:   'Inter', -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  /* 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;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 24px rgba(109,106,255,0.15);

  /* Sidebar */
  --sidebar-w: 220px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 180ms;
}