:root {
  /* ===== SHARED VARIABLES (Layout, Typography, Effects) ===== */

  /* ===== TYPOGRAPHY ===== */
  --font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs: 0.65rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 0.95rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.15rem;
  --font-size-3xl: 1.3rem;
  --font-size-4xl: 1.5rem;
  --font-size-5xl: 1.75rem;
  --font-size-6xl: 2rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* ===== BREAKPOINTS (for reference; use in @media) ===== */
  --bp-mobile: 360px;
  --bp-sm: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* ===== SPACING ===== */
  --touch-target: 44px;
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 72px;

  /* ===== ICON SIZES ===== */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;
  --icon-2xl: 24px;

  /* ===== BORDER RADIUS ===== */
  --radius-2: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 999px;
  --radius-circle: 50%;

  /* ===== TRANSITIONS (Smooth, satisfying easing) ===== */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: var(--ease-in-out);
  --ease-extra-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.3s var(--ease-in-out);
  --transition-normal: 0.35s var(--ease-out);
  --transition-slow: 0.45s var(--ease-in-out);
  --transition-bounce: 0.5s var(--ease-spring);

  /* Sidebar rail (Idea/Track): one source of truth for width + timing */
  --sidebar-width-collapsed: 56px;
  --sidebar-width-expanded: 250px;
  --sidebar-duration: 0.32s;
  --sidebar-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Button hover/active (animations.css): one transition for hover and release */
  --button-hover-lift: -3px;
  --button-hover-scale: 1.05;
  /* Increased slightly for 0.25s duration visibility */
  --button-active-lift: -2px;
  --button-active-scale: 0.98;
  --button-enter: 0.25s cubic-bezier(0.4, 0, 1, 1);
  /* Ease-in */
  --button-exit: 0.25s cubic-bezier(0.0, 0, 0.2, 1);
  /* Ease-out */
  --button-transition: var(--button-exit);
  /* Default to exit for unhover */

  /* ===== SIDEBAR ===== */
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 56px;

  /* ===== SECTION LABELS ===== */
  --label-uppercase-size: 0.625rem;
  --label-letter-spacing: 0.07em;
  --label-font-weight: 600;

  /* ===== TRACK MODE SEMANTIC TOKENS ===== */
  /* Live data indicator */
  --color-live-dot: #22c55e;
  --color-live-dot-subtle: rgba(34, 197, 94, 0.15);
  /* Metric deltas */
  --color-metric-up: #22c55e;
  --color-metric-up-subtle: rgba(34, 197, 94, 0.12);
  --color-metric-down: #ef4444;
  --color-metric-down-subtle: rgba(239, 68, 68, 0.12);
  --color-metric-neutral: #a0a0a0;
  --color-metric-warning: #f59e0b;
  --color-metric-warning-subtle: rgba(245, 158, 11, 0.12);
  /* Video status */
  --color-status-strong: #22c55e;
  --color-status-strong-subtle: rgba(34, 197, 94, 0.12);
  --color-status-slowing: #f59e0b;
  --color-status-slowing-subtle: rgba(245, 158, 11, 0.12);
  --color-status-critical: #ef4444;
  --color-status-critical-subtle: rgba(239, 68, 68, 0.12);
  --color-status-stable: #a0a0a0;
  --color-status-stable-subtle: rgba(160, 160, 160, 0.1);
  /* Track data freshness */
  --color-stale: #6b7280;

  /* ===== Z-INDEX LAYERS ===== */
  --z-base: 1;
  --z-card-badge: 10;
  --z-dropdown: 100;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1001;
  --z-fixed-below-modal: 998;
  --z-notification: 10000;

  /* ===== DEFAULT THEME (Dark) ===== */
  --track-vph-bar: #3b82f6;
  --track-vph-bar-fill: rgba(59, 130, 246, 0.88);
  --track-vph-bar-zero: rgba(148, 163, 184, 0.55);

  --color-primary: #2383e2;
  --color-primary-light: #4a9eff;
  --color-primary-lighter: #6bb0ff;
  --color-primary-dark: #1a6fc7;
  --color-primary-hover: #3d94e8;
  --color-primary-subtle: rgba(35, 131, 226, 0.12);
  --color-primary-subtle-hover: rgba(35, 131, 226, 0.18);
  --color-primary-glow-sm: rgba(35, 131, 226, 0.2);
  --color-primary-glow-md: rgba(35, 131, 226, 0.3);
  --color-primary-glow-lg: rgba(35, 131, 226, 0.4);
  --color-primary-alpha-05: rgba(35, 131, 226, 0.05);
  --color-primary-alpha-10: rgba(35, 131, 226, 0.1);
  --color-primary-alpha-15: rgba(35, 131, 226, 0.15);
  --color-secondary: #9b59b6;
  --color-secondary-light: #b370d0;
  --color-secondary-dark: #7d3fa0;
  --color-secondary-subtle: rgba(155, 89, 182, 0.12);
  --color-accent-orange: #f39c12;
  --color-accent-orange-light: #f5b041;
  --color-accent-orange-dark: #d68910;
  --color-accent-orange-subtle: rgba(243, 156, 18, 0.12);
  --color-accent-green: #27ae60;
  --color-accent-green-light: #2ecc71;
  --color-accent-green-dark: #229954;
  --color-accent-green-subtle: rgba(39, 174, 96, 0.12);
  --color-accent-red: #e74c3c;
  --color-accent-red-light: #ec7063;
  --color-accent-red-dark: #c0392b;
  --color-accent-red-subtle: rgba(231, 76, 60, 0.12);
  --color-danger: #e74c3c;
  --color-accent-yellow: #f1c40f;
  --color-accent-yellow-light: #f4d03f;
  --color-accent-yellow-subtle: rgba(241, 196, 15, 0.15);
  --color-text-primary: #e8e8e8;
  --color-text-secondary: #a8a8a6;
  --color-text-tertiary: #7a7a78;
  --color-text-muted: #888884;
  --color-text-light: #ffffff;
  --color-text-on-dark: #ffffff;
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #1f1f1f;
  --bg-hover: #242424;
  --bg-selected: #2c2c2c;
  --bg-elevated: #1e1e1e;
  --bg-overlay: rgba(17, 17, 17, 0.97);
  --bg-overlay-dark: rgba(0, 0, 0, 0.75);
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.055);
  --border-tertiary: rgba(255, 255, 255, 0.035);
  --border-color: var(--border-primary);
  --border-hover: rgba(255, 255, 255, 0.2);
  --border-focus: rgba(35, 131, 226, 0.5);
  --border-accent: rgba(255, 255, 255, 0.25);
  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-primary: none;
  --shadow-primary-lg: none;
  --shadow-success: none;
  --shadow-danger: none;
}

