/**
 * ENNU Design System Bridge
 *
 * This file provides backward-compatible CSS variable mappings to ensure
 * all ENNU plugins use consistent design tokens while maintaining
 * compatibility with existing plugin-specific variables.
 *
 * Include this file BEFORE plugin-specific CSS to establish base variables.
 *
 * @package ENNU\Infrastructure\Styles
 * @since 3.1.0
 */

:root {
    /* ==========================================================================
       UNIFIED ENNU DESIGN TOKENS
       These are the canonical design tokens that should be used across all plugins.
       ========================================================================== */

    /* Primary Brand Colors - Luxury Gold */
    --ennu-primary: #b8860b;
    --ennu-primary-light: #d4a849;
    --ennu-primary-dark: #8b6508;
    --ennu-primary-50: #fefce8;
    --ennu-primary-100: #fef9c3;
    --ennu-primary-500: #eab308;
    --ennu-primary-gradient: linear-gradient(135deg, #d4a849 0%, #b8860b 50%, #8b6508 100%);

    /* Neutral Colors - Warm Tones */
    --ennu-neutral-50: #fafafa;
    --ennu-neutral-100: #f5f5f5;
    --ennu-neutral-200: #e5e5e5;
    --ennu-neutral-300: #d4d4d4;
    --ennu-neutral-400: #a3a3a3;
    --ennu-neutral-500: #737373;
    --ennu-neutral-600: #525252;
    --ennu-neutral-700: #404040;
    --ennu-neutral-800: #262626;
    --ennu-neutral-900: #171717;

    /* Gray Scale (alias to neutral for compatibility) */
    --ennu-gray-50: var(--ennu-neutral-50);
    --ennu-gray-100: var(--ennu-neutral-100);
    --ennu-gray-200: var(--ennu-neutral-200);
    --ennu-gray-300: var(--ennu-neutral-300);
    --ennu-gray-400: var(--ennu-neutral-400);
    --ennu-gray-500: var(--ennu-neutral-500);
    --ennu-gray-600: var(--ennu-neutral-600);
    --ennu-gray-700: var(--ennu-neutral-700);
    --ennu-gray-800: var(--ennu-neutral-800);
    --ennu-gray-900: var(--ennu-neutral-900);

    /* Semantic Colors - Status Indicators */
    --ennu-success: #059669;
    --ennu-success-light: #d1fae5;
    --ennu-success-dark: #047857;
    
    --ennu-warning: #d97706;
    --ennu-warning-light: #fef3c7;
    --ennu-warning-dark: #b45309;
    
    --ennu-error: #dc2626;
    --ennu-error-light: #fee2e2;
    --ennu-error-dark: #b91c1c;
    
    --ennu-info: #0284c7;
    --ennu-info-light: #e0f2fe;
    --ennu-info-dark: #0369a1;

    /* Secondary/Accent Colors */
    --ennu-secondary: var(--ennu-success);
    --ennu-danger: var(--ennu-error);

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --ennu-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ennu-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ennu-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --ennu-font-body: var(--ennu-font-sans);
    --ennu-font-heading: var(--ennu-font-sans);
    --ennu-font-family: var(--ennu-font-sans);

    /* Font Sizes */
    --ennu-text-xs: 0.75rem;
    --ennu-text-sm: 0.875rem;
    --ennu-text-base: 1rem;
    --ennu-text-lg: 1.125rem;
    --ennu-text-xl: 1.25rem;
    --ennu-text-2xl: 1.5rem;
    --ennu-text-3xl: 1.875rem;
    --ennu-text-4xl: 2.25rem;

    /* Font size aliases (pixel-based for legacy support) */
    --ennu-font-size-xs: 11px;
    --ennu-font-size-sm: 12px;
    --ennu-font-size-base: 14px;
    --ennu-font-size-md: 16px;
    --ennu-font-size-lg: 18px;
    --ennu-font-size-xl: 24px;
    --ennu-font-size-2xl: 32px;

    /* ==========================================================================
       SPACING
       ========================================================================== */

    --ennu-space-1: 0.25rem;
    --ennu-space-2: 0.5rem;
    --ennu-space-3: 0.75rem;
    --ennu-space-4: 1rem;
    --ennu-space-5: 1.25rem;
    --ennu-space-6: 1.5rem;
    --ennu-space-8: 2rem;
    --ennu-space-10: 2.5rem;
    --ennu-space-12: 3rem;
    --ennu-space-16: 4rem;

    /* Spacing aliases (rem-based) */
    --ennu-spacing-xs: var(--ennu-space-2);
    --ennu-spacing-sm: var(--ennu-space-3);
    --ennu-spacing-md: var(--ennu-space-4);
    --ennu-spacing-lg: var(--ennu-space-6);
    --ennu-spacing-xl: var(--ennu-space-8);
    --ennu-spacing-2xl: var(--ennu-space-12);

    /* ==========================================================================
       BORDERS & RADIUS
       ========================================================================== */

    --ennu-radius-sm: 0.25rem;
    --ennu-radius-md: 0.5rem;
    --ennu-radius-lg: 0.75rem;
    --ennu-radius-xl: 1rem;
    --ennu-radius-2xl: 1.5rem;
    --ennu-radius-full: 9999px;

    /* Border radius aliases */
    --ennu-border-radius: var(--ennu-radius-lg);
    --ennu-border-radius-sm: var(--ennu-radius-sm);
    --ennu-border-radius-lg: var(--ennu-radius-xl);

    /* Border colors */
    --ennu-border-color: var(--ennu-neutral-200);
    --ennu-border-light: var(--ennu-neutral-100);
    --ennu-border-dark: var(--ennu-neutral-400);

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --ennu-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ennu-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ennu-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ennu-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --ennu-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --ennu-shadow-gold: 0 4px 14px 0 rgba(184, 134, 11, 0.25);

    /* Shadow aliases */
    --ennu-shadow: var(--ennu-shadow-md);

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */

    --ennu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ennu-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --ennu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ==========================================================================
       Z-INDEX SCALE
       ========================================================================== */

    --ennu-z-dropdown: 1000;
    --ennu-z-sticky: 1020;
    --ennu-z-fixed: 1030;
    --ennu-z-modal-backdrop: 1040;
    --ennu-z-modal: 1050;
    --ennu-z-popover: 1060;
    --ennu-z-tooltip: 1070;
    --ennu-z-toast: 1080;

    /* ==========================================================================
       FOCUS STATES
       ========================================================================== */

    --ennu-focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.4);
    --ennu-focus-ring-offset: 0 0 0 2px var(--ennu-neutral-50), 0 0 0 4px var(--ennu-primary);

    /* ==========================================================================
       PRACTICE MANAGER COMPATIBILITY BRIDGE
       Maps --pm-* variables to unified --ennu-* tokens
       ========================================================================== */

    --pm-primary: var(--ennu-primary);
    --pm-primary-dark: var(--ennu-primary-dark);
    --pm-primary-light: var(--ennu-primary-light);
    --pm-primary-bg: rgba(184, 134, 11, 0.1);

    --pm-success: var(--ennu-success);
    --pm-success-bg: var(--ennu-success-light);
    --pm-warning: var(--ennu-warning);
    --pm-warning-bg: var(--ennu-warning-light);
    --pm-error: var(--ennu-error);
    --pm-error-bg: var(--ennu-error-light);
    --pm-info: var(--ennu-info);
    --pm-info-bg: var(--ennu-info-light);

    --pm-white: #ffffff;
    --pm-black: #000000;
    --pm-gray-50: var(--ennu-neutral-50);
    --pm-gray-100: var(--ennu-neutral-100);
    --pm-gray-200: var(--ennu-neutral-200);
    --pm-gray-300: var(--ennu-neutral-300);
    --pm-gray-400: var(--ennu-neutral-400);
    --pm-gray-500: var(--ennu-neutral-500);
    --pm-gray-600: var(--ennu-neutral-600);
    --pm-gray-700: var(--ennu-neutral-700);
    --pm-gray-800: var(--ennu-neutral-800);
    --pm-gray-900: var(--ennu-neutral-900);

    --pm-text-primary: var(--ennu-neutral-900);
    --pm-text-secondary: var(--ennu-neutral-600);
    --pm-text-muted: var(--ennu-neutral-500);

    --pm-bg-body: #ffffff;
    --pm-bg-section: #ffffff;
    --pm-bg-card: #ffffff;
    --pm-bg-hover: var(--ennu-neutral-50);

    --pm-border-color: var(--ennu-neutral-200);
    --pm-border-light: var(--ennu-neutral-100);
    --pm-border-dark: var(--ennu-neutral-500);

    --pm-font-family: var(--ennu-font-sans);
    --pm-border-radius-sm: var(--ennu-radius-sm);
    --pm-border-radius-base: var(--ennu-radius-md);
    --pm-border-radius-lg: var(--ennu-radius-lg);

    --pm-shadow-sm: var(--ennu-shadow-sm);
    --pm-shadow-base: var(--ennu-shadow-md);
    --pm-shadow-lg: var(--ennu-shadow-lg);

    --pm-transition-fast: var(--ennu-transition-fast);
    --pm-transition-base: var(--ennu-transition-base);
    --pm-transition-slow: var(--ennu-transition-slow);

    /* ==========================================================================
       FACE CHARTING COMPATIBILITY BRIDGE
       Maps --color-* variables to unified --ennu-* tokens
       ========================================================================== */

    --color-primary-900: var(--ennu-neutral-900);
    --color-primary-800: var(--ennu-neutral-800);
    --color-primary-700: var(--ennu-neutral-700);
    --color-primary-600: var(--ennu-neutral-600);
    --color-primary-500: var(--ennu-neutral-500);

    --color-accent-500: var(--ennu-primary);
    --color-accent-400: var(--ennu-primary-light);
    --color-accent-600: var(--ennu-primary-dark);

    --color-neutral-50: var(--ennu-neutral-50);
    --color-neutral-100: var(--ennu-neutral-100);
    --color-neutral-200: var(--ennu-neutral-200);
    --color-neutral-300: var(--ennu-neutral-300);
    --color-neutral-400: var(--ennu-neutral-400);
    --color-neutral-500: var(--ennu-neutral-500);
    --color-neutral-600: var(--ennu-neutral-600);
    --color-neutral-700: var(--ennu-neutral-700);
    --color-neutral-800: var(--ennu-neutral-800);
    --color-neutral-900: var(--ennu-neutral-900);
    --color-neutral-950: var(--ennu-neutral-900);
    --color-neutral-0: #ffffff;

    --color-success-base: var(--ennu-success);
    --color-success-light: var(--ennu-success-light);
    --color-warning-base: var(--ennu-warning);
    --color-warning-light: var(--ennu-warning-light);
    --color-error-base: var(--ennu-error);
    --color-error-light: var(--ennu-error-light);
}

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

@media (prefers-color-scheme: dark) {
    :root.ennu-dark-mode,
    :root.pm-dark-mode,
    .theme-dark {
        --ennu-neutral-50: #171717;
        --ennu-neutral-100: #262626;
        --ennu-neutral-200: #404040;
        --ennu-neutral-300: #525252;
        --ennu-neutral-400: #737373;
        --ennu-neutral-500: #a3a3a3;
        --ennu-neutral-600: #d4d4d4;
        --ennu-neutral-700: #e5e5e5;
        --ennu-neutral-800: #f5f5f5;
        --ennu-neutral-900: #fafafa;

        --pm-bg-body: #171717;
        --pm-bg-section: #262626;
        --pm-bg-card: #262626;
        --pm-bg-hover: #404040;

        --pm-text-primary: #fafafa;
        --pm-text-secondary: #d4d4d4;
        --pm-text-muted: #a3a3a3;
    }
}