/* CSS Variables - Color Scheme and Spacing */
:root {
/* Primary Colors */
--color-primary: #2C3E50;
--color-primary-light: #34495E;
--color-primary-dark: #1A252F;

/* Accent Colors */
--color-accent: #16A085;
--color-accent-light: #1ABC9C;
--color-accent-dark: #138871;

/* Status Colors */
--color-success: #27AE60;
--color-success-bg: #d4edda;
--color-success-text: #155724;
--color-success-border: #28a745;

--color-warning: #F39C12;
--color-warning-bg: #fff3cd;
--color-warning-text: #856404;
--color-warning-border: #ffc107;

--color-danger: #C0392B;
--color-info: #3498DB;

--color-neutral-bg: #e9ecef;
--color-neutral-text: #6c757d;
--color-neutral-border: #dee2e6;

/* Client Colors */
--color-client-1: #3498DB;
--color-client-2: #1ABC9C;
--color-client-3: #2ECC71;
--color-client-4: #E67E22;
--color-client-5: #34495E;
--color-client-6: #7F8C8D;
--color-client-7: #48C9B0;
--color-client-8: #5DADE2;

/* Text Colors - Light Mode */
--color-text-primary: #212121;
--color-text-secondary: #616161;
--color-text-tertiary: #9E9E9E;

/* Neutral Colors */
--color-white: #FFFFFF;
--color-gray-50: #FAFAFA;
--color-gray-100: #F5F5F5;
--color-gray-200: #EEEEEE;
--color-gray-300: #E0E0E0;
--color-gray-400: #BDBDBD;
--color-gray-500: #9E9E9E;
--color-gray-600: #757575;
--color-gray-700: #616161;
--color-gray-800: #424242;
--color-gray-900: #212121;

/* Background Colors */
--color-bg-primary: #ECF0F1;
--color-bg-secondary: #BDC3C7;
--color-bg-card: #FFFFFF;

/* Gradients */
--gradient-header: linear-gradient(135deg, #2C3E50 0%, #16A085 100%);
--gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F8F9FA 100%);

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(44, 62, 80, 0.05);
--shadow-md: 0 4px 6px -1px rgba(44, 62, 80, 0.1), 0 2px 4px -1px rgba(44, 62, 80, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(44, 62, 80, 0.1), 0 4px 6px -2px rgba(44, 62, 80, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(44, 62, 80, 0.1), 0 10px 10px -5px rgba(44, 62, 80, 0.04);

/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;

/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;

/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;

/* Font Sizes */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;

/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

/* Z-Index Layers */
--z-dropdown: 1000;
--z-modal: 2000;
--z-toast: 3000;
--z-loading: 4000;
}

/* Dark Mode Variables */
:root[data-theme="dark"] {
/* Primary Colors */
--color-primary: #34495E;
--color-primary-light: #4A5F7F;
--color-primary-dark: #2C3E50;

/* Accent Colors */
--color-accent: #1ABC9C;
--color-accent-light: #48C9B0;
--color-accent-dark: #16A085;

/* Status Colors for Dark Mode */
--color-success: #27AE60;
--color-success-bg: #1e4620;
--color-success-text: #90ee90;
--color-success-border: #27AE60;

--color-warning: #F39C12;
--color-warning-bg: #3d3416;
--color-warning-text: #ffd966;
--color-warning-border: #F39C12;

--color-neutral-bg: #3a3a3a;
--color-neutral-text: #b0b0b0;
--color-neutral-border: #555555;

/* Text Colors - All white in dark mode */
--color-text-primary: #FFFFFF;
--color-text-secondary: #E0E0E0;
--color-text-tertiary: #BDBDBD;

/* Neutral Colors */
--color-white: #1E1E1E;
--color-gray-50: #2A2A2A;
--color-gray-100: #333333;
--color-gray-200: #3D3D3D;
--color-gray-300: #4A4A4A;
--color-gray-400: #757575;
--color-gray-500: #9E9E9E;
--color-gray-600: #E0E0E0;
--color-gray-700: #E8E8E8;
--color-gray-800: #F0F0F0;
--color-gray-900: #FFFFFF;

/* Background Colors */
--color-bg-primary: #1A1A1A;
--color-bg-secondary: #2C3E50;
--color-bg-card: #2A2A2A;

/* Gradients */
--gradient-header: linear-gradient(135deg, #2C3E50 0%, #16A085 100%);
--gradient-card: linear-gradient(145deg, #2A2A2A 0%, #333333 100%);

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Auto Mode - follows system preference */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
/* Primary Colors */
--color-primary: #34495E;
--color-primary-light: #4A5F7F;
--color-primary-dark: #2C3E50;

/* Accent Colors */
--color-accent: #1ABC9C;
--color-accent-light: #48C9B0;
--color-accent-dark: #16A085;

/* Status Colors for Dark Mode */
--color-success: #27AE60;
--color-success-bg: #1e4620;
--color-success-text: #90ee90;
--color-success-border: #27AE60;

--color-warning: #F39C12;
--color-warning-bg: #3d3416;
--color-warning-text: #ffd966;
--color-warning-border: #F39C12;

--color-neutral-bg: #3a3a3a;
--color-neutral-text: #b0b0b0;
--color-neutral-border: #555555;

/* Text Colors - All white in dark mode */
--color-text-primary: #FFFFFF;
--color-text-secondary: #E0E0E0;
--color-text-tertiary: #BDBDBD;

/* Neutral Colors */
--color-white: #1E1E1E;
--color-gray-50: #2A2A2A;
--color-gray-100: #333333;
--color-gray-200: #3D3D3D;
--color-gray-300: #4A4A4A;
--color-gray-400: #757575;
--color-gray-500: #9E9E9E;
--color-gray-600: #E0E0E0;
--color-gray-700: #E8E8E8;
--color-gray-800: #F0F0F0;
--color-gray-900: #FFFFFF;

/* Background Colors */
--color-bg-primary: #1A1A1A;
--color-bg-secondary: #2C3E50;
--color-bg-card: #2A2A2A;

/* Gradients */
--gradient-header: linear-gradient(135deg, #2C3E50 0%, #16A085 100%);
--gradient-card: linear-gradient(145deg, #2A2A2A 0%, #333333 100%);

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
}