/*
==================================================
BUSINESS COLOR MANAGEMENT SYSTEM
==================================================
CSS Custom Properties (Variables) for the Concloud Dashboard
Centralized color and design token management
==================================================
*/

/* ===== CSS CUSTOM PROPERTIES (VARIABLES) ===== */
:root {

    /* ===== BUSINESS COLORS - CHANGE THESE TO UPDATE YOUR BRAND ===== */
    /* 🎨 QUICK COLOR CHANGE: Simply modify these 7 values to rebrand your entire application */
    --business-primary: #060d47;
    /* 🔵 Dark blue - main brand color */
    --business-secondary: #10a0da;
    /* ⚫ Neutral gray for secondary elements */
    --business-accent: #00d4ff;
    /* 💠 Bright cyan for highlights and call-to-actions */
    --business-success: #10b981;
    /* 🟢 Emerald green for success states */
    --business-warning: #f59e0b;
    /* 🟡 Amber for warnings */
    --business-danger: #ef4444;
    /* 🔴 Red for errors and danger states */
    --business-info: #06b6d4;
    /* 🔷 Cyan for informational elements */

    /* ===== GENERATED COLOR VARIATIONS ===== */
    /* Primary Brand Colors - Auto-generated from business-primary (#060d47) */
    --primary-color: var(--business-primary);
    --primary-light: #0f4eb4;
    /* Lighter shade of primary (less purple, more blue) */
    --primary-lighter: #2a8cf7;
    /* Even lighter shade (sky blue, not purple) */
    --primary-lightest: #3cc9ff;
    /* Lightest shade for highlights */
    --primary-dark: #041240;
    /* Darker shade of primary */
    --primary-darker: #020f2a;
    /* Even darker shade */
    --primary-darkest: #010a1c;
    /* Darkest shade */

    /* Modern Color Palette - Based on Primary (#060d47) */
    --primary-50: #f0f2ff;
    /* Very light tint */
    --primary-100: #dce4ff;
    /* Light tint */
    --primary-200: #b8ccff;
    /* Lighter tint */
    --primary-300: #94b4ff;
    /* Light tint */
    --primary-400: #708cdd;
    /* Medium-light tint */
    --primary-500: var(--business-primary);
    /* Base color */
    --primary-600: #040a35;
    /* Darker shade */
    --primary-700: #030723;
    /* Dark shade */
    --primary-800: #020412;
    /* Darker shade */
    --primary-900: #010208;
    /* Darkest shade */

    --secondary-color: var(--business-secondary);
    --secondary-light: #33b4f0;
    /* Light shade of secondary */
    --secondary-dark: #0c7abf;
    /* Dark shade of secondary */
    --secondary-darker: #095a8f;
    /* Darker shade of secondary */
    --secondary-darkest: #073a5f;
    /* Darkest shade of secondary */


    /* Modern Accent Colors - Based on business colors */
    --accent-cyan: var(--business-accent);
    /* Business accent color */
    --accent-purple: #8b5cf6;
    /* Purple accent */
    --accent-pink: #ec4899;
    /* Pink accent */
    --accent-green: var(--business-success);
    /* Success green */
    --accent-orange: var(--business-warning);
    /* Warning orange */
    --accent-red: var(--business-danger);
    /* Error red */

    /* Baby Blue / Electric Blue Colors - Coupled with Primary */
    --baby-blue: #87ceeb;
    /* Baby blue */
    --baby-blue-light: #a8d8f0;
    /* Light baby blue */
    --baby-blue-lighter: #c9e6f7;
    /* Lighter baby blue */
    --electric-blue: #00bfff;
    /* Electric blue */
    --electric-blue-light: #33ccff;
    /* Light electric blue */
    --electric-blue-dark: #0099cc;
    /* Dark electric blue */
    --dark-blue: #1e3a8a;
    /* Dark blue */
    --dark-blue-light: #3b5ba0;
    /* Light dark blue */

    /* Modern Login Page Variables - Dark Theme */
    --login-bg-primary: linear-gradient(135deg, var(--business-primary) 0%, var(--business-secondary) 25%, #1a2968 50%, #040a35 80%, #020412 100%);
    --login-bg-secondary: linear-gradient(45deg, var(--business-secondary) 0%, var(--business-primary) 30%, #0c1658 70%, #040a35 100%);
    --login-bg-accent: linear-gradient(225deg, #060d47 0%, var(--business-secondary) 40%, #3a4d89 70%, #5a71aa 100%);
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.65);
    --shadow-primary: 0 20px 40px rgba(20, 15, 84, 0.4);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.15);
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --accent-purple: #8b5cf6;
    /* Modern purple accent */
    --accent-blue: #3b82f6;
    /* Modern blue accent */
    --accent-indigo: #6366f1;
    /* Modern indigo accent */
    --accent-violet: #7c3aed;
    /* Modern violet accent */

    /* Modern Neutral Colors */
    --neutral-50: #fafafa;
    /* Lightest neutral */
    --neutral-100: #f5f5f5;
    /* Light neutral */
    --neutral-200: #e5e5e5;
    /* Light gray */
    --neutral-300: #d4d4d4;
    /* Medium-light gray */
    --neutral-400: #a3a3a3;
    /* Medium gray */
    --neutral-500: #737373;
    /* Base gray */
    --neutral-600: #525252;
    /* Dark gray */
    --neutral-700: #404040;
    /* Darker gray */
    --neutral-800: #262626;
    /* Dark gray */
    --neutral-900: #171717;
    /* Darkest gray */

    /* Background Colors */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-light-secondary: #fafbfc;
    --bg-gray: #e9ecef;
    --bg-gray-dark: #dee2e6;
    --bg-black: #000000;

    /* Text Colors */
    --text-dark: #1a1a1a;
    --text-primary: #495057;
    --text-secondary: #6c757d;
    --text-muted: #212529;

    /* Modern Status Colors - Auto-generated from business colors */
    --success-color: var(--business-success);
    --success-light: #34d399;
    /* Light emerald */
    --success-lighter: #6ee7b7;
    /* Lighter emerald */
    --success-dark: #059669;
    /* Dark emerald */
    --success-darker: #047857;
    /* Darker emerald */
    --success-alt: var(--success-color);

    --warning-color: var(--business-warning);
    --warning-light: #fbbf24;
    /* Light amber */
    --warning-lighter: #fcd34d;
    /* Lighter amber */
    --warning-dark: #d97706;
    /* Dark amber */
    --warning-darker: #b45309;
    /* Darker amber */

    --danger-color: var(--business-danger);
    --danger-light: #f87171;
    /* Light red */
    --danger-lighter: #fca5a5;
    /* Lighter red */
    --danger-dark: #dc2626;
    /* Dark red */
    --danger-darker: #b91c1c;
    /* Darker red */

    --info-color: var(--business-info);
    --info-light: #22d3ee;
    /* Light cyan */
    --info-lighter: #67e8f9;
    /* Lighter cyan */
    --info-dark: #0891b2;
    /* Dark cyan */
    --info-darker: #0e7490;
    /* Darker cyan */
    --info-alt: #3b82f6;
    /* Modern blue alternative */
    --info-alt-dark: #2563eb;
    /* Dark blue */
    --info-alt-darker: #1d4ed8;
    /* Darker blue */

    /* Bootstrap Colors - Modern Palette */
    /* Bootstrap Variables - Automatically use business colors */
    --bs-primary: var(--business-primary);
    --bs-primary-dark: var(--primary-dark);
    --bs-secondary: var(--business-secondary);
    --bs-success: var(--business-success);
    --bs-info: var(--business-info);
    --bs-warning: var(--business-warning);
    --bs-danger: var(--business-danger);
    --bs-light: #f9fafb;
    /* Modern light gray */
    --bs-dark: #1f2937;
    /* Modern dark gray */
    --bs-white: #ffffff;
    --bs-black: #000000;

    /* Custom Colors from style.default.premium.css */
    --bs-red: #ff7676;
    --bs-yellow: #eef157;
    --bs-orange: #ffc36d;
    --bs-faintGreen: #54e69d;
    --bs-violet: #796AEE;
    --bs-paleBlue: #85b4f2;
    --bs-darkBlue: #2f333e;
    --bs-sidebar-bg: #30323e;

    /* RGB Variants for Bootstrap Colors */
    --bs-primary-rgb: 6, 13, 71;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 40, 167, 69;
    --bs-info-rgb: 23, 162, 184;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 52, 58, 64;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-red-rgb: 255, 118, 118;
    --bs-yellow-rgb: 238, 241, 87;
    --bs-orange-rgb: 255, 195, 109;
    --bs-faintGreen-rgb: 84, 230, 157;
    --bs-violet-rgb: 121, 106, 238;
    --bs-paleBlue-rgb: 133, 180, 242;
    --bs-darkBlue-rgb: 47, 51, 62;
    --bs-sidebar-bg-rgb: 48, 50, 62;

    /* Secondary Colors */
    --secondary-red: #a52d28;
    --secondary-red-dark: #9c2722;
    --secondary-red-darker: #b02a37;

    /* Orange/Error Colors */
    --orange-color: #fd7e14;
    --orange-dark: #e55a00;

    /* Modern Gradient Colors (Primary: business-primary, accents electric blue) */
    --gradient-primary: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 80%, var(--primary-lightest) 100%);
    --gradient-primary-light: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-lighter) 50%, var(--primary-lightest) 100%);
    --gradient-primary-lighter: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-lightest) 50%, #5da3ff 100%);
    --gradient-primary-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--primary-light) 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 30%, #34d399 70%, #6ee7b7 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 30%, #fbbf24 70%, #fcd34d 100%);
    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 30%, #f87171 70%, #fca5a5 100%);
    --gradient-info: linear-gradient(135deg, var(--info-dark) 0%, #00caf5 30%, #22d3ee 70%, #67e8f9 100%);

    /* Sidebar State Variables (centralize colors for easier future updates) */
    --sidebar-active-bg: var(--gradient-primary-dark);
    --sidebar-active-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    --sidebar-hover-bg: rgba(24, 74, 143, 0.12);
    --sidebar-hover-text-color: var(--primary-color);
    --sidebar-hover-shadow: 0 2px 6px var(--primary-rgba-8), 0 1px 3px rgba(0, 0, 0, 0.04);
    --sidebar-active-hover-shadow: 0 4px 12px var(--primary-rgba-25), 0 2px 6px rgba(0, 0, 0, 0.08);
    --sidebar-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Modern Background Gradients */
    --bg-gradient-light: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
    --bg-gradient-mid: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --bg-gradient-end: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);

    /* Modern Shadow Colors */
    --shadow-primary: 0 4px 14px 0 rgba(20, 15, 84, 0.15);
    --shadow-primary-lg: 0 10px 25px 0 rgba(20, 15, 84, 0.2);
    --shadow-success: 0 4px 14px 0 rgba(16, 185, 129, 0.15);
    --shadow-warning: 0 4px 14px 0 rgba(245, 158, 11, 0.15);
    --shadow-danger: 0 4px 14px 0 rgba(239, 68, 68, 0.15);
    --shadow-info: 0 4px 14px 0 rgba(6, 182, 212, 0.15);

    /* Transparency/Alpha Colors */
    --primary-alpha-light: rgba(20, 15, 84, 0.14);
    --secondary-alpha-light: #6c757d23;

    /* RGBA Alpha Variants for Primary Color (#060d47) */
    --primary-rgba-05: rgba(6, 13, 71, 0.05);
    --primary-rgba-10: rgba(6, 13, 71, 0.1);
    --primary-rgba-15: rgba(6, 13, 71, 0.15);
    --primary-rgba-20: rgba(6, 13, 71, 0.2);
    --primary-rgba-25: rgba(6, 13, 71, 0.25);
    --primary-rgba-30: rgba(6, 13, 71, 0.3);
    --primary-rgba-40: rgba(6, 13, 71, 0.4);
    --primary-rgba-50: rgba(6, 13, 71, 0.5);

    --secondary-rgba-05: rgba(16, 160, 218, 0.05);
    --secondary-rgba-10: rgba(16, 160, 218, 0.1);
    --secondary-rgba-15: rgba(16, 160, 218, 0.15);
    --secondary-rgba-20: rgba(16, 160, 218, 0.2);
    --secondary-rgba-25: rgba(16, 160, 218, 0.25);
    --secondary-rgba-30: rgba(16, 160, 218, 0.3);
    --secondary-rgba-40: rgba(16, 160, 218, 0.4);
    --secondary-rgba-50: rgba(16, 160, 218, 0.5);

    /* RGBA Alpha Variants for Primary Dark (#040a35) */
    --primary-dark-rgba-05: rgba(4, 10, 53, 0.05);

    /* RGBA Alpha Variants for Primary Light (#1a2968) */
    --primary-light-rgba-05: rgba(26, 41, 104, 0.05);
    --primary-light-rgba-10: rgba(26, 41, 104, 0.1);
    --primary-light-rgba-15: rgba(26, 41, 104, 0.15);
    --primary-light-rgba-20: rgba(26, 41, 104, 0.2);
    --primary-light-rgba-30: rgba(26, 41, 104, 0.3);

    /* RGBA Alpha Variants for Status Colors */
    --danger-rgba-02: rgba(220, 53, 69, 0.02);
    --danger-rgba-03: rgba(220, 53, 69, 0.03);
    --danger-rgba-05: rgba(220, 53, 69, 0.05);
    --danger-rgba-08: rgba(220, 53, 69, 0.08);
    --danger-rgba-10: rgba(220, 53, 69, 0.1);
    --danger-rgba-15: rgba(220, 53, 69, 0.15);
    --danger-rgba-20: rgba(220, 53, 69, 0.2);
    --danger-rgba-30: rgba(220, 53, 69, 0.3);
    --danger-dark-rgba-30: rgba(200, 35, 51, 0.3);
    --danger-darker-rgba-30: rgba(187, 45, 59, 0.3);
    --danger-light-rgba-30: rgba(190, 58, 52, 0.3);

    --warning-rgba-02: rgba(255, 193, 7, 0.02);
    --warning-rgba-03: rgba(255, 193, 7, 0.03);
    --warning-rgba-05: rgba(255, 193, 7, 0.05);
    --warning-rgba-08: rgba(255, 193, 7, 0.08);
    --warning-rgba-10: rgba(255, 193, 7, 0.10);
    --warning-rgba-15: rgba(255, 193, 7, 0.15);
    --warning-rgba-20: rgba(255, 193, 7, 0.2);
    --warning-rgba-30: rgba(255, 193, 7, 0.3);

    --success-rgba-20: rgba(25, 135, 84, 0.2);
    --success-rgba-30: rgba(25, 135, 84, 0.3);
    --success-light-rgba-30: rgba(40, 167, 69, 0.3);
    --success-lighter-rgba-30: rgba(32, 201, 151, 0.3);

    --info-rgba-20: rgba(13, 202, 240, 0.2);
    --info-rgba-30: rgba(13, 202, 240, 0.3);
    --info-alt-rgba-10: rgba(23, 162, 184, 0.1);
    --info-alt-rgba-30: rgba(23, 162, 184, 0.3);

    /* Common RGBA Colors */
    --black-rgba-05: rgba(0, 0, 0, 0.05);
    --black-rgba-06: rgba(0, 0, 0, 0.06);
    --black-rgba-10: rgba(0, 0, 0, 0.1);
    --black-rgba-12: rgba(0, 0, 0, 0.12);
    --black-rgba-15: rgba(0, 0, 0, 0.15);
    --black-rgba-18: rgba(0, 0, 0, 0.18);

    --white-rgba-10: rgba(255, 255, 255, 0.1);
    --white-rgba-30: rgba(255, 255, 255, 0.3);
}