/* ============================================================================
   DARK THEME - Professional Dashboard Theme
   Version: 1.0.0
   Last Updated: 2024
   ============================================================================ */

:root {
  /* =========================
     BRAND COLORS - Core Identity
     ========================= */
  --color-primary: #60a5fa;           /* Sky Blue - Primary action color */
  --color-primary-hover: #3b82f6;     /* Blue-600 - Hover state */
  --color-primary-active: #2563eb;    /* Blue-700 - Active/pressed state */
  --color-primary-light: rgba(96, 165, 250, 0.1); /* For subtle backgrounds */
  --color-primary-border: rgba(96, 165, 250, 0.3); /* For borders */
  
  --color-secondary: #020617;         /* Near black */
  --color-secondary-hover: #0f172a;   /* Slate-900 - Hover state */
  --color-secondary-active: #1e293b;  /* Slate-800 - Active state */
  
  --color-accent: #4ade80;            /* Green */
  --color-accent-hover: #22c55e;      /* Green-500 - Hover state */
  --color-accent-active: #16a34a;     /* Green-600 - Active state */
  --color-accent-light: rgba(74, 222, 128, 0.1);

  /* =========================
     BACKGROUNDS - Layered Surfaces
     ========================= */
  --bg-main: #020617;                 /* App background */
  --bg-muted: #0f172a;                /* Sidebar / muted areas */
  --bg-elevated: #1e293b;             /* Cards */
  --bg-overlay: rgba(0, 0, 0, 0.5);   /* Modal overlays */
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-selected: rgba(96, 165, 250, 0.15);
  --bg-disabled: rgba(255, 255, 255, 0.03);

  /* =========================
     TEXT COLORS - Typography
     ========================= */
  --text-primary: #f8fafc;            /* Main text */
  --text-primary-strong: #ffffff;     /* Strong emphasis text */
  --text-primary-muted: rgba(248, 250, 252, 0.9);
  
  --text-secondary: #cbd5e1;          /* Secondary text */
  --text-secondary-muted: rgba(203, 213, 225, 0.8);
  
  --text-muted: #94a3b8;              /* Muted/disabled text */
  --text-muted-strong: #64748b;       /* Strong muted text */
  --text-placeholder: #64748b;        /* Input placeholder */
  
  --text-inverted: #020617;           /* Text on colored buttons */
  --text-on-primary: #ffffff;         /* Text on primary background */
  --text-on-accent: #020617;          /* Text on accent background */
  --text-on-secondary: #ffffff;       /* Text on secondary background */
  
  --text-link: #60a5fa;               /* Link text */
  --text-link-hover: #93c5fd;         /* Link hover */
  --text-link-visited: #a78bfa;       /* Visited links */

  /* =========================
     BORDERS & DIVIDERS
     ========================= */
  --border-default: #334155;          /* Default borders */
  --border-muted: #1e293b;            /* Subtle borders */
  --border-strong: #475569;           /* Strong borders */
  --border-focus: #60a5fa;            /* Focus rings */
  --border-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.3);
  --border-error: #f87171;            /* Error state */
  --border-success: #4ade80;          /* Success state */
  --border-warning: #fbbf24;          /* Warning state */
  
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 14px;
  --border-radius-xl: 20px;
  --border-radius-full: 9999px;

  /* =========================
     STATUS & FEEDBACK COLORS
     ========================= */
  /* Success States */
  --badge-success: #10b981;           /* Green */
  --badge-success-bg: rgba(16, 185, 129, 0.1);
  --badge-success-border: rgba(16, 185, 129, 0.3);
  --badge-success-text: #a7f3d0;      /* Emerald-200 */
  --badge-success-hover: rgba(16, 185, 129, 0.15);
  
  /* Warning States */
  --badge-warning: #f59e0b;           /* Amber */
  --badge-warning-bg: rgba(245, 158, 11, 0.1);
  --badge-warning-border: rgba(245, 158, 11, 0.3);
  --badge-warning-text: #fde68a;      /* Amber-200 */
  --badge-warning-hover: rgba(245, 158, 11, 0.15);
  
  /* Error States */
  --badge-error: #ef4444;             /* Red */
  --badge-error-bg: rgba(239, 68, 68, 0.1);
  --badge-error-border: rgba(239, 68, 68, 0.3);
  --badge-error-text: #fca5a5;        /* Red-300 */
  --badge-error-hover: rgba(239, 68, 68, 0.15);
  
  /* Info States */
  --badge-info: #3b82f6;              /* Blue */
  --badge-info-bg: rgba(59, 130, 246, 0.1);
  --badge-info-border: rgba(59, 130, 246, 0.3);
  --badge-info-text: #93c5fd;         /* Blue-300 */
  --badge-info-hover: rgba(59, 130, 246, 0.15);
  
  /* Neutral States */
  --badge-neutral: #94a3b8;           /* Slate-400 */
  --badge-neutral-bg: rgba(148, 163, 184, 0.1);
  --badge-neutral-border: rgba(148, 163, 184, 0.3);
  --badge-neutral-text: #cbd5e1;      /* Slate-300 */
  
  /* Idle/Offline */
  --badge-idle: #94a3b8;              /* Slate-400 */
  --badge-idle-bg: rgba(148, 163, 184, 0.1);
  --badge-idle-text: #cbd5e1;

  /* =========================
     CHART & DATA VISUALIZATION
     ========================= */
  --chart-1: #60a5fa;                 /* Primary blue */
  --chart-1-light: rgba(96, 165, 250, 0.3);
  
  --chart-2: #4ade80;                 /* Emerald green */
  --chart-2-light: rgba(74, 222, 128, 0.3);
  
  --chart-3: #8b5cf6;                 /* Violet */
  --chart-3-light: rgba(139, 92, 246, 0.3);
  
  --chart-4: #f59e0b;                 /* Amber */
  --chart-4-light: rgba(245, 158, 11, 0.3);
  
  --chart-5: #ec4899;                 /* Pink */
  --chart-5-light: rgba(236, 72, 153, 0.3);
  
  --chart-6: #14b8a6;                 /* Teal */
  --chart-6-light: rgba(20, 184, 166, 0.3);
  
  --chart-7: #f97316;                 /* Orange */
  --chart-8: #a855f7;                 /* Purple */
  --chart-9: #06b6d4;                 /* Cyan */
  --chart-10: #84cc16;                /* Lime */
  
  /* Chart Utilities */
  --chart-grid: #334155;              /* Grid lines */
  --chart-axis: #475569;              /* Axis lines */
  --chart-tooltip-bg: #1e293b;        /* Tooltip background */
  --chart-tooltip-border: #475569;    /* Tooltip border */
  --chart-tooltip-text: #f8fafc;      /* Tooltip text */
  --chart-legend-bg: rgba(30, 41, 59, 0.8); /* Legend background */

  /* =========================
     SHADOWS & ELEVATION
     ========================= */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.9);
  --shadow-2xl: 0 32px 128px rgba(0, 0, 0, 1);
  
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-inset-top: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-inset-bottom: inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 16px 64px rgba(0, 0, 0, 0.9);
  --shadow-navbar: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.8);
  
  --shadow-primary: 0 0 0 3px rgba(96, 165, 250, 0.3);
  --shadow-accent: 0 0 0 3px rgba(74, 222, 128, 0.3);
  --shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.3);

  /* =========================
     TRANSITIONS & ANIMATIONS
     ========================= */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --animation-fade-in: fadeIn 0.3s ease-out;
  --animation-slide-up: slideUp 0.3s ease-out;
  --animation-slide-down: slideDown 0.3s ease-out;
  --animation-slide-left: slideLeft 0.3s ease-out;
  --animation-slide-right: slideRight 0.3s ease-out;
  --animation-scale: scale 0.2s ease-out;
  --animation-pulse: pulse 2s infinite;
  --animation-spin: spin 1s linear infinite;

  /* =========================
     Z-INDEX LAYERS
     ========================= */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;

  /* =========================
     SPACING SCALE - FIXED: ADDED THIS SECTION
     ========================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

/* =========================
   ANIMATION KEYFRAMES
   ========================= */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}