/*
 * 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: var(--brand-primary); /* Derived — change --brand-primary to re-theme */
    --aim-accent-base: #56AEFF;

    /*
     * ==========================================================================
     * 1b. DERIVED COLOR SYSTEM
     * Change --brand-primary to re-theme the entire application.
     * All other colors are auto-calculated via color-mix().
     * ==========================================================================
     */

    /* Brand root — THE single source of truth */
    --brand-primary: #3F5269;

    /* Primary palette — darkened/lightened from brand */
    --primary-color: var(--brand-primary);
    --primary-hover: color-mix(in srgb, var(--primary-color), black 15%);
    --primary-active: color-mix(in srgb, var(--primary-color), black 25%);
    --primary-light: color-mix(in srgb, var(--primary-color), white 75%);
    --primary-lighter: color-mix(in srgb, var(--primary-color), white 88%);
    --primary-lightest: color-mix(in srgb, var(--primary-color), white 95%);

    /* Primary alpha variants — overlays, shadows, borders */
    --primary-alpha-10: color-mix(in srgb, var(--primary-color), transparent 90%);
    --primary-alpha-15: color-mix(in srgb, var(--primary-color), transparent 85%);
    --primary-alpha-25: color-mix(in srgb, var(--primary-color), transparent 75%);
    --primary-alpha-40: color-mix(in srgb, var(--primary-color), transparent 60%);

    /* Secondary palette — derived darker shade for dropdown menus, hover chrome */
    --secondary-color: color-mix(in srgb, var(--primary-color), black 10%);
    --secondary-hover: color-mix(in srgb, var(--secondary-color), black 15%);
    --secondary-light: color-mix(in srgb, var(--primary-color), #AAB4C0 70%);
    --secondary-lighter: color-mix(in srgb, var(--primary-color), #D0D6DC 80%);

    /* Interactive palette — brighter for links, focus rings, active states */
    --interactive-base: #2563EB; /* Vibrant professional blue — hardcoded for precision, not derived from navy */
    --interactive-hover: color-mix(in srgb, var(--interactive-base), black 20%);
    --interactive-active: color-mix(in srgb, var(--interactive-base), black 30%);

    /* Border palette — derived from primary opacity */
    --border-subtle: var(--primary-alpha-25);
    --border-strong: var(--primary-alpha-40);

    /* Surface palette */
    --surface-base: #E8EEF6; /* Blue-grey page bg — provides clear contrast for white cards */
    --surface-raised: #ffffff;
    --surface-overlay: var(--primary-alpha-15);

    /*
     * ==========================================================================
     * 2. SEMANTIC COLOR PALETTES
     * ==========================================================================
     */
    
    /* Success Palette (Emerald — modern, richer than Bootstrap green) */
    --color-success-dark: #065F46;
    --color-success-medium: #10B981;
    --color-success-light: #34D399;
    --color-success-lightest: #D1FAE5;
    
    /* Warning Palette (Amber — warmer and cleaner than Bootstrap yellow) */
    --color-warning-dark: #92400E;
    --color-warning-medium: #F59E0B;
    --color-warning-light: #FCD34D;
    --color-warning-lightest: #FEF3C7;
    
    /* Danger Palette (Red — modern, unambiguous) */
    --color-danger-dark: #991B1B;
    --color-danger-medium: #EF4444;
    --color-danger-light: #F87171;
    --color-danger-lightest: #FEE2E2;
    
    /* Info Palette (Sky blue — distinct from interactive #2563EB brand blue) */
    --color-info-dark: #075985;
    --color-info-medium: #0EA5E9;
    --color-info-light: #38BDF8;
    --color-info-lightest: #E0F2FE;
    
    /* Neutral Palette (Slate — blue-tinted, reads as "tech" not flat Bootstrap grey) */
    --color-neutral-darkest: #0F172A;
    --color-neutral-dark: #1E293B;
    --color-neutral-medium: #64748B;
    --color-neutral-light: #94A3B8;
    --color-neutral-lightest: #F1F5F9;
    
    /* 
     * ==========================================================================
     * 3. COMPONENT-SPECIFIC COLORS
     * ==========================================================================
     */
    
    /* Milestone Status Colors */
    --milestone-bg-default: #fff;
    --milestone-success-bg: var(--color-success-lightest);
    --milestone-warning-bg: var(--color-warning-lightest);
    --milestone-danger-bg: var(--color-danger-lightest);
    
    /* Action Colors */
    --action-break-bg: var(--color-success-medium);
    --action-sort-bg: #d946ef; /* magenta */
    --action-filter-bg: #f97316; /* orange */

    /* Flight Zone Map Overlay Colors (fill / stroke / opacity) */
    --zone-prohibited-fill: #dc2626;
    --zone-prohibited-stroke: #991b1b;
    --zone-prohibited-opacity: 0.4;
    --zone-restricted-fill: #ea580c;
    --zone-restricted-stroke: #c2410c;
    --zone-restricted-opacity: 0.35;
    --zone-danger-fill: #d97706;
    --zone-danger-stroke: #b45309;
    --zone-danger-opacity: 0.3;
    --zone-airport-fill: #2563eb;
    --zone-airport-stroke: #1d4ed8;
    --zone-airport-opacity: 0.3;
    --zone-military-fill: #7c3aed;
    --zone-military-stroke: #6d28d9;
    --zone-military-opacity: 0.3;
    --zone-general-fill: #6b7280;
    --zone-general-stroke: #4b5563;
    --zone-general-opacity: 0.25;
    
    /* 
     * ==========================================================================
     * 4. THEME SYSTEM - AIM LIGHT
     * ==========================================================================
     */
    
    /* AIM Light - Primary Colors (chained to derived system) */
    --aim-light-primary: var(--primary-color);
    --aim-light-secondary: var(--secondary-color);

    /* AIM Light - Background Colors */
    --aim-light-bg-page: var(--surface-base);
    --aim-light-bg-card: #F1F5F9;   /* Slate-100 — clean slate, replaces washed-out blue-grey alpha */
    --aim-light-bg-header: #E2E8F0; /* Slate-200 — crisp section separator */
    --aim-light-dashboard-bg: var(--surface-raised);

    /* AIM Light - Border Colors */
    --aim-light-border-subtle: var(--primary-alpha-25);
    --aim-light-border-strong: var(--primary-alpha-40);

    /* AIM Light - Text Colors */
    --aim-light-text-primary: #1A1F2E;  /* Dark navy-tinted — richer contrast than flat #333 */
    --aim-light-text-secondary: #64748B; /* Slate-500 — has blue undertone, not flat grey */
    --aim-light-text-on-color: #FFFFFF;

    /* AIM Light - Interactive Colors (chained to derived system) */
    --aim-light-interactive: var(--interactive-base);
    --aim-light-interactive-hover: var(--interactive-hover);
    
    /* AIM Light - Component Colors */
    --aim-light-site-info-bg-selected: #BFDBFE; /* Blue-200 — selected state, clear but not garish */
    --aim-light-input-background: #FFFFFF; /* White inputs — modern standard, was grey (looked disabled) */
    --aim-light-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 4px 16px rgba(15, 23, 42, 0.08); /* Visible elevation — white cards on blue-grey bg */

    /* AIM Light - Card Variables */
    --aim-light-card-bg: #ffffff;
    --aim-light-card-border: #CBD5E1; /* Slate-300 — more visible border for contrast */
    --aim-light-card-header-bg: #F8FAFC; /* Slate-50 — barely-there header, elegant */

    /* AIM Light - Panel Variables */
    --aim-light-panel-bg: color-mix(in srgb, var(--brand-primary), black 5%);   /* Elevated — slightly darker than brand for layering */
    --aim-light-panel-header-bg: var(--brand-primary); /* Matches brand — strongest element */
    --aim-light-panel-text: #ffffff;
    --aim-light-panel-text-secondary: #CBD5E1; /* Slate-300 — readable secondary on dark */
    --aim-light-panel-border: color-mix(in srgb, var(--brand-primary), white 15%); /* Visible separator on dark surface */
    --aim-light-panel-hover: color-mix(in srgb, var(--brand-primary), white 10%); /* Hover — lighter than bg, clear feedback */
    
    /* 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 */
    --aim-light-navbar-bg: var(--brand-primary);  /* Brand primary — unified, strong presence */
    --aim-light-navbar-text: #ffffff;
    --aim-light-navbar-hover: color-mix(in srgb, var(--brand-primary), white 10%); /* Lighter hover — clear, not flat */
    
    /* 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: #363950; /* Opaque — was rgba(98,114,164,0.2) which appeared invisible */
    --aim-dark-bg-header: #3b3f54; /* Opaque — was rgba(98,114,164,0.3) which appeared invisible */
    --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: #44475a; /* Opaque — matches card-bg, lighter than surface-raised (#343746) for visible header */

    /* AIM Dark - Panel Variables — must match navbar (--mainnav-bg-color = --primary-color = #6272a4) */
    --aim-dark-panel-bg: var(--aim-dark-primary); /* Same as navbar bg for consistent chrome */
    --aim-dark-panel-header-bg: color-mix(in srgb, var(--aim-dark-primary), black 15%); /* Darker than panel 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: color-mix(in srgb, var(--aim-dark-primary), white 15%); /* Subtle border */
    --aim-dark-panel-hover: color-mix(in srgb, var(--aim-dark-primary), white 10%); /* 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 — consistent with panel chrome */
    --aim-dark-navbar-bg: var(--aim-dark-primary); /* Matches panel bg for unified chrome */
    --aim-dark-navbar-text: #f8f8f2; /* Maintain high contrast */
    --aim-dark-navbar-hover: color-mix(in srgb, var(--aim-dark-primary), white 10%); /* Subtle 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: #FFFFFF;
    --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: #1f3439; /* Opaque — was rgba(0,82,107,0.25) which appeared invisible */
    --cornerstone-dark-bg-header: #1e3640; /* Opaque — was rgba(0,82,107,0.35) which appeared invisible */
    --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: #1e3640; /* Opaque — teal-tinted, visibly distinct from card body */

    /* 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)
     * ==========================================================================
     */
    
    /* Active theme variables — primary/secondary/interactive now handled by derived system (section 1b) */
    --primary-border: var(--primary-color);
    --secondary-border: var(--secondary-hover);
    --main-link-color: var(--interactive-base);
    --main-link-highlight: var(--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);
    --card-header-bg: var(--aim-light-card-header-bg);

    /* Common semantic aliases — used by RCL module CSS */
    --color-text: var(--aim-light-text-primary);
    --color-text-muted: var(--aim-light-text-secondary);
    --color-text-secondary: var(--aim-light-text-secondary);
    --color-text-primary: var(--aim-light-text-primary);
    --color-text-on-primary: var(--aim-light-text-on-color);
    --color-border: var(--aim-light-card-border);
    --color-surface: var(--surface-raised);
    --color-surface-alt: var(--surface-base);
    --color-surface-raised: var(--surface-raised);
    --color-bg: var(--surface-raised);
    --color-bg-secondary: var(--surface-base);
    --color-bg-muted: var(--surface-base);
    --color-background: var(--surface-raised);
    --color-success-bg: var(--color-success-lightest);
    --color-warning-bg: var(--color-warning-lightest);
    --color-danger-bg: var(--color-danger-lightest);
    --color-info-bg: var(--color-info-lightest);
    --color-bg-overlay: var(--color-overlay-darker);
    --color-primary-dark: var(--primary-hover);
    --border-radius: 6px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Alias tokens — referenced in codebase, mapped to canonical values */
    --color-radius-md: var(--radius-md);
    --fm-border-radius: var(--radius-md);
    --card-border-radius: var(--radius-lg);
    --form-element-border-radius: var(--radius-md);

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.10);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10), 0 4px 6px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 10px 10px rgba(15, 23, 42, 0.04);
    --shadow-primary: 0 4px 14px rgba(15, 36, 68, 0.2);
    --z-dropdown: 1000;
    --z-modal: 1050;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;

    /* Numeric-scale aliases (Bootstrap convention → AIM tokens) */
    --color-error-100: var(--color-danger-lightest);
    --color-error-500: var(--color-danger-medium);
    --color-error-700: var(--color-danger-dark);
    --color-success-100: var(--color-success-lightest);
    --color-success-700: var(--color-success-dark);
    --color-warning-100: var(--color-warning-lightest);
    --color-warning-700: var(--color-warning-dark);
    --color-info-100: var(--color-info-lightest);
    --color-info-700: var(--color-info-dark);
    --color-gray-50: var(--color-neutral-lightest);
    --color-gray-200: var(--aim-light-card-border);
    --color-gray-600: var(--aim-light-text-secondary);
    --color-gray-700: var(--color-neutral-dark);

    /* Additional CSS variable mappings for existing stylesheets */
    --color-accent-blue: var(--aim-light-interactive);
    --color-accent-blue-glow: rgba(67, 120, 181, 0.3);
    --color-border-light: var(--aim-light-border-subtle);
    --color-bg-card-default: var(--aim-light-card-header-bg);
    --color-text-header: var(--aim-light-text-primary);
    --color-bg-header: var(--aim-light-bg-header);
    --color-bg-lightest: var(--aim-light-bg-page);
    --color-text-medium: var(--aim-light-text-secondary);
    --color-neutral-light: var(--aim-light-border-subtle);
    --color-neutral-medium: var(--aim-light-text-secondary);
    --color-bg-subtle: var(--aim-light-bg-card);
    --color-overlay-darkest: rgba(0, 0, 0, 0.8);
    --color-overlay-darker: rgba(0, 0, 0, 0.7);
    --color-white-transparent-30: rgba(255, 255, 255, 0.3);
    --color-white-transparent-40: rgba(255, 255, 255, 0.4);
    --color-white-transparent-20: rgba(255, 255, 255, 0.2);
    --color-white-transparent-10: rgba(255, 255, 255, 0.1);
    --color-danger-light: #ff6b6b;
    --color-close-button: #dc3545;
    --color-panel-primary: var(--aim-light-panel-bg);
    --color-panel-primary-dark: var(--aim-light-panel-hover);
    
    /* 
     * ==========================================================================
     * 10. LEGACY SUPPORT COLORS
     * ==========================================================================
     */
    
    /* Legacy color references — aligned to derived system */
    --color-primary: var(--primary-color);
    --color-success: #10B981;
    --color-info: #0EA5E9;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-light: #f8f9fa;
    --color-dark: #212529;
    
    /* Milestone backward compatibility aliases */
    --milestone-bg: var(--milestone-bg-default);
    --milestone-success: var(--milestone-success-bg);
    --milestone-warning: var(--milestone-warning-bg);
    --milestone-danger: var(--milestone-danger-bg);

    /* 
     * ==========================================================================
     * 12. LOGIN PAGE COLOR VARIABLES
     * ==========================================================================
     */
    
    /* Login Page Color Variables - Colors only, styling in login-page.css */
    --login-primary: var(--primary-color);
    --login-secondary: var(--secondary-color);
    --login-accent: #E8A450;
    --login-bg: #F8FAFC;
    --login-card-bg: #ffffff;
    --login-text: #1A1F2E;
    --login-text-light: #64748B;
    --login-border: #E2E8F0;
    --login-register-bg: #008E70;
    --login-register-hover: #007A63;
}

