/* ═══════════════════════════════════════════════════════════
   V11 PIPELINE — Design System & Theme
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --bg-primary:    #07070e;
  --bg-secondary:  #0a0a18;
  --bg-panel:      #0d0d1c;
  --bg-input:      #0d0d20;
  --bg-hover:      #101030;
  --bg-active:     #10102a;

  /* ── Border ── */
  --border-soft:   #14142a;
  --border-mid:    #1a1a32;
  --border-focus:  #4444aa;

  /* ── Text ── */
  --text-primary:  #d0d0e0;
  --text-secondary:#a0a0b0;
  --text-muted:    #6a6a80;
  --text-dim:      #4a4a68;
  --text-label:    #7a7a90;

  /* ── Accent ── */
  --accent:        #6666cc;
  --accent-dim:    #4444aa;

  /* ── Status ── */
  --green:         #00ee77;
  --green-bg:      #051508;
  --green-border:  #1a4a25;
  --green-text:    #00aa44;
  --red:           #ff5566;
  --red-bg:        #150508;
  --red-border:    #4a1a22;
  --yellow:        #ffcc00;
  --blue:          #2288ff;
  --orange:        #ffaa22;
  --purple:        #9966ff;

  /* ── Spacing ── */
  --sp-xs: 3px;
  --sp-sm: 6px;
  --sp-md: 10px;
  --sp-lg: 14px;

  /* ── Font ── */
  --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  15px;
  --fs-xl:  16px;

  /* ── Radius ── */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* ── Sidebar ── */
  --sidebar-w: 270px;
}

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

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #1a1a30; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a50; }

/* ── Selection ── */
::selection { background: rgba(102,102,204,0.3); }

/* ── Keyframes ── */
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes shake { 0%,100% { transform:translateX(0); } 33% { transform:translateX(-4px); } 66% { transform:translateX(4px); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }