/* 
 * Professional Dark-Red Theme - Coolors Palette
 * https://coolors.co/0b090a-161a1d-660708-a4161a-ba181b-e5383b-b1a7a6-d3d3d3-f5f3f4-ffffff
 * Generated: October 17, 2025
 */

:root {
    /* Primary Colors from Coolors Palette */
    --dark-charcoal: #0B090A;        /* Very dark charcoal - darkest backgrounds */
    --dark-slate: #161A1D;           /* Dark slate - secondary dark */
    --deep-burgundy: #660708;        /* Deep burgundy - dark accent */
    --dark-red: #A4161A;             /* Dark red - primary accent */
    --bright-red: #BA181B;           /* Bright red - main accent */
    --light-red: #E5383B;            /* Light red - secondary accent */
    --warm-gray: #B1A7A6;            /* Warm gray - muted elements */
    --light-gray: #D3D3D3;           /* Light gray - borders */
    --off-white: #F5F3F4;            /* Off-white - light background */
    --pure-white: #FFFFFF;           /* Pure white - surfaces */
    
    /* Extended Palette - Functional Colors */
    --primary-color: #BA181B;         /* Main accent color */
    --primary-hover: #A4161A;         /* Darker red for hover states */
    --primary-light: #E5383B;         /* Light red for subtle elements */
    --primary-dark: #660708;          /* Deep burgundy for emphasis */
    
    --success-color: #28A745;         /* Green for success states */
    --success-light: #D4EDDA;         /* Light success background */
    --success-dark: #155724;          /* Dark success text */
    
    --warning-color: #FFC107;         /* Amber for warning states */
    --warning-light: #FFF3CD;         /* Light warning background */
    --warning-dark: #856404;          /* Dark warning text */
    
    --error-color: #BA181B;           /* Error states (same as primary) */
    --error-light: #F8D7DA;           /* Light error background */
    --error-dark: #660708;            /* Dark error text */
    
    --info-color: #17A2B8;            /* Teal for info states */
    --info-light: #D1ECF1;            /* Light info background */
    --info-dark: #0C5460;             /* Dark info text */
    
    /* Background Colors */
    --background-primary: #FFFFFF;    /* Pure white for main content */
    --background-secondary: #F5F3F4;  /* Off-white for secondary areas */
    --background-tertiary: #D3D3D3;   /* Light gray for subtle areas */
    --background-dark: #161A1D;       /* Dark slate for dark themes */
    --background-darkest: #0B090A;    /* Very dark for maximum contrast */
    
    /* Surface Colors */
    --surface-color: #FFFFFF;         /* Card/surface backgrounds */
    --surface-hover: #F5F3F4;         /* Hover states on surfaces */
    --surface-pressed: #D3D3D3;       /* Pressed states */
    --surface-dark: #161A1D;          /* Dark surface variant */
    --surface-darkest: #0B090A;       /* Darkest surface variant */
    
    /* Text Colors */
    --text-primary: #0B090A;          /* Main text color */
    --text-secondary: #161A1D;        /* Secondary text */
    --text-muted: #B1A7A6;            /* Muted/disabled text */
    --text-on-primary: #FFFFFF;       /* Text on primary color backgrounds */
    --text-on-dark: #FFFFFF;          /* Text on dark backgrounds */
    --text-on-light: #0B090A;         /* Text on light backgrounds */
    --text-accent: #BA181B;           /* Accent text color */
    
    /* Border Colors */
    --border-color: #D3D3D3;          /* Default borders */
    --border-light: #F5F3F4;          /* Light borders */
    --border-dark: #B1A7A6;           /* Emphasized borders */
    --border-focus: #BA181B;          /* Focus state borders */
    --border-accent: #E5383B;         /* Accent borders */
    
    /* Shadow Colors */
    --shadow-color: rgba(11, 9, 10, 0.15);
    --shadow-soft: 0 2px 8px var(--shadow-color);
    --shadow-medium: 0 4px 16px var(--shadow-color);
    --shadow-strong: 0 8px 32px var(--shadow-color);
    
    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, #BA181B 0%, #E5383B 100%);
    --gradient-dark: linear-gradient(135deg, #0B090A 0%, #161A1D 100%);
    --gradient-accent: linear-gradient(135deg, #660708 0%, #A4161A 100%);
    --gradient-background: linear-gradient(135deg, #F5F3F4 0%, #FFFFFF 100%);
    --gradient-navbar: linear-gradient(135deg, #0B090A 0%, #161A1D 100%);
    
    /* Status Colors */
    --status-active: #28A745;
    --status-inactive: #B1A7A6;
    --status-pending: #FFC107;
    --status-error: #BA181B;
    --status-success: #28A745;
    --status-warning: #FFC107;
    
    /* Interactive States */
    --hover-overlay: rgba(186, 24, 27, 0.08);
    --focus-overlay: rgba(186, 24, 27, 0.12);
    --pressed-overlay: rgba(186, 24, 27, 0.16);
    --hover-overlay-light: rgba(229, 56, 59, 0.05);
    
    /* Navigation Colors */
    --nav-background: var(--background-darkest);
    --nav-text: var(--text-on-dark);
    --nav-text-hover: var(--light-red);
    --nav-active: var(--primary-color);
    --nav-accent: var(--primary-light);
    
    /* Card Colors */
    --card-background: var(--surface-color);
    --card-border: var(--border-light);
    --card-shadow: var(--shadow-soft);
    --card-hover-shadow: var(--shadow-medium);
    
    /* Form Colors */
    --input-background: var(--background-primary);
    --input-border: var(--border-color);
    --input-border-focus: var(--border-focus);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    
    /* Button Colors */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-text: var(--text-on-primary);
    --btn-secondary-bg: var(--background-secondary);
    --btn-secondary-hover: var(--surface-pressed);
    --btn-secondary-text: var(--text-primary);
    --btn-accent-bg: var(--primary-light);
    --btn-accent-hover: var(--primary-color);
    --btn-accent-text: var(--text-on-primary);
    
    /* Table Colors */
    --table-background: var(--surface-color);
    --table-header-bg: var(--background-secondary);
    --table-border: var(--border-light);
    --table-hover: var(--surface-hover);
    --table-stripe: var(--background-secondary);
    
    /* Modal Colors */
    --modal-backdrop: rgba(11, 9, 10, 0.6);
    --modal-background: var(--surface-color);
    --modal-border: var(--border-color);
    --modal-shadow: var(--shadow-strong);
    
    /* Specific Component Colors */
    --stat-card-primary: var(--primary-color);
    --stat-card-success: var(--success-color);
    --stat-card-warning: var(--warning-color);
    --stat-card-info: var(--info-color);
    --stat-card-danger: var(--error-color);
    --stat-card-secondary: var(--warm-gray);
}

/* Dark Theme Override (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --background-primary: #161A1D;
        --background-secondary: #0B090A;
        --background-tertiary: #660708;
        --surface-color: #161A1D;
        --surface-hover: #660708;
        --surface-pressed: #A4161A;
        --text-primary: #F5F3F4;
        --text-secondary: #D3D3D3;
        --text-muted: #B1A7A6;
        --border-color: #660708;
        --border-light: #161A1D;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --nav-background: var(--background-secondary);
        --table-stripe: #0B090A;
    }
}