/* ── DESIGN TOKENS ── */
/* Single source of truth for all visual constants */

:root {
  /* ── BACKGROUNDS ── */
  --bg-main: #0F1117;
  --bg-canvas: #161B22;
  --bg-panel: #1E2533;
  --bg-surface: #252D3D;
  --border-subtle: #2E3A4E;

  /* ── TYPOGRAPHY ── */
  --font-display: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-body: 'JetBrains Mono', 'Fira Code', monospace;
  --text-primary: #F0ECE3;
  --text-muted: #7A8C9A;
  --text-accent: #E07B2F;

  /* ── BAR STATE COLORS ── */
  --bar-sorted: #2ECC71;
  --bar-swapping: #E67E22;
  --bar-comparing: #F1C40F;
  --bar-pivot: #E74C3C;
  --bar-active: #3498DB;
  --bar-idle: #4A5568;

  /* ── ACCENTS ── */
  --accent-orange: #E07B2F;
  --accent-teal: #1E4D3A;
  --accent-yellow: #F0C94A;
  --accent-lavender: #6B54C8;
  --accent-orange-glow: rgba(224, 123, 47, 0.25);

  /* ── TRANSITIONS ── */
  --transition-color: 300ms ease-in-out;
  --transition-height: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-ui: 150ms ease;

  /* ── DIMENSIONS ── */
  --bar-canvas-height: 600px;
  --bar-gap: 6px;
  --bar-min-height: 4px;
  --header-height: 60px;
  --legend-height: 48px;
  --btn-height-primary: 48px;
  --btn-height-secondary: 38px;
  --radius-pill: 999px;
  --radius-card: 12px;
  --radius-sm: 6px;

  /* ── SPACING SCALE ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── TYPOGRAPHY SCALE ── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;

  /* ── Z-INDEX ── */
  --z-bar-label: 2;
  --z-tooltip: 10;
  --z-header: 20;

  /* ── SHADOWS ── */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow-orange: 0 0 20px rgba(224, 123, 47, 0.15);
  --shadow-bar: 0 2px 8px rgba(0, 0, 0, 0.3);
}