/* ===================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Operations Dashboard Theme System
   =================================== */

:root {
    /* ==================== COLOR PALETTE ==================== */

    /* Primary Colors */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-light: #60a5fa;
    --color-primary-dark: #1d4ed8;
    --color-primary-alpha-05: rgba(59, 130, 246, 0.05);
    --color-primary-alpha-08: rgba(59, 130, 246, 0.08);
    --color-primary-alpha-10: rgba(59, 130, 246, 0.1);
    --color-primary-alpha-15: rgba(59, 130, 246, 0.15);
    --color-primary-alpha-20: rgba(59, 130, 246, 0.2);
    --color-primary-alpha-25: rgba(59, 130, 246, 0.25);
    --color-primary-alpha-30: rgba(59, 130, 246, 0.3);
    --color-primary-alpha-40: rgba(59, 130, 246, 0.4);
    --color-primary-alpha-50: rgba(59, 130, 246, 0.5);

    /* Background Colors */
    --color-bg-body: #0f172a;
    --color-bg-surface: #1e293b;
    --color-bg-elevated: rgba(30, 30, 35, 0.95);
    --color-bg-input: rgba(15, 23, 42, 0.6);
    --color-bg-input-focus: rgba(15, 23, 42, 0.9);
    --color-bg-hover: rgba(255, 255, 255, 0.03);
    --color-bg-card: rgba(30, 30, 35, 0.98);
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-bg-input-light: rgba(15, 23, 42, 0.4);
    --color-bg-input-dark: rgba(15, 23, 42, 0.8);
    --color-bg-dark: #1f2937;

    /* White Alpha Overlays */
    --color-white-alpha-02: rgba(255, 255, 255, 0.02);
    --color-white-alpha-04: rgba(255, 255, 255, 0.04);
    --color-white-alpha-06: rgba(255, 255, 255, 0.06);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);

    /* Black Alpha Overlays */
    --color-black-alpha-15: rgba(0, 0, 0, 0.15);
    --color-black-alpha-20: rgba(0, 0, 0, 0.2);
    --color-black-alpha-25: rgba(0, 0, 0, 0.25);
    --color-black-alpha-30: rgba(0, 0, 0, 0.3);
    --color-black-alpha-40: rgba(0, 0, 0, 0.4);
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);

    /* Border Colors */
    --color-border: #334155;
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-lighter: rgba(255, 255, 255, 0.05);
    --color-border-focus: rgba(255, 255, 255, 0.4);

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #e5e7eb;
    --color-text-muted: #9ca3af;
    --color-text-subtle: #64748b;
    --color-text-label: #cbd5e1;

    /* Status Colors */
    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-light: #6ee7b7;
    --color-success-alpha: rgba(16, 185, 129, 0.1);
    --color-success-alpha-15: rgba(16, 185, 129, 0.15);
    --color-success-alpha-20: rgba(16, 185, 129, 0.2);
    --color-success-alpha-30: rgba(16, 185, 129, 0.3);

    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: #fbbf24;
    --color-warning-alpha: rgba(245, 158, 11, 0.1);
    --color-warning-alpha-15: rgba(245, 158, 11, 0.15);
    --color-warning-alpha-20: rgba(245, 158, 11, 0.2);
    --color-warning-alpha-30: rgba(245, 158, 11, 0.3);

    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: #fca5a5;
    --color-danger-alpha: rgba(239, 68, 68, 0.1);
    --color-danger-alpha-15: rgba(239, 68, 68, 0.15);
    --color-danger-alpha-20: rgba(239, 68, 68, 0.2);
    --color-danger-alpha-30: rgba(239, 68, 68, 0.3);

    --color-info: #0ea5e9;
    --color-info-hover: #0284c7;
    --color-info-light: #7dd3fc;
    --color-info-alpha: rgba(14, 165, 233, 0.1);

    /* Accent Colors */
    --color-purple: #8b5cf6;
    --color-purple-hover: #7c3aed;
    --color-purple-light: #a78bfa;
    --color-purple-alpha-10: rgba(139, 92, 246, 0.1);
    --color-purple-alpha-15: rgba(139, 92, 246, 0.15);
    --color-purple-400: #a855f7;
    --color-cyan: #00BFFF;
    --color-blue-accent: #4994ec;
    --color-blue-200: #93c5fd;
    --color-orange: #fb923c;
    --color-green-500: #22c55e;

    /* Gray Scale */
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #475569;
    --color-gray-800: #334155;
    --color-slate-200: #e2e8f0;

    /* Extra Status Shades */
    --color-red-300: #f87171;
    --color-emerald-400: #34d399;
    --color-green-400: #4ade80;

    /* ==================== TYPOGRAPHY ==================== */

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;

    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;

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

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.08em;
    --letter-spacing-widest: 0.1em;

    /* ==================== SPACING ==================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ==================== BORDER RADIUS ==================== */

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-3xl: 16px;
    --radius-full: 9999px;

    /* ==================== SHADOWS ==================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.5);
    --shadow-glow-primary: 0 4px 12px rgba(59, 130, 246, 0.3);
    --shadow-glow-primary-hover: 0 6px 20px rgba(59, 130, 246, 0.4);
    --shadow-glow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
    --shadow-glow-danger: 0 4px 12px rgba(239, 68, 68, 0.3);

    /* Focus ring */
    --shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.1);

    /* ==================== TRANSITIONS ==================== */

    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 400ms ease;

    /* Specific transitions */
    --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
    --transition-transform: transform 200ms ease;
    --transition-opacity: opacity 200ms ease;
    --transition-all: all 200ms ease;

    /* ==================== Z-INDEX SCALE ==================== */

    --z-dropdown: 50;
    --z-sticky: 60;
    --z-fixed: 70;
    --z-sidebar: 100;
    --z-modal-backdrop: 200;
    --z-modal: 210;
    --z-popover: 300;
    --z-tooltip: 400;
    --z-toast: 500;
    --z-scanner: 9999;

    /* ==================== LAYOUT ==================== */

    --sidebar-width: 220px;
    --header-height: 64px;
    --container-max-width: 1600px;
    --container-padding: 20px;

    /* ==================== BREAKPOINTS (for reference) ==================== */
    /* These can't be used directly in media queries, but are here for documentation */
    /* --breakpoint-sm: 640px;   */
    /* --breakpoint-md: 768px;   */
    /* --breakpoint-lg: 1024px;  */
    /* --breakpoint-xl: 1280px;  */
    /* --breakpoint-2xl: 1536px; */

    /* ==================== COMPONENT-SPECIFIC ==================== */

    /* Buttons */
    --btn-padding-y: 10px;
    --btn-padding-x: 20px;
    --btn-padding-y-sm: 8px;
    --btn-padding-x-sm: 16px;
    --btn-font-size: 14px;
    --btn-border-radius: var(--radius-md);

    /* Form Inputs */
    --input-padding-y: 10px;
    --input-padding-x: 12px;
    --input-border-radius: var(--radius-lg);
    --input-font-size: 13px;

    /* Cards */
    --card-padding: 24px;
    --card-border-radius: var(--radius-2xl);

    /* Tables */
    --table-cell-padding-y: 12px;
    --table-cell-padding-x: 16px;
    --table-header-bg: rgba(59, 130, 246, 0.1);

    /* Modals */
    --modal-padding: 24px;
    --modal-border-radius: var(--radius-3xl);
    --modal-max-width: 600px;
}

/* ==================== RESPONSIVE VARIABLE OVERRIDES ==================== */

/* Large desktop */
@media (min-width: 1921px) {
    :root {
        --font-size-base: 15px;
        --container-max-width: 1800px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
        --container-padding: 16px;
        --card-padding: 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
        --container-padding: 15px;
        --card-padding: 16px;
        --btn-padding-y: 12px;
        --btn-padding-x: 20px;
        --input-padding-y: 12px;
        --input-padding-x: 14px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --font-size-base: 13px;
        --container-padding: 12px;
        --card-padding: 15px;
    }
}