/* ===== THEME CLASSES ===== */

.theme-light {
  --shadow-none: none;
  --color-primary: #2383e2;
  --color-primary-light: #4c9ef2;
  --color-primary-dark: #1a6fc7;
  --color-primary-subtle: rgba(35, 131, 226, 0.08);
  --color-primary-subtle-hover: rgba(35, 131, 226, 0.15);
  --color-primary-glow-sm: rgba(35, 131, 226, 0.15);
  --color-primary-glow-md: rgba(35, 131, 226, 0.25);
  --color-primary-glow-lg: rgba(35, 131, 226, 0.35);
  --color-primary-alpha-05: rgba(35, 131, 226, 0.05);
  --color-primary-alpha-10: rgba(35, 131, 226, 0.1);
  --color-primary-alpha-15: rgba(35, 131, 226, 0.12);
  --color-text-primary: #1a1c1e;
  --color-text-secondary: #4a4d50;
  --color-text-tertiary: #8b8e92;
  --color-text-muted: #c1c4c8;
  --color-text-light: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #e9ecef;
  --bg-tertiary: #e9ecef;
  --bg-hover: #dee2e6;
  --bg-selected: #dee2e6;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.98);
  --border-primary: rgba(0, 0, 0, 0.08);
  --border-secondary: rgba(0, 0, 0, 0.08);
  --border-tertiary: rgba(0, 0, 0, 0.1);
  --border-hover: rgba(0, 0, 0, 0.15);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-primary: none;
  --shadow-primary-lg: none;
  --shadow-success: none;
  --shadow-danger: none;
}