/*
 * ==========================================================================
 * 13. THEME SWITCHING — Component token overrides per data-theme
 *     Change --brand-primary here to re-theme each variant.
 *     All card/nav/body/panel tokens rewire automatically.
 * ==========================================================================
 */

/* AIM Light is the default (ThemeManager strips data-theme for aim-light).
   All :root values above already default to aim-light. No override needed. */

[data-theme="aim-dark"] {
    --brand-primary: #6272a4;
    --surface-base: #282a36;
    --surface-raised: #343746;

    --card-bg: var(--aim-dark-card-bg);
    --card-border: var(--aim-dark-card-border);
    --card-shadow: var(--aim-dark-card-shadow);
    --card-header-bg: var(--aim-dark-card-header-bg);
    --card-accent-primary: var(--primary-color);

    --color-text-header: var(--aim-dark-text-primary);
    --color-text: var(--aim-dark-text-primary);
    --color-text-muted: var(--aim-dark-text-secondary);
    --color-text-secondary: var(--aim-dark-text-secondary);
    --color-text-primary: var(--aim-dark-text-primary);
    --color-border: var(--aim-dark-card-border);

    /* Override aim-consolidated.css :root aliases — var() chains don't cross :root → body boundary */
    --text-primary: var(--aim-dark-text-primary);
    --text-secondary: var(--aim-dark-text-secondary);
    --color-surface: var(--surface-raised);
    --color-surface-alt: var(--surface-base);
    --color-surface-raised: var(--surface-raised);
    --color-bg: var(--surface-raised);
    --color-bg-secondary: var(--surface-base);
    --color-bg-muted: var(--surface-base);

    --body-bg-color: var(--aim-dark-bg-page);
    --body-text-color: var(--aim-dark-text-primary);
    --body-link-color: var(--interactive-base);
    --mainnav-bg-color: var(--primary-color);
    --mainnav-text-color: var(--aim-dark-text-primary);
    --mainnav-link-color: var(--aim-dark-text-primary);
    --dashboard-bg: var(--aim-dark-dashboard-bg);

    --panel-bg: var(--aim-dark-panel-bg);
    --panel-header-bg: var(--aim-dark-panel-header-bg);
    --panel-text: var(--aim-dark-panel-text);
    --panel-text-secondary: var(--aim-dark-panel-text-secondary);
    --panel-border: var(--aim-dark-panel-border);
    --panel-hover: var(--aim-dark-panel-hover);

    /* Input and form controls */
    --main-input-background: var(--aim-dark-input-background);
    --main-button-text: var(--aim-dark-text-primary);
    --site-info-bg-selected: var(--aim-dark-site-info-bg-selected);

    /* Footer */
    --footer-bg-color: var(--aim-dark-bg-page);
    --footer-text-color: var(--aim-dark-text-primary);
    --footer-link-color: var(--aim-dark-text-secondary);

    /* Panel button aliases (menu/posts side buttons) */
    --color-panel-primary: var(--aim-dark-panel-bg);
    --color-panel-primary-dark: var(--aim-dark-panel-hover);

    /* Login page */
    --login-bg: var(--aim-dark-bg-page);
    --login-card-bg: var(--aim-dark-card-bg);
    --login-text: var(--aim-dark-text-primary);
    --login-text-light: var(--aim-dark-text-secondary);
    --login-border: var(--aim-dark-card-border);

    /* Semantic alert backgrounds for dark mode */
    --color-success-bg: color-mix(in srgb, var(--color-success-medium), var(--aim-dark-bg-page) 80%);
    --color-warning-bg: color-mix(in srgb, var(--color-warning-medium), var(--aim-dark-bg-page) 80%);
    --color-danger-bg: color-mix(in srgb, var(--color-danger-medium), var(--aim-dark-bg-page) 80%);
    --color-info-bg: color-mix(in srgb, var(--color-info-medium), var(--aim-dark-bg-page) 80%);

    /* Table/list hover and lightest info tints */
    --color-info-lightest: color-mix(in srgb, var(--color-info-medium), var(--aim-dark-bg-page) 85%);
    --color-neutral-light: var(--aim-dark-card-border);

    /* Gray scale overrides for dark mode readability */
    --color-gray-50: var(--aim-dark-bg-card);
    --color-gray-200: var(--aim-dark-card-border);
    --color-gray-600: var(--aim-dark-text-secondary);
    --color-gray-700: var(--aim-dark-text-primary);

    /* Card default background override */
    --color-bg-card-default: var(--aim-dark-card-header-bg);
}

