/*
 * AIM Comprehensive Color System
 * Created: May 2025
 * Purpose: Centralized color definitions for the AIM platform
 * Version: 2.0 - Comprehensive refactor
 */

:root {
    /* 
     * ==========================================================================
     * 1. FOUNDATION COLORS
     * ==========================================================================
     */
    
    /* Absolute colors */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Brand Foundation Colors */
    --cornerstone-teal-base: #003e52;
    --cornerstone-green-base: #00CCA0;
    --aim-blue-base: #1b3556;
    --aim-accent-base: #007bff;
    
    /* 
     * ==========================================================================
     * 2. SEMANTIC COLOR PALETTES
     * ==========================================================================
     */
    
    /* Success Palette (Green spectrum) */
    --color-success-darkest: #005A00;
    --color-success-dark: #008000;
    --color-success-medium: #28a745;
    --color-success-light: #00C000;
    --color-success-lightest: #c6efce;
    
    /* Warning Palette (Orange/Amber spectrum) */
    --color-warning-darkest: #8B4000;
    --color-warning-dark: #856404;
    --color-warning-medium: #ffc107;
    --color-warning-light: #FFA500;
    --color-warning-lightest: #ffeb9c;
    
    /* Danger Palette (Red spectrum) */
    --color-danger-darkest: #8B0000;
    --color-danger-dark: #721c24;
    --color-danger-medium: #dc3545;
    --color-danger-light: #ff4d5a;
    --color-danger-lightest: #ffc7ce;
    
    /* Info Palette (Blue spectrum) */
    --color-info-darkest: #0c2961;
    --color-info-dark: #1b4b72;
    --color-info-medium: #17a2b8;
    --color-info-light: #4da3ff;
    --color-info-lightest: #d1ecf1;
    
    /* Neutral Palette (Gray spectrum) */
    --color-neutral-darkest: #212529;
    --color-neutral-dark: #343a40;
    --color-neutral-medium: #6c757d;
    --color-neutral-light: #adb5bd;
    --color-neutral-lightest: #f8f9fa;
    
    /* 
     * ==========================================================================
     * 3. COMPONENT-SPECIFIC COLORS
     * ==========================================================================
     */
    
    /* Milestone Status Colors */
    --milestone-bg-default: #fff;
    --milestone-title-default: #333;
    --milestone-success-bg: var(--color-success-lightest);
    --milestone-success-title: #006100;
    --milestone-warning-bg: var(--color-warning-lightest);
    --milestone-warning-title: #9c5700;
    --milestone-danger-bg: var(--color-danger-lightest);
    --milestone-danger-title: #9c0006;
    
    /* Action Colors */
    --action-break-bg: var(--color-success-medium);
    --action-break-text: var(--color-white);
    --action-break-border: var(--color-success-dark);
    --action-sort-bg: #d946ef; /* magenta */
    --action-sort-text: var(--color-white);
    --action-sort-border: #a855f7; /* purple */
    --action-filter-bg: #f97316; /* orange */
    --action-filter-text: var(--color-white);
    --action-filter-border: #ea580c; /* darkorange */
    
    /* 
     * ==========================================================================
     * 4. THEME SYSTEM - AIM LIGHT
     * ==========================================================================
     */
    
    /* AIM Light - Primary Colors */
    --aim-light-primary: #1E3A5F;
    --aim-light-secondary: #3A5780;
    --aim-light-accent: #E8A450;
    
    /* AIM Light - Background Colors */
    --aim-light-bg-page: #f8f8f2;
    --aim-light-bg-card: rgba(30, 58, 95, 0.15);
    --aim-light-bg-header: rgba(30, 58, 95, 0.25);
    --aim-light-dashboard-bg: #fff;
    
    /* AIM Light - Border Colors */
    --aim-light-border-subtle: rgba(30, 58, 95, 0.25);
    --aim-light-border-strong: rgba(30, 58, 95, 0.4);
    
    /* AIM Light - Text Colors */
    --aim-light-text-primary: #333333;
    --aim-light-text-secondary: #666666;
    --aim-light-text-on-color: #FFFFFF;
    
    /* AIM Light - Interactive Colors */
    --aim-light-interactive: #4378B5;
    --aim-light-interactive-hover: #3A6799;
    
    /* AIM Light - Component Colors */
    --aim-light-site-info-bg-selected: #acd1e9;
    --aim-light-input-background: #6c757d;
    --aim-light-card-shadow: 0 2px 5px rgba(30, 58, 95, 0.1);
    
    /* AIM Light - Card Variables */
    --aim-light-card-bg: #ffffff;
    --aim-light-card-border: rgba(30, 58, 95, 0.2);
    --aim-light-card-header-bg: rgba(30, 58, 95, 0.1);

    /* AIM Light - Panel Variables (Lighter Menu Panel) */
    --aim-light-panel-bg: #2a4a6b; /* Primary lightened by 15% for less heavy appearance */
    --aim-light-panel-header-bg: #253f5c; /* Slightly darker than bg for hierarchy */
    --aim-light-panel-text: #ffffff; /* High contrast for readability */
    --aim-light-panel-text-secondary: #e8f0f7; /* Slightly dimmed for secondary text */
    --aim-light-panel-border: #3a5780; /* Lighter border */
    --aim-light-panel-hover: #34546e; /* Subtle hover state */
    
    /* AIM Light - Posts Panel Variables (Light Background) */
    --aim-light-posts-panel-bg: var(--aim-light-bg-page); /* Use page background for content separation */
    --aim-light-posts-panel-text: var(--aim-light-text-primary); /* Use primary text color */
    
    /* AIM Light - Navbar Variables (Lighter for Visual Hierarchy) */
    --aim-light-navbar-bg: #2a4a6b; /* Primary lightened by 15% for subtler presence */
    --aim-light-navbar-text: #ffffff; /* Maintain high contrast */
    --aim-light-navbar-hover: #3a5780; /* Lighter hover state */
    
    /* AIM Light - Posts Panel Variables (Use theme background) */
    --aim-light-posts-bg: var(--aim-light-bg-page); /* Use page background for content separation */
    --aim-light-posts-text: var(--aim-light-text-primary); /* Use primary text color */
    
    /* 
     * ==========================================================================
     * 5. THEME SYSTEM - AIM DARK
     * ==========================================================================
     */
    
    /* AIM Dark - Primary Colors */
    --aim-dark-primary: #6272a4;
    --aim-dark-secondary: #44475a;
    --aim-dark-accent: #bd93f9;
    --aim-dark-accent2: #8be9fd;
    
    /* AIM Dark - Background Colors */
    --aim-dark-bg-page: #282a36;
    --aim-dark-bg-card: rgba(98, 114, 164, 0.2);
    --aim-dark-bg-header: rgba(98, 114, 164, 0.3);
    --aim-dark-dashboard-bg: #444758;
    
    /* AIM Dark - Border Colors */
    --aim-dark-border-subtle: rgba(68, 71, 90, 0.6);
    --aim-dark-border-strong: rgba(98, 114, 164, 0.7);
    
    /* AIM Dark - Text Colors */
    --aim-dark-text-primary: #f8f8f2;
    --aim-dark-text-secondary: #BBBBBB;
    --aim-dark-text-on-color: #FFFFFF;
    
    /* AIM Dark - Interactive Colors */
    --aim-dark-interactive: #bd93f9;
    --aim-dark-interactive-hover: #a97ff0;
    --aim-dark-alert: #ff5555;
    
    /* AIM Dark - Component Colors */
    --aim-dark-site-info-bg-selected: #444758;
    --aim-dark-input-background: #444758;
    --aim-dark-card-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    
    /* AIM Dark - Card Variables */
    --aim-dark-card-bg: #44475a;
    --aim-dark-card-border: rgba(98, 114, 164, 0.3);
    --aim-dark-card-header-bg: rgba(98, 114, 164, 0.2);

    /* AIM Dark - Panel Variables (Lighter Menu Panel) */
    --aim-dark-panel-bg: #7984b3; /* Primary lightened by 15% for less heavy appearance */
    --aim-dark-panel-header-bg: #6f80b0; /* Slightly darker than bg for hierarchy */
    --aim-dark-panel-text: #f8f8f2; /* High contrast light text */
    --aim-dark-panel-text-secondary: #d0d0d0; /* Slightly dimmed for secondary text */
    --aim-dark-panel-border: #8a95c7; /* Lighter border */
    --aim-dark-panel-hover: #8590bb; /* Subtle hover state */
    
    /* AIM Dark - Posts Panel Variables (Light Background) */
    --aim-dark-posts-panel-bg: var(--aim-dark-bg-page); /* Use page background for content separation */
    --aim-dark-posts-panel-text: var(--aim-dark-text-primary); /* Use primary text color */
    
    /* AIM Dark - Navbar Variables (Lighter for Visual Hierarchy) */
    --aim-dark-navbar-bg: #7984b3; /* Primary lightened by 15% for subtler presence */
    --aim-dark-navbar-text: #f8f8f2; /* Maintain high contrast */
    --aim-dark-navbar-hover: #8a95c7; /* Lighter hover state */
    
    /* AIM Dark - Posts Panel Variables (Use theme background) */
    --aim-dark-posts-bg: var(--aim-dark-bg-page); /* Use page background for content separation */
    --aim-dark-posts-text: var(--aim-dark-text-primary); /* Use primary text color */
    
    /* 
     * ==========================================================================
     * 6. THEME SYSTEM - CORNERSTONE LIGHT
     * ==========================================================================
     */
    
    /* Cornerstone Light - Primary Colors */
    --cornerstone-light-primary: #003e52;
    --cornerstone-light-secondary: #008E70;
    --cornerstone-light-accent: #00b289;
    
    /* Cornerstone Light - Background Colors */
    --cornerstone-light-bg-page: #FFFFFF;
    --cornerstone-light-bg-card: rgba(0, 62, 82, 0.15);
    --cornerstone-light-bg-header: rgba(0, 62, 82, 0.25);
    --cornerstone-light-dashboard-bg: #f0f0f0;
    
    /* Cornerstone Light - Border Colors */
    --cornerstone-light-border-subtle: rgba(0, 62, 82, 0.2);
    --cornerstone-light-border-strong: rgba(0, 62, 82, 0.35);
    
    /* Cornerstone Light - Text Colors */
    --cornerstone-light-text-primary: #333333;
    --cornerstone-light-text-secondary: #666666;
    --cornerstone-light-text-on-color: #FFFFFF;
    
    /* Cornerstone Light - Interactive Colors */
    --cornerstone-light-interactive: #00b289;
    --cornerstone-light-interactive-hover: #009A75;
    
    /* Cornerstone Light - Component Colors */
    --cornerstone-light-site-info-bg-selected: #668B97;
    --cornerstone-light-input-background: #668B97;
    --cornerstone-light-card-shadow: 0 2px 5px rgba(0, 62, 82, 0.08);
    
    /* Cornerstone Light - Card Variables */
    --cornerstone-light-card-bg: #ffffff;
    --cornerstone-light-card-border: rgba(0, 62, 82, 0.25);
    --cornerstone-light-card-header-bg: rgba(0, 62, 82, 0.1);

    /* Cornerstone Light - Panel Variables (Color Science Based) */
    --cornerstone-light-panel-bg: #003648; /* Primary darkened by 7% for professional teal look */
    --cornerstone-light-panel-header-bg: #002d3a; /* Primary darkened by 15% for hierarchy */
    --cornerstone-light-panel-text: #ffffff; /* High contrast white text */
    --cornerstone-light-panel-text-secondary: #e0f2f5; /* Teal-tinted light text for secondary */
    --cornerstone-light-panel-border: #00515e; /* Primary lightened by 12% for subtle borders */
    --cornerstone-light-panel-hover: #004552; /* Subtle hover state */
    
    /* Cornerstone Light - Navbar Variables (Lighter for Visual Hierarchy) */
    --cornerstone-light-navbar-bg: #00515e; /* Primary lightened by 15% for subtler presence */
    --cornerstone-light-navbar-text: #ffffff; /* Maintain high contrast */
    --cornerstone-light-navbar-hover: #006b7a; /* Lighter hover state */
    
    /* Cornerstone Light - Posts Panel Variables (Use theme background) */
    --cornerstone-light-posts-bg: var(--cornerstone-light-bg-page); /* Use page background for content separation */
    --cornerstone-light-posts-text: var(--cornerstone-light-text-primary); /* Use primary text color */
    
    /* 
     * ==========================================================================
     * 7. THEME SYSTEM - CORNERSTONE DARK
     * ==========================================================================
     */
    
    /* Cornerstone Dark - Primary Colors */
    --cornerstone-dark-primary: #00526B;
    --cornerstone-dark-secondary: #007A61;
    --cornerstone-dark-accent: #00CCA0;
    
    /* Cornerstone Dark - Background Colors */
    --cornerstone-dark-bg-page: #1C2B30;
    --cornerstone-dark-bg-card: rgba(0, 82, 107, 0.25);
    --cornerstone-dark-bg-header: rgba(0, 82, 107, 0.35);
    --cornerstone-dark-dashboard-bg: #253036;
    
    /* Cornerstone Dark - Border Colors */
    --cornerstone-dark-border-subtle: rgba(0, 82, 107, 0.4);
    --cornerstone-dark-border-strong: rgba(0, 122, 97, 0.6);
    
    /* Cornerstone Dark - Text Colors */
    --cornerstone-dark-text-primary: #E8F0F2;
    --cornerstone-dark-text-secondary: #B3C5CB;
    --cornerstone-dark-text-on-color: #FFFFFF;
    
    /* Cornerstone Dark - Interactive Colors */
    --cornerstone-dark-interactive: #00CCA0;
    --cornerstone-dark-interactive-hover: #00E6B5;
    --cornerstone-dark-alert: #FF6B5E;
    
    /* Cornerstone Dark - Component Colors */
    --cornerstone-dark-site-info-bg-selected: rgba(0, 126, 122, 0.4);
    --cornerstone-dark-input-background: rgba(0, 82, 107, 0.4);
    --cornerstone-dark-card-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    
    /* Cornerstone Dark - Card Variables */
    --cornerstone-dark-card-bg: #253036;
    --cornerstone-dark-card-border: rgba(0, 82, 107, 0.4);
    --cornerstone-dark-card-header-bg: rgba(0, 82, 107, 0.3);

    /* Cornerstone Dark - Panel Variables (Color Science Based) */
    --cornerstone-dark-panel-bg: #00526B; /* Use primary directly for strong dark teal presence */
    --cornerstone-dark-panel-header-bg: #004259; /* Primary darkened by 18% for strong hierarchy */
    --cornerstone-dark-panel-text: #E8F0F2; /* High contrast light teal text */
    --cornerstone-dark-panel-text-secondary: #B3C5CB; /* Consistent with existing secondary text */
    --cornerstone-dark-panel-border: #006B84; /* Primary lightened by 20% for subtle borders */
    --cornerstone-dark-panel-hover: #005d77; /* Subtle hover state */
    
    /* Cornerstone Dark - Navbar Variables (Missing - Added for proper contrast) */
    --cornerstone-dark-navbar-bg: #00526B; /* Primary for strong presence */
    --cornerstone-dark-navbar-text: #E8F0F2; /* High contrast light text */
    --cornerstone-dark-navbar-hover: #00CCA0; /* Accent color for hover */
    
    /* 
     * ==========================================================================
     * 8. BACKWARD COMPATIBILITY LAYER
     * ==========================================================================
     */
    
    /* Legacy INS -> AIM Light mappings */
    --ins-primary-color: var(--aim-light-primary);
    --ins-primary-border: var(--aim-light-primary);
    --ins-secondary-color: var(--aim-light-secondary);
    --ins-secondary-border: #6293a4;
    --ins-link-highlight: var(--aim-light-accent);
    --ins-input-background: var(--aim-light-input-background);
    --ins-link-background-color: initial;
    --ins-button-text: var(--aim-light-text-on-color);
    --ins-body-bg-color: var(--aim-light-bg-page);
    --ins-body-text-color: var(--aim-light-text-primary);
    --ins-body-link-color: var(--aim-light-interactive);
    --ins-body-link-hover-color: var(--aim-light-interactive-hover);
    --ins-site-info-bg-selected: var(--aim-light-site-info-bg-selected);
    --ins-mainnav-bg-color: var(--aim-light-primary);
    --ins-mainnav-text-color: var(--aim-light-text-on-color);
    --ins-mainnav-link-color: var(--aim-light-text-primary);
    --ins-mainnav-link-hover-color: var(--aim-light-primary);
    --ins-mainnav-link-active-color: var(--aim-light-primary);
    --ins-footer-bg-color: var(--aim-light-text-primary);
    --ins-footer-text-color: #6c757d;
    --ins-footer-link-color: #6c757d;
    --ins-footer-link-hover-color: var(--aim-light-text-on-color);
    --ins-dashboard-bg: var(--aim-light-dashboard-bg);
    
    /* Legacy INS -> AIM Dark mappings */
    --ins-dark-primary-color: var(--aim-dark-primary);
    --ins-dark-primary-border: var(--aim-dark-accent2);
    --ins-dark-secondary-color: var(--aim-dark-secondary);
    --ins-dark-secondary-border: var(--aim-dark-accent2);
    --ins-dark-link-highlight: var(--aim-dark-alert);
    --ins-dark-input-background: var(--aim-dark-input-background);
    --ins-dark-link-background-color: var(--aim-dark-secondary);
    --ins-dark-button-text: var(--aim-dark-text-primary);
    --ins-dark-body-bg-color: var(--aim-dark-bg-page);
    --ins-dark-body-text-color: var(--aim-dark-text-primary);
    --ins-dark-body-link-color: var(--aim-dark-text-primary);
    --ins-dark-body-link-hover-color: #ff79c6;
    --ins-dark-site-info-bg-selected: var(--aim-dark-site-info-bg-selected);
    --ins-dark-mainnav-bg-color: var(--aim-dark-primary);
    --ins-dark-mainnav-text-color: var(--aim-dark-text-primary);
    --ins-dark-mainnav-link-color: var(--aim-dark-text-primary);
    --ins-dark-mainnav-link-hover-color: var(--color-primary);
    --ins-dark-mainnav-link-active-color: var(--aim-dark-accent2);
    --ins-dark-footer-bg-color: var(--aim-dark-bg-page);
    --ins-dark-footer-text-color: var(--aim-dark-text-primary);
    --ins-dark-footer-link-color: var(--aim-dark-alert);
    --ins-dark-footer-link-hover-color: var(--aim-dark-accent);
    --ins-dark-dashboard-bg: var(--aim-dark-dashboard-bg);
    
    /* Legacy Cornerstone mappings */
    --cornerstone-primary-color: var(--cornerstone-light-primary); 
    --cornerstone-primary-border: #001552;
    --cornerstone-secondary-color: var(--cornerstone-light-secondary);
    --cornerstone-secondary-border: #008467;
    --cornerstone-link-highlight: var(--cornerstone-light-accent);
    --cornerstone-input-background: var(--cornerstone-light-input-background);
    --cornerstone-link-background-color: initial;
    --cornerstone-button-text: var(--cornerstone-light-text-on-color);
    --cornerstone-body-bg-color: var(--cornerstone-light-bg-page);
    --cornerstone-body-text-color: var(--cornerstone-light-text-primary);
    --cornerstone-body-link-color: var(--color-primary);
    --cornerstone-body-link-hover-color: #0056b3;
    --cornerstone-site-info-bg-selected: var(--cornerstone-light-site-info-bg-selected);
    --cornerstone-mainnav-bg-color: var(--cornerstone-light-primary);
    --cornerstone-mainnav-text-color: var(--cornerstone-light-text-primary);
    --cornerstone-mainnav-link-color: var(--cornerstone-light-text-primary);
    --cornerstone-mainnav-link-hover-color: var(--color-primary);
    --cornerstone-mainnav-link-active-color: var(--color-primary);
    --cornerstone-footer-bg-color: var(--cornerstone-light-text-primary);
    --cornerstone-footer-text-color: #6c757d;
    --cornerstone-footer-link-color: #6c757d;
    --cornerstone-footer-link-hover-color: var(--cornerstone-light-text-on-color);
    --cornerstone-dashboard-bg: var(--cornerstone-light-dashboard-bg);
    
    /* 
     * ==========================================================================
     * 9. ACTIVE THEME VARIABLES (Default: AIM Light)
     * ==========================================================================
     */
    
    /* Current active theme variables (dynamically updated by JavaScript) */
    --primary-color: var(--aim-light-primary);
    --primary-border: var(--aim-light-primary);
    --secondary-color: var(--aim-light-secondary);
    --secondary-border: var(--aim-light-border-strong);
    --main-link-color: var(--aim-light-interactive);
    --main-link-highlight: var(--aim-light-interactive-hover);
    --main-link-background-color: initial;
    --main-button-text: var(--aim-light-text-on-color);
    --main-input-background: var(--aim-light-input-background);
    --body-bg-color: var(--aim-light-bg-page);
    --body-text-color: var(--aim-light-text-primary);
    --body-link-color: var(--aim-light-interactive);
    --body-link-hover-color: var(--aim-light-interactive-hover);
    --site-info-bg-selected: var(--aim-light-site-info-bg-selected);
    --mainnav-bg-color: var(--aim-light-primary); /* Updated to use primary color for themed backgrounds */
    --mainnav-text-color: var(--aim-light-text-on-color); /* Updated for better contrast */
    --mainnav-link-color: var(--aim-light-text-on-color); /* Updated for consistency */
    --mainnav-link-hover-color: var(--aim-light-interactive-hover);
    --mainnav-link-active-color: var(--aim-light-interactive-hover);
    --footer-bg-color: var(--aim-light-bg-page);
    --footer-text-color: var(--aim-light-text-primary);
    --footer-link-color: var(--aim-light-interactive);
    --footer-link-hover-color: var(--aim-light-interactive-hover);
    --dashboard-bg: var(--aim-light-dashboard-bg);

    /* Panel Variables (dynamically mapped to current theme) */
    --panel-bg: var(--aim-light-panel-bg);
    --panel-header-bg: var(--aim-light-panel-header-bg);
    --panel-text: var(--aim-light-panel-text);
    --panel-text-secondary: var(--aim-light-panel-text-secondary);
    --panel-border: var(--aim-light-panel-border);
    --panel-hover: var(--aim-light-panel-hover);
    
    /* 
     * ==========================================================================
     * 10. LEGACY SUPPORT COLORS
     * ==========================================================================
     */
    
    /* Keep some direct color references for backward compatibility */
    --color-primary: #1a61ab;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-info: #17a2b8;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-light: #f8f9fa;
    --color-dark: #212529;
    
    /* Milestone backward compatibility */
    --milestone-bg: var(--milestone-bg-default);
    --milestone-title: var(--milestone-title-default);
    --milestone-success: var(--milestone-success-bg);
    --milestone-success-title: var(--milestone-success-title);
    --milestone-warning: var(--milestone-warning-bg);
    --milestone-warning-title: var(--milestone-warning-title);
    --milestone-danger: var(--milestone-danger-bg);
    --milestone-danger-title: var(--milestone-danger-title);
    
    /* Action backward compatibility */
    --action-break-bg-color: var(--action-break-bg);
    --action-break-text-color: var(--action-break-text);
    --action-break-border-color: var(--action-break-border);
    --action-sort-bg-color: var(--action-sort-bg);
    --action-sort-text-color: var(--action-sort-text);
    --action-sort-border-color: var(--action-sort-border);
    --action-filter-bg-color: var(--action-filter-bg);
    --action-filter-text-color: var(--action-filter-text);
    --action-filter-border-color: var(--action-filter-border);

    /* 
     * ==========================================================================
     * 12. LOGIN PAGE COLOR VARIABLES
     * ==========================================================================
     */
    
    /* Login Page Color Variables - Colors only, styling in login-page.css */
    --login-primary: #1E3A5F;
    --login-secondary: #3A5780;
    --login-accent: #E8A450;
    --login-bg: #f8f8f2;
    --login-card-bg: #ffffff;
    --login-text: #333333;
    --login-text-light: #666666;
    --login-border: rgba(30, 58, 95, 0.2);
    --login-register-bg: #008E70;
    --login-register-hover: #007A63;
}

