/**
 * URBAN CAPITAL - SEMANTIC COLOR MAPPINGS
 * Version: 2.0.0
 * Last Updated: 2025-11-10
 *
 * ARCHITECTURE: Layer 3 - Semantic Abstraction
 *
 * PURPOSE:
 * - Maps palette primitives (--primary-9) to semantic names (--color-primary-600)
 * - Provides backward compatibility with legacy code
 * - Follows Dependency Inversion Principle (depends on abstractions, not concrete values)
 * - Single Responsibility: Color semantics ONLY
 *
 * LAYER STRUCTURE:
 * Layer 1: radix-colors.css      → Defines --gray-1 to --gray-12 (primitives)
 * Layer 2: palette-purple.css    → Defines --primary-9, --accent-6 (theme)
 * Layer 3: color-semantic.css    → Maps theme to legacy names (THIS FILE)
 * Layer 4: design-tokens.css     → Spacing, typography, shadows (non-color)
 * Layer 5: components/*.css      → Uses semantic names
 *
 * BENEFITS:
 * ✅ Theme swapping: Change palette file = instant theme change
 * ✅ No hard-coded colors: All reference palette abstractions
 * ✅ Type-safe: Missing palette variable = fallback color
 * ✅ Clean separation: Colors separate from spacing/typography
 */

/* ==================== LIGHT MODE (DEFAULT) ==================== */

