:root {
  /* === Background Colors === */
  --bg-app: #080808;
  --bg-primary: var(--bg-app);
  --bg-panel: rgba(20, 20, 22, 0.85);
  --bg-panel-solid: #141416;
  --bg-elevated: #1b1b1e;
  --bg-element: rgba(255, 255, 255, 0.05);
  --bg-input: rgba(0, 0, 0, 0.3);

  /* === Accent Colors (Neon) === */
  --accent-blue: #1b603f;
  --accent-blue-transparent: rgba(27, 96, 63, 0.15);
  --accent-purple: #e2e8f0;
  --accent-green: #4ade80;
  --accent-violet: #e2e8f0;
  --accent-primary: var(--accent-blue);
  --accent-primary-hover: #144d30;

  /* === Status Colors === */
  --status-success: var(--accent-green);
  --status-warning: #fbbf24;
  --status-danger: #ef4444;
  --status-info: var(--accent-blue);
  --status-production-bg: rgba(148, 163, 184, 0.12);
  --status-production-text: #e2e8f0;
  --status-production-border: rgba(148, 163, 184, 0.3);
  --success: var(--status-success);
  --danger: var(--status-danger);

  /* === Text Colors === */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.76);
  --text-muted: rgba(255, 255, 255, 0.58);
  --text-disabled: rgba(255, 255, 255, 0.42);
  --text-inverse: #ffffff;

  /* === Glassmorphism & Neon Effects === */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.1);
  --border-light: var(--glass-border);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(12px);
  --neon-shadow: 0 8px 22px rgba(27, 96, 63, 0.22);
  --neon-border: 1px solid var(--accent-blue);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-overlay: 0 24px 70px rgba(0, 0, 0, 0.48);

  /* === Typography === */
  --font-main: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-header: var(--font-main);
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;

  /* === Spacing & Radius === */
  --radius-standard: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 20px;
  --space-10: 32px;
  --space-12: 40px;

  /* === Layout === */
  --sidebar-width: 240px;
  --header-height: 72px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-base: color 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}