/* 
 * ==========================================================================
 * 11. COLOR THEORY DOCUMENTATION
 * ==========================================================================
 * 
 * DESIGN PRINCIPLES:
 * 
 * 1. COLOR CONTRAST RATIOS (WCAG AA Compliance):
 *    - Normal text: 4.5:1 minimum
 *    - Large text: 3:1 minimum
 *    - UI components: 3:1 minimum
 * 
 * 2. BRAND COLOR RELATIONSHIPS:
 *    - Primary colors establish brand identity
 *    - Secondary colors provide supporting elements
 *    - Accent colors draw attention to key interactions
 * 
 * 3. DARK THEME BEST PRACTICES:
 *    - Reduce overall luminance while maintaining contrast
 *    - Use warmer colors in dark themes to reduce eye strain
 *    - Maintain brand recognition through color temperature
 * 
 * 4. SEMANTIC COLOR USAGE:
 *    - Success (Green): Completion, positive actions
 *    - Warning (Orange): Caution, pending actions  
 *    - Danger (Red): Errors, destructive actions
 *    - Info (Blue): Information, neutral actions
 * 
 * 5. INTERACTION FEEDBACK:
 *    - Hover states: 10-15% darker/lighter
 *    - Active states: 20-25% darker/lighter
 *    - Focus states: Use outline with brand color
 * 
 * ==========================================================================
 */