:root {
    /* ===== PRIMARY COLORS (Brand Identity) ===== */
    /* Maps palette primitives to semantic legacy names */
    /* Fallback values ensure safety if palette fails to load */

    --color-primary-50: var(--primary-1, #faf7fe);
    --color-primary-100: var(--primary-2, #f3e8ff);
    --color-primary-200: var(--primary-3, #e9d5ff);
    --color-primary-300: var(--primary-4, #d8b4fe);
    --color-primary-400: var(--primary-5, #c084fc);
    --color-primary-500: var(--primary-6, #a855f7);
    --color-primary-600: var(--primary-9, #7c3aed);    /* Main brand color - USES PALETTE! */
    --color-primary-700: var(--primary-10, #6d28d9);
    --color-primary-800: var(--primary-11, #5b21b6);
    --color-primary-900: var(--primary-12, #4c1d95);

    /* ===== ACCENT COLORS ===== */
    /* Maps accent palette to semantic names */

    --color-accent-50: var(--accent-1, #fff7fb);
    --color-accent-100: var(--accent-2, #ffe4ed);
    --color-accent-200: var(--accent-3, #ffc9db);
    --color-accent-300: var(--accent-4, #ffa3c1);
    --color-accent-400: var(--accent-5, #ff7ca7);
    --color-accent-500: var(--accent-6, #ff6b9d);
    --color-accent-600: var(--accent-6, #ff6b9d);    /* Main accent color */
    --color-accent-700: var(--accent-7, #ff4c8b);
    --color-accent-800: var(--accent-8, #e73774);
    --color-accent-900: var(--accent-9, #c72c5f);

    /* ===== DASHBOARD ACCENT GRADIENT ===== */
    /* Maps to palette's brand gradient - no fallback (trust the framework) */
    --color-accent-gradient: var(--brand-gradient);

    /* REMOVED: --color-accent-purple-* and --color-secondary-* were dead code
     * Palette owns all theme colors (Single Source of Truth)
     */

    /* ===== NEUTRALS (Grays) ===== */
    /* Maps Radix gray scale to legacy names */
    /* radix-colors.css already defines --gray-1 to --gray-12 */

    --color-gray-50: var(--gray-1, #fcfcfc);
    --color-gray-100: var(--gray-2, #f9f9f9);
    --color-gray-200: var(--gray-3, #f1f1f1);
    --color-gray-300: var(--gray-4, #ebebeb);
    --color-gray-400: var(--gray-6, #d7d7d7);
    --color-gray-500: var(--gray-7, #c1c1c1);
    --color-gray-600: var(--gray-8, #a0a0a0);
    --color-gray-700: var(--gray-9, #7d7d7d);
    --color-gray-800: var(--gray-10, #626262);
    --color-gray-900: var(--gray-11, #434343);

    /* ===== DASHBOARD NEUTRALS (Legacy) ===== */

    --color-dashboard-bg: var(--gray-2, #f9f9f9);
    --color-dashboard-sidebar: #2a3042;    /* Keep custom dark sidebar */
    --color-dashboard-text: var(--gray-10, #626262);
    --color-dashboard-text-light: var(--gray-8, #a0a0a0);
    --color-dashboard-border: var(--gray-4, #ebebeb);
    --color-dashboard-border-light: var(--gray-3, #f1f1f1);

    /* ===== SEMANTIC COLORS (Success, Warning, Danger, Info) ===== */
    /* These remain fixed - not theme-dependent */

    --color-success-50: #f0fdf4;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success-dark: #28a745;        /* Legacy Bootstrap */
    --color-success-light: #20c997;       /* Legacy Bootstrap */
    --color-success-gradient: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success-light) 100%);

    --color-warning-50: #fffbeb;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-dark: #ffc107;        /* Legacy Bootstrap */
    --color-warning-light: #fd7e14;       /* Legacy Bootstrap */
    --color-warning-gradient: linear-gradient(135deg, var(--color-warning-dark) 0%, var(--color-warning-light) 100%);

    --color-danger-50: #fef2f2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-dark: #dc3545;         /* Legacy Bootstrap */
    --color-danger-light: #e83e8c;        /* Legacy Bootstrap */
    --color-danger-gradient: linear-gradient(135deg, var(--color-danger-dark) 0%, var(--color-danger-light) 100%);

    --color-info-50: #f0f9ff;
    --color-info-500: #06b6d4;
    --color-info-600: #0891b2;
    --color-info-bootstrap: #17a2b8;      /* Legacy Bootstrap */

    /* ===== BRAND COLORS (Login/Marketing Pages) ===== */
    /* Keep login page branding separate from main theme */

    --azul-escuro-1: #17213E;         /* Dark Blue 1 */
    --azul-escuro-2: #152137;         /* Dark Blue 2 */
    --amarelo-claro: #FDE793;         /* Light Yellow */
    --amarelo-ouro: #FFD04C;          /* Gold Yellow */
    --color-brand-bg-gradient: linear-gradient(135deg, var(--azul-escuro-1) 0%, var(--azul-escuro-2) 100%);
    --color-brand-accent-gradient: linear-gradient(135deg, var(--amarelo-ouro) 0%, var(--amarelo-claro) 100%);

    /* ===== SURFACE COLORS ===== */

    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;    /* Cards, modals, dropdowns */
    --color-background: var(--gray-1, #fcfcfc);          /* Page background */
    --color-background-dashboard: var(--gray-2, #f9f9f9); /* Dashboard background */

    /* Shorthand aliases (for compatibility with dark-mode.css)
     * IMPORTANT: These are now defined in palette-*.css files
     * DO NOT override --background, --surface here (violates Single Responsibility)
     * Palette files are the source of truth for these variables
     */
    /* --background: DEFINED IN PALETTE */
    /* --surface: DEFINED IN PALETTE */
    /* --surface-elevated: DEFINED IN PALETTE */
    /* --surface-interactive: DEFINED IN PALETTE */

    /* ===== TEXT COLORS (WCAG AAA Compliant - 7:1+ contrast) ===== */

    --color-text-primary: var(--gray-12, #1a1a1a);        /* Headings (16.2:1 contrast) */
    --color-text-secondary: var(--gray-11, #434343);      /* Body text (7.5:1 contrast) */
    --color-text-tertiary: var(--gray-9, #7d7d7d);        /* Hints, labels */
    --color-text-disabled: var(--gray-7, #c1c1c1);        /* Disabled state */

    /* Shorthand aliases (for compatibility with dark-mode.css) */
    --text-primary: var(--gray-12, #1a1a1a);
    --text-secondary: var(--gray-11, #434343);
    --text-tertiary: var(--gray-9, #7d7d7d);
    --text-muted: var(--gray-7, #c1c1c1);
    --color-text-inverse: #ffffff;                         /* Text on dark backgrounds */

    /* ===== BORDER COLORS ===== */

    --color-border-light: var(--gray-3, #f1f1f1);
    --color-border: var(--gray-4, #ebebeb);
    --color-border-medium: var(--gray-6, #d7d7d7);
    --color-border-strong: var(--gray-7, #c1c1c1);

    /* Shorthand aliases (for compatibility with dark-mode.css) */
    --border-color: var(--gray-4, #e5e7eb);
    --divider-color: var(--gray-4, #e5e7eb);

    /* ===== UNPREFIXED ALIASES (Template Compatibility) ===== */
    /* Portal templates use unprefixed variable names for brevity */
    /* These map to the prefixed --color-* semantic names */

    /* Primary brand colors */
    --primary-600: var(--color-primary-600);    /* Main purple: #7c3aed */
    --primary-700: var(--color-primary-700);    /* Dark purple: #6d28d9 */

    /* NOTE: --primary-9 and --primary-10 are NOT aliased here */
    /* They are palette primitives defined in palette-purple.css */
    /* Creating aliases would cause circular dependency with --color-primary-600 */

    /* Gray scale */
    --gray-50: var(--color-gray-50);            /* Lightest gray */
    --gray-100: var(--color-gray-100);
    --gray-200: var(--color-gray-200);
    --gray-300: var(--color-gray-300);
    --gray-500: var(--color-gray-500);
    --gray-600: var(--color-gray-600);
    --gray-900: var(--color-gray-900);          /* Darkest gray */

    /* Semantic colors */
    --success-500: var(--color-success-500);    /* Green: #10b981 */

    /* Note: --surface, --background, --text-primary, --text-secondary already defined above */

    /* ===== KPI DASHBOARD COLORS ===== */
    /* REMOVED: KPI colors are defined in palette-*.css files (Single Source of Truth)
     * Each palette (purple, professional, etc.) defines its own KPI colors
     * DO NOT duplicate here - violates DRY principle
     */

    /* ===== BOOTSTRAP VARIABLE OVERRIDES ===== */
    /* PURPOSE: Override Bootstrap's hard-coded blue values for non-portal pages
     *
     * USAGE CONTEXT:
     * - Portal pages (portal/base.html): Does NOT load Bootstrap CSS - these variables unused but harmless
     * - Accounts pages (accounts/logout.html): DOES load Bootstrap CSS - these variables REQUIRED
     * - Dashboard pages: May use Bootstrap components - these variables REQUIRED
     *
     * WHY !important IS NECESSARY:
     * - Bootstrap defines --bs-primary with high specificity
     * - Without !important, our overrides won't work
     * - This is a "necessary evil" when fighting framework defaults
     *
     * REFACTORING NOTE (Portal CSS Cleanup Project):
     * - These 12 !important declarations are JUSTIFIED (not fixable)
     * - They override Bootstrap's hard-coded values
     * - Removing them would break non-portal pages that use Bootstrap
     * - Portal constraint: Only refactoring portal pages, not entire app
     *
     * FUTURE IMPROVEMENT:
     * - Consider removing Bootstrap entirely from the app
     * - Would eliminate need for these overrides
     * - See: docs/planning/DEVELOPMENT_BACKLOG.md
     */

    --bs-primary: var(--primary-9, #0066CC) !important;           /* Override Bootstrap blue with brand color */
    --bs-primary-rgb: 0, 102, 204 !important;                     /* RGB version for transparency */
    --bs-link-color: var(--primary-9, #0066CC) !important;        /* Links use brand color */
    --bs-link-hover-color: var(--primary-10, #0052A3) !important; /* Hover darker */
    --bs-link-color-rgb: 0, 102, 204 !important;
    --bs-link-hover-color-rgb: 0, 82, 163 !important;
}

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

[data-theme="dark"] {
    /* ===== PRIMARY COLORS (Dark Mode) ===== */
    /* Inverted scale - lighter colors for visibility on dark backgrounds */

    --color-primary-50: var(--primary-12, #4c1d95);
    --color-primary-100: var(--primary-11, #5b21b6);
    --color-primary-200: var(--primary-10, #6d28d9);
    --color-primary-300: var(--primary-9, #7c3aed);
    --color-primary-400: var(--primary-8, #7c3aed);
    --color-primary-500: var(--primary-6, #a855f7);
    --color-primary-600: var(--primary-5, #c084fc);    /* Lighter in dark mode */
    --color-primary-700: var(--primary-4, #d8b4fe);
    --color-primary-800: var(--primary-3, #e9d5ff);
    --color-primary-900: var(--primary-2, #f3e8ff);

    /* ===== ACCENT COLORS (Dark Mode) ===== */

    --color-accent-600: var(--accent-5, #ff7ca7);    /* Lighter in dark mode */

    /* ===== NEUTRALS (Dark Mode) ===== */
    /* radix-colors.css inverts grays in dark mode */

    --color-gray-50: var(--gray-12, #1a1a1a);
    --color-gray-900: var(--gray-1, #fcfcfc);

    /* ===== SURFACE COLORS (Dark Mode) ===== */

    --color-surface: var(--gray-2, #222222);
    --color-surface-elevated: var(--gray-3, #2a2a2a);
    --color-background: var(--gray-1, #111111);
    --color-background-dashboard: var(--gray-1, #111111);

    /* ===== TEXT COLORS (Dark Mode) ===== */

    --color-text-primary: var(--gray-1, #f9f9f9);        /* Light text */
    --color-text-secondary: var(--gray-3, #d0d0d0);      /* Softer light text */
    --color-text-tertiary: var(--gray-5, #a0a0a0);
    --color-text-disabled: var(--gray-7, #666666);
    --color-text-inverse: var(--gray-12, #1a1a1a);       /* Dark text on light bg */

    /* ===== BORDER COLORS (Dark Mode) ===== */

    --color-border-light: var(--gray-3, #2a2a2a);
    --color-border: var(--gray-4, #333333);
    --color-border-medium: var(--gray-5, #444444);
    --color-border-strong: var(--gray-6, #555555);

    /* ===== DASHBOARD (Dark Mode) ===== */

    --color-dashboard-bg: var(--gray-1, #111111);
    --color-dashboard-sidebar: #1a1f2e;    /* Darker sidebar */
    --color-dashboard-text: var(--gray-3, #d0d0d0);
    --color-dashboard-text-light: var(--gray-5, #a0a0a0);
    --color-dashboard-border: var(--gray-4, #333333);
    --color-dashboard-border-light: var(--gray-3, #2a2a2a);

    /* ===== KPI DASHBOARD COLORS (Dark Mode) ===== */
    /* REMOVED: KPI colors are defined in palette-*.css files (Single Source of Truth)
     * DO NOT duplicate here - violates DRY principle
     */

    /* ===== BOOTSTRAP VARIABLE OVERRIDES (Dark Mode) ===== */
    /* Same rationale as light mode - see comments above (lines 225-247) */
    /* These override Bootstrap's dark mode values for non-portal pages */

    --bs-primary: var(--primary-9, #3B9EFF) !important;           /* Lighter blue for dark mode */
    --bs-primary-rgb: 59, 158, 255 !important;
    --bs-link-color: var(--primary-9, #3B9EFF) !important;
    --bs-link-hover-color: var(--primary-10, #5BB0FF) !important;
    --bs-link-color-rgb: 59, 158, 255 !important;
    --bs-link-hover-color-rgb: 91, 176, 255 !important;
}

/* ==================== DEVELOPER NOTES ==================== */
/**
 * USAGE EXAMPLES:
 *
 * ✅ CORRECT - Uses semantic abstraction:
 * .btn-primary {
 *     background: var(--color-primary-600);  ← References palette via semantic layer
 * }
 *
 * ❌ WRONG - Hard-coded concrete value:
 * .btn-primary {
 *     background: #7c3aed;  ← Breaks theme swapping
 * }
 *
 * THEME SWAPPING:
 * 1. Change palette file in templates: palette-purple.css → palette-blue.css
 * 2. Entire app theme changes instantly
 * 3. No CSS modifications needed
 *
 * SOLID PRINCIPLES APPLIED:
 * - Single Responsibility: This file ONLY maps colors
 * - Open/Closed: Extend by adding new palettes, don't modify this file
 * - Dependency Inversion: Depends on palette abstractions (--primary-9), not concrete values
 * - DRY: Colors defined once in palette, referenced everywhere
 */