[data-theme="cornerstone-light"] {
    --brand-primary: #003e52;
    --secondary-color: #008E70;
    --secondary-hover: #006B54;

    --card-bg: var(--cornerstone-light-card-bg);
    --card-border: var(--cornerstone-light-card-border);
    --card-shadow: var(--cornerstone-light-card-shadow);
    --card-header-bg: var(--cornerstone-light-card-header-bg);
    --card-accent-primary: var(--primary-color);

    --color-text-header: var(--cornerstone-light-text-primary);
    --color-text: var(--cornerstone-light-text-primary);
    --color-text-muted: var(--cornerstone-light-text-secondary);
    --color-text-secondary: var(--cornerstone-light-text-secondary);
    --color-text-primary: var(--cornerstone-light-text-primary);
    --color-border: var(--cornerstone-light-card-border);

    --body-bg-color: var(--cornerstone-light-bg-page);
    --body-text-color: var(--cornerstone-light-text-primary);
    --body-link-color: var(--interactive-base);
    --mainnav-bg-color: var(--primary-color);
    --mainnav-text-color: var(--cornerstone-light-text-on-color);
    --mainnav-link-color: var(--cornerstone-light-text-on-color);
    --dashboard-bg: var(--cornerstone-light-dashboard-bg);

    --panel-bg: var(--cornerstone-light-panel-bg);
    --panel-header-bg: var(--cornerstone-light-panel-header-bg);
    --panel-text: var(--cornerstone-light-panel-text);
    --panel-text-secondary: var(--cornerstone-light-panel-text-secondary);
    --panel-border: var(--cornerstone-light-panel-border);
    --panel-hover: var(--cornerstone-light-panel-hover);
}