.theme-sand {
  --shadow-none: none;
  --color-primary: #c4a35a;
  --color-primary-light: #d4b87a;
  --color-primary-dark: #a88a45;
  --color-primary-hover: #cfb06a;
  --color-primary-subtle: rgba(196, 163, 90, 0.12);
  --color-primary-subtle-hover: rgba(196, 163, 90, 0.18);
  --color-primary-glow-sm: rgba(196, 163, 90, 0.2);
  --color-primary-glow-md: rgba(196, 163, 90, 0.3);
  --color-primary-glow-lg: rgba(196, 163, 90, 0.4);
  --color-primary-alpha-05: rgba(196, 163, 90, 0.05);
  --color-primary-alpha-10: rgba(196, 163, 90, 0.1);
  --color-primary-alpha-15: rgba(196, 163, 90, 0.15);
  --color-text-primary: #3d3630;
  --color-text-secondary: #5c5346;
  --color-text-tertiary: #7a7268;
  --color-text-muted: #9a8f82;
  --color-text-light: #ffffff;
  --bg-primary: #ebe3d4;
  --bg-secondary: #e2d9c8;
  --bg-tertiary: #f5f0e8;
  --bg-hover: #e8e2d4;
  --bg-selected: #dfd6c4;
  --bg-elevated: #f5f0e8;
  --bg-overlay: rgba(235, 227, 212, 0.98);
  --border-primary: rgba(92, 83, 70, 0.15);
  --border-secondary: rgba(92, 83, 70, 0.1);
  --border-tertiary: rgba(92, 83, 70, 0.06);
  --border-hover: rgba(92, 83, 70, 0.25);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-primary: none;
  --shadow-primary-lg: none;
  --shadow-success: none;
  --shadow-danger: none;
}

.theme-forest {
  --color-primary: #40916c;
  --color-primary-light: #74c69d;
  --color-primary-dark: #2d6a4f;
  --color-primary-hover: #52a47d;
  --color-primary-subtle: rgba(64, 145, 108, 0.12);
  --color-primary-subtle-hover: rgba(64, 145, 108, 0.18);
  --color-primary-glow-sm: rgba(64, 145, 108, 0.2);
  --color-primary-glow-md: rgba(64, 145, 108, 0.3);
  --color-primary-glow-lg: rgba(64, 145, 108, 0.4);
  --color-primary-alpha-05: rgba(64, 145, 108, 0.05);
  --color-primary-alpha-10: rgba(64, 145, 108, 0.1);
  --color-primary-alpha-15: rgba(64, 145, 108, 0.15);
  --bg-primary: #1a221f;
  --bg-secondary: #212b27;
  --bg-tertiary: #2a3530;
  --bg-hover: #36423c;
  --border-primary: rgba(116, 198, 157, 0.12);
}

.theme-lavender {
  --color-primary: #8e7dbe;
  --color-primary-light: #b0a4d8;
  --color-primary-dark: #6e5ba7;
  --color-primary-hover: #a090cf;
  --color-primary-subtle: rgba(142, 125, 190, 0.12);
  --color-primary-subtle-hover: rgba(142, 125, 190, 0.18);
  --color-primary-glow-sm: rgba(142, 125, 190, 0.2);
  --color-primary-glow-md: rgba(142, 125, 190, 0.3);
  --color-primary-glow-lg: rgba(142, 125, 190, 0.4);
  --color-primary-alpha-05: rgba(142, 125, 190, 0.05);
  --color-primary-alpha-10: rgba(142, 125, 190, 0.1);
  --color-primary-alpha-15: rgba(142, 125, 190, 0.15);
  --bg-primary: #1a1823;
  --bg-secondary: #221f2e;
  --bg-tertiary: #2b273a;
  --bg-hover: #373149;
  --border-primary: rgba(176, 164, 216, 0.12);
}

.theme-slate {
  --color-primary: #64748b;
  --color-primary-light: #94a3b8;
  --color-primary-dark: #475569;
  --color-primary-hover: #7a8ca0;
  --color-primary-subtle: rgba(100, 116, 139, 0.12);
  --color-primary-subtle-hover: rgba(100, 116, 139, 0.18);
  --color-primary-glow-sm: rgba(100, 116, 139, 0.2);
  --color-primary-glow-md: rgba(100, 116, 139, 0.3);
  --color-primary-glow-lg: rgba(100, 116, 139, 0.4);
  --color-primary-alpha-05: rgba(100, 116, 139, 0.05);
  --color-primary-alpha-10: rgba(100, 116, 139, 0.1);
  --color-primary-alpha-15: rgba(100, 116, 139, 0.15);
  --bg-primary: #121826;
  --bg-secondary: #1e293b;
  --bg-tertiary: #2a3649;
  --bg-hover: #334155;
  --border-primary: rgba(148, 163, 184, 0.15);
}

