/* ==========================================================================
   VoltVisor Design System — CSS Custom Properties
   All colors, fonts, spacing, and layout constants.
   Import FIRST in every page.
   ========================================================================== */

:root {
  /* ---- Background Colors ---- */
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d23;
  --bg-tertiary: #21242b;
  --bg-hover: #282c34;

  /* ---- Border Colors ---- */
  --border: #2a2d35;
  --border-light: #363940;

  /* ---- Text Colors ---- */
  --text-primary: #e4e5e7;
  --text-secondary: #9ca0a8;
  --text-tertiary: #6b7080;

  /* ---- Accent Colors (solid) ---- */
  --green: #22c55e;
  --blue: #3b82f6;
  --purple: #a855f7;
  --red: #ef4444;
  --yellow: #eab308;
  --orange: #f97316;
  --cyan: #06b6d4;

  /* ---- Accent Colors (dim / translucent backgrounds) ---- */
  --green-dim: rgba(34, 197, 94, 0.15);
  --blue-dim: rgba(59, 130, 246, 0.15);
  --purple-dim: rgba(168, 85, 247, 0.15);
  --red-dim: rgba(239, 68, 68, 0.15);
  --yellow-dim: rgba(234, 179, 8, 0.15);
  --orange-dim: rgba(249, 115, 22, 0.15);
  --cyan-dim: rgba(6, 182, 212, 0.15);

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

  /* ---- Layout Constants ---- */
  --sidebar-w: 240px;
  --topbar-h: 56px;

  /* ---- Spacing Scale ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* ---- Transitions ---- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}