/* Global CSS Styles */
:root {
    /* Primary Colors */
    --primary: #35A8F0;
    --primary-light: #89CFF0;
    --primary-dark: #1E90FF;
    
    /* Blue Spectrum */
    --aqua: #7FDBFF;
    --baby-blue: #89CFF0;
    --cornflower-blue: #6495ED;
    --electric-blue: #7DF9FF;
    --cyan: #00FFFF;
    
    /* Secondary Colors */
    --secondary: #5FD3B3;
    --secondary-light: #98FFC7;
    --secondary-dark: #2E8B57;
    
    /* Greens & Turquoise */
    --jade-green: #00A86B;
    --turquoise: #40E0D0;
    --aquamarine: #7FFFD4;
    --mint-green: #98FF98;
    --emerald-green: #50C878;
    --emerald: #00A86B;

    /* Accent Colors */
    --accent-primary: #CCCCFF;
    --accent-primary-light: #E6E6FF;
    --accent-primary-dark: #9999CC;
    --periwinkle: #CCCCFF;
    --light-violet: #C8A2C8;
    --lavender-white: #E6E6FA;
    --gold: #FFD700;
    --light-gold: #FFE44D;
    --alert: #F0354B;
    --alert-red: #F0354B;
    --primary-blue: #35A8F0;

    /* Status Colors */
    --success: #5FD3B3;
    --warning: #FFD700;
    --danger: #F0354B;
    --info: #35A8F0;

    /* Gradient System */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--aqua) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--jade-green) 0%, var(--mint-green) 100%);
    --gradient-accent: linear-gradient(135deg, var(--periwinkle) 0%, var(--lavender-white) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--light-gold) 100%);
    --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--primary-dark) 0%, var(--accent-primary) 50%,
    var(--periwinkle) 100%);
    
    /* Animation System */
    --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Animation Durations */
    --micro: 0.15s;
    --fast: 0.3s;
    --normal: 0.5s;
    --slow: 0.8s;
    
    /* Hover Effects */
    --lift: translateY(-6px);
    --press: translateY(2px);
    --glow: 0 12px 40px rgba(53, 168, 240, 0.25);
    --glow-accent: 0 8px 32px rgba(204, 204, 255, 0.3);
    --glow-success: 0 8px 32px rgba(95, 211, 179, 0.3);
    
    /* Neutral Colors */
    --bg-primary: #FAF5FF;
    --bg-secondary: #F0EBFF;
    --bg-tertiary: #E8E3FF;
    --bg-card: #FFFFFF;
    --bg-navbar: #F0EBFF;
    --bg-footer: #E8E3FF;
    --bg-sidebar: var(--gradient-sidebar);
    --bg-tooltip: #334155;
    
    /* Text Colors */
    --text-primary: #1A1A2E;
    --text-secondary: #4A5568;
    --text-muted: #718096;
    --text-light: #F8F7FF;
    
    /* Borders */
    --border-light: #E2E8FF;
    --border-medium: #CBD5FF;
    --border-dark: #94A3FF;
    --border-radius: 16px;
    --border-radius-sm: 12px;
    --border-radius-lg: 20px;
    --border-color: #E5E7FF;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(53, 168, 240, 0.08);
    --shadow-md: 0 8px 24px rgba(53, 168, 240, 0.12);
    --shadow-lg: 0 16px 40px rgba(53, 168, 240, 0.16);
    --shadow-xl: 0 24px 60px rgba(53, 168, 240, 0.2);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --section-gap: 24px;
    
    /* Transitions */
    --transition: all 0.3s var(--smooth);
    --transition-fast: all 0.15s var(--smooth);
    --transition-slow: all 0.5s var(--smooth);
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Primary Dark Mode Colors */
    --primary: #4FB8FF;
    --primary-light: #7FCFFF;
    --primary-dark: #1E7AC7;
    
    --secondary: #6FE8C5;
    --secondary-light: #A3FFD6;
    --secondary-dark: #3CB371;
    
    --accent-primary: #B8B8FF;
    --accent-primary-light: #D4D4FF;
    --accent-primary-dark: #8C8CD9;

    /* Gradients for Dark Mode */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--electric-blue) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--jade-green) 0%, var(--turquoise) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--lavender-white) 100%);
    --gradient-card: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--primary-dark) 0%, var(--accent-primary-dark) 100%);

    /* Neutral Dark Mode Colors */
    --bg-primary: #0F1A2A;
    --bg-secondary: #1A2536;
    --bg-tertiary: #243142;
    --bg-card: #1E2A3A;
    --bg-navbar: #1A2536;
    --bg-footer: #243142;
    
    --text-primary: #F0F4FF;
    --text-secondary: #CBD5E0;
    --text-muted: #8A9BB0;
    --text-light: #F8F7FF;
    
    --border-light: #2D3748;
    --border-medium: #4A5568;
    --border-dark: #64748B;
    --border-color: #374151;
    
    /* Dark Mode Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);
    --glow: 0 12px 40px rgba(79, 184, 255, 0.2);
    --glow-accent: 0 8px 32px rgba(184, 184, 255, 0.25);
}

/* Animations */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(53, 168, 240, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(53, 168, 240, 0.8), 0 0 40px rgba(53, 168, 240, 0.6);
    }
}

@keyframes border-flow {
    0%, 100% {
        background-position: 0 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility Classes */
.anim-float {
    animation: float 3s var(--gentle) infinite;
}

.anim-pulse-glow {
    animation: pulse-glow 2s var(--smooth) infinite;
}

.anim-fade-in-up {
    animation: fade-in-up 0.6s var(--smooth) both;
}

.anim-slide-in-right {
    animation: slide-in-right 0.5s var(--smooth) both;
}

.anim-shimmer {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s var(--smooth) infinite;
}

/* Typography */
:root {
    --font-sans: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* Layout */
:root {
    --header-height: 70px;
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 70px;
    --container-padding: 1.5rem;
    --section-padding: 5rem 0;
    --max-content-width: 1440px;
}

/* Breakpoints */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}