.theme-rose {
  --color-primary: #e56b6f;
  --color-primary-light: #eaacaf;
  --color-primary-dark: #b56576;
  --color-primary-hover: #eb8487;
  --color-primary-subtle: rgba(229, 107, 111, 0.12);
  --color-primary-subtle-hover: rgba(229, 107, 111, 0.18);
  --color-primary-glow-sm: rgba(229, 107, 111, 0.2);
  --color-primary-glow-md: rgba(229, 107, 111, 0.3);
  --color-primary-glow-lg: rgba(229, 107, 111, 0.4);
  --color-primary-alpha-05: rgba(229, 107, 111, 0.05);
  --color-primary-alpha-10: rgba(229, 107, 111, 0.1);
  --color-primary-alpha-15: rgba(229, 107, 111, 0.15);
  --bg-primary: #23191c;
  --bg-secondary: #2d2125;
  --bg-tertiary: #382a2e;
  --bg-hover: #453439;
  --border-primary: rgba(234, 172, 175, 0.12);
}

.theme-sunset {
  --color-primary: #f28482;
  --color-primary-light: #f5cac3;
  --color-primary-dark: #db7c7a;
  --color-primary-hover: #f59b99;
  --color-primary-subtle: rgba(242, 132, 130, 0.12);
  --color-primary-subtle-hover: rgba(242, 132, 130, 0.18);
  --color-primary-glow-sm: rgba(242, 132, 130, 0.2);
  --color-primary-glow-md: rgba(242, 132, 130, 0.3);
  --color-primary-glow-lg: rgba(242, 132, 130, 0.4);
  --color-primary-alpha-05: rgba(242, 132, 130, 0.05);
  --color-primary-alpha-10: rgba(242, 132, 130, 0.1);
  --color-primary-alpha-15: rgba(242, 132, 130, 0.15);
  --bg-primary: #1a161f;
  --bg-secondary: #231e29;
  --bg-tertiary: #2d2734;
  --bg-hover: #3a3242;
  --border-primary: rgba(242, 132, 130, 0.12);
}

.theme-midnight {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #141414;
  --bg-hover: #1f1f1f;
  --bg-elevated: #0a0a0a;
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.05);
}

.theme-amber {
  --color-primary: #ff9800;
  --color-primary-light: #ffa726;
  --color-primary-dark: #f57c00;
  --color-primary-hover: #ffab00;
  --color-primary-subtle: rgba(255, 152, 0, 0.12);
  --color-primary-subtle-hover: rgba(255, 152, 0, 0.18);
  --color-primary-glow-sm: rgba(255, 152, 0, 0.2);
  --color-primary-glow-md: rgba(255, 152, 0, 0.3);
  --color-primary-glow-lg: rgba(255, 152, 0, 0.4);
  --color-primary-alpha-05: rgba(255, 152, 0, 0.05);
  --color-primary-alpha-10: rgba(255, 152, 0, 0.1);
  --color-primary-alpha-15: rgba(255, 152, 0, 0.15);
  --bg-primary: #1f1812;
  --bg-secondary: #281f17;
  --bg-tertiary: #32271d;
  --bg-hover: #3d3023;
  --border-primary: rgba(255, 167, 38, 0.12);
}

.theme-crimson {
  --color-primary: #dc143c;
  --color-primary-light: #e63950;
  --color-primary-dark: #a50f2d;
  --color-primary-hover: #e42447;
  --color-primary-subtle: rgba(220, 20, 60, 0.12);
  --color-primary-subtle-hover: rgba(220, 20, 60, 0.18);
  --color-primary-glow-sm: rgba(220, 20, 60, 0.2);
  --color-primary-glow-md: rgba(220, 20, 60, 0.3);
  --color-primary-glow-lg: rgba(220, 20, 60, 0.4);
  --color-primary-alpha-05: rgba(220, 20, 60, 0.05);
  --color-primary-alpha-10: rgba(220, 20, 60, 0.1);
  --color-primary-alpha-15: rgba(220, 20, 60, 0.15);
  --bg-primary: #1f1214;
  --bg-secondary: #271519;
  --bg-tertiary: #301920;
  --bg-hover: #3a1e26;
  --border-primary: rgba(230, 57, 80, 0.12);
}

