/**
 * REELEX - Unified Brand Color System
 * Extracted from official logo
 * Primary Color: #2e3192 (Royal Blue)
 * 
 * This file provides all color variables used throughout the application.
 * Always use CSS variables for consistency and easy theme management.
 */

:root {
    /* ============================================
       PRIMARY BRAND COLORS (From Logo)
       ============================================ */
    
    /* Primary - Royal Blue */
    --primary-color: #2e3192;
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #2e3192;
    --primary-600: #252b7a;
    --primary-700: #1e2362;
    --primary-800: #171b4a;
    --primary-900: #101332;
    --primary-950: #0a0d1f;
    
    /* Primary RGB (for rgba usage) */
    --primary-color-rgb: 46, 49, 146;
    --primary-rgb: 46, 49, 146;
    
    /* Secondary - Complementary Teal/Green */
    --secondary-color: #00a99d;
    --secondary-50: #e6f7f6;
    --secondary-100: #b3e8e4;
    --secondary-200: #80d9d2;
    --secondary-300: #4dcac0;
    --secondary-400: #1abbae;
    --secondary-500: #00a99d;
    --secondary-600: #008b82;
    --secondary-700: #006d67;
    --secondary-800: #004f4c;
    --secondary-900: #003131;
    
    /* Secondary RGB */
    --secondary-color-rgb: 0, 169, 157;
    --secondary-rgb: 0, 169, 157;
    
    /* Accent - Warm Orange for CTAs */
    --accent-color: #f39c12;
    --accent-50: #fef3e6;
    --accent-100: #fce4b3;
    --accent-200: #fad580;
    --accent-300: #f8c64d;
    --accent-400: #f6b71a;
    --accent-500: #f39c12;
    --accent-600: #d68910;
    --accent-700: #b9760e;
    --accent-800: #9c630c;
    --accent-900: #7f500a;
    
    /* Accent RGB */
    --accent-color-rgb: 243, 156, 18;
    --accent-rgb: 243, 156, 18;
    
    /* ============================================
       FUNCTIONAL COLORS
       ============================================ */
    
    /* Success - Green */
    --success-color: #10b981;
    --success-light: #34d399;
    --success-dark: #059669;
    --success-rgb: 16, 185, 129;
    
    /* Warning - Yellow */
    --warning-color: #f59e0b;
    --warning-light: #fbbf24;
    --warning-dark: #d97706;
    --warning-rgb: 245, 158, 11;
    
    /* Danger - Red */
    --danger-color: #ef4444;
    --danger-light: #f87171;
    --danger-dark: #dc2626;
    --danger-rgb: 239, 68, 68;
    
    /* Info - Blue */
    --info-color: #3b82f6;
    --info-light: #60a5fa;
    --info-dark: #2563eb;
    --info-rgb: 59, 130, 246;
    
    /* ============================================
       NEUTRAL COLORS (Grays)
       ============================================ */
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;
    
    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    
    --body-bg: #f8f9fa;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --bg-light: #ffffff;
    --bg-gray: #f9fafb;
    --bg-light-gray: #f3f4f6;
    --bg-dark: #1f2937;
    --bg-darker: #111827;
    
    /* ============================================
       TEXT COLORS
       ============================================ */
    
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
    --text-white: #ffffff;
    --text-dark: #111827;
    --text-gray: #4b5563;
    --text-lighter: #9ca3af;
    
    /* ============================================
       BORDER COLORS
       ============================================ */
    
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    --card-border: #e0e0e0;
    --divider-color: #e9ecef;
    
    /* ============================================
       SIDEBAR COLORS
       ============================================ */
    
    --sidebar-bg-start: #2e3192;
    --sidebar-bg-end: #1a1a2e;
    --sidebar-text: #ffffff;
    --sidebar-active-bg: #00a99d;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-icon: #ffffff;
    
    /* ============================================
       HEADER/NAVBAR COLORS
       ============================================ */
    
    --header-bg: #ffffff;
    --header-text: #333333;
    --header-link: #2e3192;
    --header-link-hover: #00a99d;
    
    /* ============================================
       FOOTER COLORS
       ============================================ */
    
    --footer-bg: #ffffff;
    --footer-text: #666666;
    --footer-link: #2e3192;
    --footer-border: #e0e0e0;
    
    /* ============================================
       SHADOW COLORS
       ============================================ */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    --card-shadow: rgba(0, 0, 0, 0.05);
    --color-shadow-sm: rgba(46, 49, 146, 0.05);
    --color-shadow-md: rgba(46, 49, 146, 0.1);
    --color-shadow-lg: rgba(46, 49, 146, 0.15);
    --color-shadow-xl: rgba(46, 49, 146, 0.2);
    
    /* ============================================
       GLOW EFFECTS (for hover states)
       ============================================ */
    
    --glow-primary: 0 0 20px rgba(46, 49, 146, 0.3);
    --glow-secondary: 0 0 20px rgba(0, 169, 157, 0.3);
    --glow-accent: 0 0 20px rgba(243, 156, 18, 0.3);
    
    /* ============================================
       BUTTON COLORS
       ============================================ */
    
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: #ffffff;
    
    /* ============================================
       FRONTEND COLORS (Public Pages)
       ============================================ */
    
    --frontend-primary: var(--primary-color);
    --frontend-secondary: var(--secondary-color);
    --frontend-bg: #ffffff;
    --frontend-text: #333333;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"],
.dark {
    --body-bg: #111827;
    --content-bg: #1f2937;
    --card-bg: #1f2937;
    --bg-light: #111827;
    --bg-gray: #1f2937;
    --bg-light-gray: #374151;
    --bg-dark: #030712;
    --bg-darker: #000000;
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    --text-dark: #f9fafb;
    --text-gray: #d1d5db;
    --text-light: #9ca3af;
    --text-lighter: #6b7280;
    
    --border-color: #374151;
    --border-light: #4b5563;
    --border-dark: #1f2937;
    --card-border: #374151;
    
    --header-bg: #1f2937;
    --header-text: #f9fafb;
    
    --footer-bg: #1f2937;
    --footer-text: #d1d5db;
}

/* ============================================
   UTILITY CLASSES FOR QUICK COLOR APPLICATION
   ============================================ */

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-info { color: var(--info-color) !important; }

.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-700) 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-700) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-700) 100%);
}

.gradient-sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
}