/* ===== Color System - Industrial Production Analytics ===== */
/* Cold tones palette with frosted glass effect */

:root {
    /* ===== Primary Palette (Cold Tones) ===== */
    
    /* Blue Spectrum - for accents and actions */
    --color-primary: #0066CC;           /* Primary blue */
    --color-primary-dark: #004499;      /* Dark blue */
    --color-primary-light: #3399FF;     /* Light blue */
    --color-primary-lighter: #B3D9FF;   /* Very light blue */
    --color-primary-bg: #E6F2FF;        /* Blue background */
    
    /* Gray Spectrum - for text and structure */
    --color-text-primary: #1A1A1A;      /* Primary text */
    --color-text-secondary: #666666;    /* Secondary text */
    --color-text-light: #999999;        /* Light text */
    --color-text-white: #FFFFFF;        /* White text */
    
    --color-bg-white: #FFFFFF;          /* White background */
    --color-bg-light: #F8F9FA;          /* Light gray background */
    --color-bg-gray: #E8E8E8;           /* Gray background */
    --color-bg-dark: #2C2C2C;          /* Dark background */
    
    /* Borders and dividers */
    --color-border: #E0E0E0;            /* Light border */
    --color-border-dark: #CCCCCC;      /* Dark border */
    
    /* ===== Frosted Glass Effect ===== */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-light: rgba(255, 255, 255, 0.15);
    --glass-bg-dark: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(10px);
    --glass-border: rgba(255, 255, 255, 0.2);
    
    /* ===== Accent Colors for Industrial Theme ===== */
    --color-success: #00CC66;           /* Green for success/growth */
    --color-warning: #FF9900;           /* Orange for warnings */
    --color-error: #CC0000;             /* Red for errors */
    --color-info: #0066CC;              /* Blue for information */
    
    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(135deg, #0066CC 0%, #004499 100%);
    --gradient-light: linear-gradient(135deg, #E6F2FF 0%, #FFFFFF 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    
    /* ===== Shadows ===== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-colored: 0 8px 24px rgba(0, 102, 204, 0.2);
    
    /* ===== Hover States ===== */
    --color-primary-hover: #0052A3;
    --color-primary-active: #003D7A;
}

/* ===== Frosted Glass Classes ===== */
.glass-effect {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

.glass-effect-light {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.glass-effect-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* ===== Color Application Classes ===== */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

.bg-light {
    background-color: var(--color-bg-light);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
    color: var(--color-text-white);
}