.theme-emerald {
  --color-primary: #10b981;
  --color-primary-light: #34d399;
  --color-primary-dark: #059669;
  --color-primary-hover: #14c990;
  --color-primary-subtle: rgba(16, 185, 129, 0.12);
  --color-primary-subtle-hover: rgba(16, 185, 129, 0.18);
  --color-primary-glow-sm: rgba(16, 185, 129, 0.2);
  --color-primary-glow-md: rgba(16, 185, 129, 0.3);
  --color-primary-glow-lg: rgba(16, 185, 129, 0.4);
  --color-primary-alpha-05: rgba(16, 185, 129, 0.05);
  --color-primary-alpha-10: rgba(16, 185, 129, 0.1);
  --color-primary-alpha-15: rgba(16, 185, 129, 0.15);
  --bg-primary: #0d1f1a;
  --bg-secondary: #11261f;
  --bg-tertiary: #162e27;
  --bg-hover: #1c3730;
  --border-primary: rgba(52, 211, 153, 0.12);
}

.theme-indigo {
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-primary-hover: #7477f3;
  --color-primary-subtle: rgba(99, 102, 241, 0.12);
  --color-primary-subtle-hover: rgba(99, 102, 241, 0.18);
  --color-primary-glow-sm: rgba(99, 102, 241, 0.2);
  --color-primary-glow-md: rgba(99, 102, 241, 0.3);
  --color-primary-glow-lg: rgba(99, 102, 241, 0.4);
  --color-primary-alpha-05: rgba(99, 102, 241, 0.05);
  --color-primary-alpha-10: rgba(99, 102, 241, 0.1);
  --color-primary-alpha-15: rgba(99, 102, 241, 0.15);
  --bg-primary: #13141f;
  --bg-secondary: #181a28;
  --bg-tertiary: #1e2132;
  --bg-hover: #25283d;
  --border-primary: rgba(129, 140, 248, 0.12);
}

.theme-sky {
  --color-primary: #0ea5e9;
  --color-primary-light: #38bdf8;
  --color-primary-dark: #0284c7;
  --color-primary-hover: #0c8fd9;
  --color-primary-subtle: rgba(14, 165, 233, 0.12);
  --color-primary-subtle-hover: rgba(14, 165, 233, 0.18);
  --color-primary-glow-sm: rgba(14, 165, 233, 0.2);
  --color-primary-glow-md: rgba(14, 165, 233, 0.3);
  --color-primary-glow-lg: rgba(14, 165, 233, 0.4);
  --color-primary-alpha-05: rgba(14, 165, 233, 0.05);
  --color-primary-alpha-10: rgba(14, 165, 233, 0.1);
  --color-primary-alpha-15: rgba(14, 165, 233, 0.15);
  --bg-primary: #0c1820;
  --bg-secondary: #132830;
  --bg-tertiary: #1a3340;
  --bg-hover: #223d4d;
  --border-primary: rgba(56, 189, 248, 0.12);
}

.theme-mocha {
  --color-primary: #a0826d;
  --color-primary-light: #b8997f;
  --color-primary-dark: #8b6f5c;
  --color-primary-hover: #ad8e78;
  --color-primary-subtle: rgba(160, 130, 109, 0.12);
  --color-primary-subtle-hover: rgba(160, 130, 109, 0.18);
  --color-primary-glow-sm: rgba(160, 130, 109, 0.2);
  --color-primary-glow-md: rgba(160, 130, 109, 0.3);
  --color-primary-glow-lg: rgba(160, 130, 109, 0.4);
  --color-primary-alpha-05: rgba(160, 130, 109, 0.05);
  --color-primary-alpha-10: rgba(160, 130, 109, 0.1);
  --color-primary-alpha-15: rgba(160, 130, 109, 0.15);
  --bg-primary: #1a1512;
  --bg-secondary: #221a16;
  --bg-tertiary: #2a201b;
  --bg-hover: #332721;
  --border-primary: rgba(184, 153, 127, 0.12);
}