[data-theme="cornerstone-dark"] {
    --brand-primary: #00526B;
    --secondary-color: #00B289;
    --secondary-hover: #008E6D;
    --surface-base: #1C2B30;
    --surface-raised: #243B42;

    --card-bg: var(--cornerstone-dark-card-bg);
    --card-border: var(--cornerstone-dark-card-border);
    --card-shadow: var(--cornerstone-dark-card-shadow);
    --card-header-bg: var(--cornerstone-dark-card-header-bg);
    --card-accent-primary: var(--primary-color);

    --color-text-header: var(--cornerstone-dark-text-primary);
    --color-text: var(--cornerstone-dark-text-primary);
    --color-text-muted: var(--cornerstone-dark-text-secondary);
    --color-text-secondary: var(--cornerstone-dark-text-secondary);
    --color-text-primary: var(--cornerstone-dark-text-primary);
    --color-border: var(--cornerstone-dark-card-border);

    /* Override aim-consolidated.css :root aliases — var() chains don't cross :root → body boundary */
    --text-primary: var(--cornerstone-dark-text-primary);
    --text-secondary: var(--cornerstone-dark-text-secondary);
    --color-surface: var(--surface-raised);
    --color-surface-alt: var(--surface-base);
    --color-surface-raised: var(--surface-raised);
    --color-bg: var(--surface-raised);
    --color-bg-secondary: var(--surface-base);
    --color-bg-muted: var(--surface-base);

    --body-bg-color: var(--cornerstone-dark-bg-page);
    --body-text-color: var(--cornerstone-dark-text-primary);
    --body-link-color: var(--interactive-base);
    --mainnav-bg-color: var(--primary-color);
    --mainnav-text-color: var(--cornerstone-dark-text-on-color);
    --mainnav-link-color: var(--cornerstone-dark-text-on-color);
    --dashboard-bg: var(--cornerstone-dark-dashboard-bg);

    --panel-bg: var(--cornerstone-dark-panel-bg);
    --panel-header-bg: var(--cornerstone-dark-panel-header-bg);
    --panel-text: var(--cornerstone-dark-panel-text);
    --panel-text-secondary: var(--cornerstone-dark-panel-text-secondary);
    --panel-border: var(--cornerstone-dark-panel-border);
    --panel-hover: var(--cornerstone-dark-panel-hover);

    /* Input and form controls */
    --main-input-background: #2A3D44;
    --main-button-text: var(--cornerstone-dark-text-primary);
    --site-info-bg-selected: #2A3D44;

    /* Footer */
    --footer-bg-color: var(--cornerstone-dark-bg-page);
    --footer-text-color: var(--cornerstone-dark-text-primary);
    --footer-link-color: var(--cornerstone-dark-text-secondary);

    /* Panel button aliases (menu/posts side buttons) */
    --color-panel-primary: var(--cornerstone-dark-panel-bg);
    --color-panel-primary-dark: var(--cornerstone-dark-panel-hover);

    /* Login page */
    --login-bg: var(--cornerstone-dark-bg-page);
    --login-card-bg: var(--cornerstone-dark-card-bg);
    --login-text: var(--cornerstone-dark-text-primary);
    --login-text-light: var(--cornerstone-dark-text-secondary);
    --login-border: var(--cornerstone-dark-card-border);

    /* Semantic alert backgrounds for dark mode */
    --color-success-bg: color-mix(in srgb, var(--color-success-medium), #1C2B30 80%);
    --color-warning-bg: color-mix(in srgb, var(--color-warning-medium), #1C2B30 80%);
    --color-danger-bg: color-mix(in srgb, var(--color-danger-medium), #1C2B30 80%);
    --color-info-bg: color-mix(in srgb, var(--color-info-medium), #1C2B30 80%);

    /* Table/list hover and lightest info tints */
    --color-info-lightest: color-mix(in srgb, var(--color-info-medium), #1C2B30 85%);
    --color-neutral-light: var(--cornerstone-dark-card-border);

    /* Gray scale overrides for dark mode readability */
    --color-gray-50: var(--cornerstone-dark-bg-card);
    --color-gray-200: var(--cornerstone-dark-card-border);
    --color-gray-600: var(--cornerstone-dark-text-secondary);
    --color-gray-700: var(--cornerstone-dark-text-primary);

    /* Card default background override */
    --color-bg-card-default: var(--cornerstone-dark-card-header-bg);
}

/*
 * ==========================================================================
 * 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
 * 
 * ==========================================================================
 */