/* ═══════════════════════════════════════════
   DESIGN TOKENS — AlgoViz v3.0
   All CSS variables / design system foundation
═══════════════════════════════════════════ */

:root {
  /* ── Background Layers ── */
  --bg-base:     #0a0a0f;
  --bg-surface:  #0f0f1a;
  --bg-panel:    #111120;
  --bg-card:     #181830;
  --bg-hover:    #1d1d38;
  --bg-active:   #242445;
  --bg-input:    #161628;

  /* ── Border ── */
  --border-subtle:  rgba(255,255,255,0.045);
  --border-default: rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --border-accent:  rgba(99,102,241,0.45);

  /* ── Text ── */
  --text-primary:   #f0f0f8;
  --text-secondary: #8888aa;
  --text-muted:     #4d4d66;
  --text-accent:    #818cf8;
  --text-positive:  #34d399;
  --text-warn:      #fbbf24;
  --text-danger:    #f87171;

  /* ── Brand Colors ── */
  --accent-purple:      #6366f1;
  --accent-purple-dim:  rgba(99,102,241,0.18);
  --accent-purple-glow: rgba(99,102,241,0.3);
  --accent-cyan:        #22d3ee;
  --accent-cyan-dim:    rgba(34,211,238,0.15);
  --accent-emerald:     #10b981;
  --accent-amber:       #f59e0b;
  --accent-rose:        #f43f5e;
  --accent-violet:      #a78bfa;

  /* ── Visualization State Colors ── */
  --clr-default:   #252548;
  --clr-comparing: #f59e0b;
  --clr-swap:      #f43f5e;
  --clr-sorted:    #10b981;
  --clr-pivot:     #a78bfa;
  --clr-visiting:  #22d3ee;
  --clr-found:     #10b981;
  --clr-path:      #6366f1;
  --clr-wall:      #0e0e1e;
  --clr-open:      rgba(245,158,11,0.5);
  --clr-closed:    rgba(34,211,238,0.4);
  --clr-start:     #10b981;
  --clr-end:       #f43f5e;
  --clr-merge-l:   #a78bfa;
  --clr-merge-r:   #22d3ee;

  /* ── Typography ── */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px;

  /* ── Radii ── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* ── 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-glow-purple: 0 0 20px rgba(99,102,241,0.2);

  /* ── Layout Dimensions ── */
  --topbar-h:    52px;
  --statusbar-h: 28px;
  --sidebar-w:   240px;
  --panel-w:     276px;
  --controls-h:  64px;

  /* ── Transitions ── */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-slow: 0.35s;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-base:     #f4f4f8;
  --bg-surface:  #ebebf3;
  --bg-panel:    #e8e8f0;
  --bg-card:     #ffffff;
  --bg-hover:    #dddde8;
  --bg-active:   #d4d4e4;
  --bg-input:    #ffffff;

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.1);
  --border-strong:  rgba(0,0,0,0.18);
  --border-accent:  rgba(99,102,241,0.5);

  --text-primary:   #12121e;
  --text-secondary: #555570;
  --text-muted:     #9090b0;
  --text-accent:    #5558e8;

  --clr-default: #d8d8e8;
  --clr-wall:    #c0c0d8;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
}