/**
 * ENNU Design System - Design Tokens
 * 
 * Single source of truth for all design values across the ENNU ecosystem.
 * All staff interfaces, check-in, queue, face chart, and checkout must use these tokens.
 * 
 * @package ENNU\Infrastructure
 * @since 3.1.0
 * @version 1.0.0
 * 
 * Token Categories:
 * - Colors (brand, semantic, neutral)
 * - Typography (font families, sizes, weights, line heights)
 * - Spacing (8px base scale)
 * - Touch Targets (iOS/Android compliant)
 * - Border Radius
 * - Shadows
 * - Transitions
 * - Z-Index
 * - Device Breakpoints
 */

/* ==========================================================================
   ROOT TOKENS
   ========================================================================== */

:root {
    /* ========================================================================
       COLORS - BRAND
       ======================================================================== */
    
    /* Primary Gold - Luxury Brand Identity */
    --ennu-gold-50: #FEFCE8;
    --ennu-gold-100: #FEF9C3;
    --ennu-gold-200: #FDE68A;
    --ennu-gold-300: #FCD34D;
    --ennu-gold-400: #FBBF24;
    --ennu-gold-500: #F59E0B;
    --ennu-gold-600: #D97706;
    --ennu-gold-700: #B45309;
    --ennu-gold-800: #92400E;
    --ennu-gold-900: #78350F;
    
    /* Primary Brand Gold (main accent) */
    --ennu-primary: #C9A962;
    --ennu-primary-light: #E5D4A1;
    --ennu-primary-dark: #A68B4B;
    --ennu-primary-gradient: linear-gradient(135deg, #C9A962 0%, #B8963A 100%);
    --ennu-primary-gradient-hover: linear-gradient(135deg, #D4B46A 0%, #C9A962 100%);
    
    /* Navy - Secondary Brand */
    --ennu-navy: #1A2744;
    --ennu-navy-light: #2D3E5F;
    --ennu-navy-dark: #0F172A;
    
    /* ========================================================================
       COLORS - NEUTRAL
       ======================================================================== */
    
    --ennu-white: #FFFFFF;
    --ennu-black: #000000;
    
    --ennu-gray-50: #F9FAFB;
    --ennu-gray-100: #F3F4F6;
    --ennu-gray-200: #E5E7EB;
    --ennu-gray-300: #D1D5DB;
    --ennu-gray-400: #9CA3AF;
    --ennu-gray-500: #6B7280;
    --ennu-gray-600: #4B5563;
    --ennu-gray-700: #374151;
    --ennu-gray-800: #1F2937;
    --ennu-gray-900: #111827;
    
    /* Neutral aliases for component library */
    --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;
    
    /* ========================================================================
       COLORS - SEMANTIC
       ======================================================================== */
    
    /* Success */
    --ennu-success: #059669;
    --ennu-success-light: #D1FAE5;
    --ennu-success-dark: #047857;
    --ennu-success-50: #ECFDF5;
    --ennu-success-500: #10B981;
    --ennu-success-600: #059669;
    --ennu-success-700: #047857;
    
    /* Warning */
    --ennu-warning: #D97706;
    --ennu-warning-light: #FEF3C7;
    --ennu-warning-dark: #B45309;
    --ennu-warning-50: #FFFBEB;
    --ennu-warning-500: #F59E0B;
    --ennu-warning-600: #D97706;
    --ennu-warning-700: #B45309;
    
    /* Error */
    --ennu-error: #DC2626;
    --ennu-error-light: #FEE2E2;
    --ennu-error-dark: #B91C1C;
    --ennu-error-50: #FEF2F2;
    --ennu-error-500: #EF4444;
    --ennu-error-600: #DC2626;
    --ennu-error-700: #B91C1C;
    
    /* Info */
    --ennu-info: #0284C7;
    --ennu-info-light: #E0F2FE;
    --ennu-info-dark: #0369A1;
    --ennu-info-50: #F0F9FF;
    --ennu-info-500: #0EA5E9;
    --ennu-info-600: #0284C7;
    --ennu-info-700: #0369A1;
    
    /* ========================================================================
       TYPOGRAPHY
       ======================================================================== */
    
    /* Font Families */
    --ennu-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ennu-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ennu-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    --ennu-font-display: 'Playfair Display', Georgia, serif;
    
    /* Font Sizes - Mobile-First Scale */
    --ennu-text-2xs: 0.625rem;    /* 10px */
    --ennu-text-xs: 0.6875rem;    /* 11px */
    --ennu-text-sm: 0.75rem;      /* 12px */
    --ennu-text-base: 0.875rem;   /* 14px */
    --ennu-text-md: 0.9375rem;    /* 15px */
    --ennu-text-lg: 1rem;         /* 16px - iOS input threshold */
    --ennu-text-xl: 1.125rem;     /* 18px */
    --ennu-text-2xl: 1.25rem;     /* 20px */
    --ennu-text-3xl: 1.5rem;      /* 24px */
    --ennu-text-4xl: 1.875rem;    /* 30px */
    --ennu-text-5xl: 2.25rem;     /* 36px */
    --ennu-text-6xl: 3rem;        /* 48px */
    
    /* Font Weights */
    --ennu-font-normal: 400;
    --ennu-font-medium: 500;
    --ennu-font-semibold: 600;
    --ennu-font-bold: 700;
    
    /* Line Heights */
    --ennu-leading-none: 1;
    --ennu-leading-tight: 1.25;
    --ennu-leading-snug: 1.375;
    --ennu-leading-normal: 1.5;
    --ennu-leading-relaxed: 1.625;
    --ennu-leading-loose: 2;
    
    /* Letter Spacing */
    --ennu-tracking-tighter: -0.05em;
    --ennu-tracking-tight: -0.025em;
    --ennu-tracking-normal: 0;
    --ennu-tracking-wide: 0.025em;
    --ennu-tracking-wider: 0.05em;
    --ennu-tracking-widest: 0.1em;
    
    /* ========================================================================
       SPACING - 8px Base Scale
       ======================================================================== */
    
    --ennu-space-0: 0;
    --ennu-space-px: 1px;
    --ennu-space-0-5: 2px;
    --ennu-space-1: 4px;
    --ennu-space-1-5: 6px;
    --ennu-space-2: 8px;
    --ennu-space-2-5: 10px;
    --ennu-space-3: 12px;
    --ennu-space-3-5: 14px;
    --ennu-space-4: 16px;
    --ennu-space-5: 20px;
    --ennu-space-6: 24px;
    --ennu-space-7: 28px;
    --ennu-space-8: 32px;
    --ennu-space-9: 36px;
    --ennu-space-10: 40px;
    --ennu-space-11: 44px;
    --ennu-space-12: 48px;
    --ennu-space-14: 56px;
    --ennu-space-16: 64px;
    --ennu-space-20: 80px;
    --ennu-space-24: 96px;
    --ennu-space-28: 112px;
    --ennu-space-32: 128px;
    
    /* ========================================================================
       TOUCH TARGETS - iOS/Android Compliance
       ======================================================================== */
    
    /* Apple HIG: 44pt minimum, Android: 48dp */
    --ennu-touch-min: 44px;
    --ennu-touch-comfortable: 48px;
    --ennu-touch-large: 56px;
    
    /* Button heights */
    --ennu-btn-height-sm: 32px;
    --ennu-btn-height-md: 40px;
    --ennu-btn-height-lg: 48px;
    --ennu-btn-height-xl: 56px;
    
    /* Input heights (must be >= 44px on mobile) */
    --ennu-input-height-sm: 36px;
    --ennu-input-height-md: 44px;
    --ennu-input-height-lg: 52px;
    
    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */
    
    --ennu-radius-none: 0;
    --ennu-radius-sm: 4px;
    --ennu-radius-md: 6px;
    --ennu-radius-lg: 8px;
    --ennu-radius-xl: 12px;
    --ennu-radius-2xl: 16px;
    --ennu-radius-3xl: 24px;
    --ennu-radius-full: 9999px;
    
    /* ========================================================================
       SHADOWS
       ======================================================================== */
    
    --ennu-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ennu-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --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-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --ennu-shadow-none: 0 0 #0000;
    
    /* Brand Shadows */
    --ennu-shadow-gold: 0 4px 14px 0 rgba(201, 169, 98, 0.25);
    --ennu-shadow-gold-lg: 0 10px 30px -5px rgba(201, 169, 98, 0.35);
    --ennu-shadow-gold-sm: 0 2px 8px rgba(201, 169, 98, 0.2);
    
    /* ========================================================================
       TRANSITIONS
       ======================================================================== */
    
    /* Durations */
    --ennu-duration-75: 75ms;
    --ennu-duration-100: 100ms;
    --ennu-duration-150: 150ms;
    --ennu-duration-200: 200ms;
    --ennu-duration-300: 300ms;
    --ennu-duration-500: 500ms;
    --ennu-duration-700: 700ms;
    --ennu-duration-1000: 1000ms;
    
    /* Timing Functions */
    --ennu-ease-linear: linear;
    --ennu-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ennu-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ennu-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ennu-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Composite 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);
    --ennu-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========================================================================
       Z-INDEX SCALE
       ======================================================================== */
    
    --ennu-z-hide: -1;
    --ennu-z-auto: auto;
    --ennu-z-base: 0;
    --ennu-z-docked: 10;
    --ennu-z-dropdown: 1000;
    --ennu-z-sticky: 1100;
    --ennu-z-banner: 1200;
    --ennu-z-overlay: 1300;
    --ennu-z-modal: 1400;
    --ennu-z-popover: 1500;
    --ennu-z-skipnav: 1600;
    --ennu-z-toast: 1700;
    --ennu-z-tooltip: 1800;
    
    /* ========================================================================
       DEVICE BREAKPOINTS
       ======================================================================== */
    
    /* Mobile First - min-width values */
    --ennu-bp-xs: 320px;          /* iPhone SE (small) */
    --ennu-bp-sm: 375px;          /* iPhone SE, 13 mini */
    --ennu-bp-md: 430px;          /* iPhone 15 Pro Max */
    --ennu-bp-lg: 768px;          /* iPad Mini portrait */
    --ennu-bp-xl: 1024px;         /* iPad Pro 11" landscape */
    --ennu-bp-2xl: 1366px;        /* iPad Pro 12.9" landscape */
    --ennu-bp-3xl: 1536px;        /* Large desktop */
    
    /* Max-width values (for <= queries) */
    --ennu-bp-xs-max: 374px;
    --ennu-bp-sm-max: 429px;
    --ennu-bp-md-max: 767px;
    --ennu-bp-lg-max: 1023px;
    --ennu-bp-xl-max: 1365px;
    
    /* ========================================================================
       SAFE AREAS (iOS)
       ======================================================================== */
    
    --ennu-safe-top: env(safe-area-inset-top, 0px);
    --ennu-safe-right: env(safe-area-inset-right, 0px);
    --ennu-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ennu-safe-left: env(safe-area-inset-left, 0px);
    
    /* ========================================================================
       FOCUS STATES
       ======================================================================== */
    
    --ennu-focus-ring: 0 0 0 3px rgba(201, 169, 98, 0.4);
    --ennu-focus-ring-offset: 0 0 0 2px var(--ennu-white), 0 0 0 4px var(--ennu-primary);
    --ennu-focus-ring-error: 0 0 0 3px rgba(220, 38, 38, 0.3);
    --ennu-focus-ring-success: 0 0 0 3px rgba(5, 150, 105, 0.3);
    
    /* ========================================================================
       OPACITY
       ======================================================================== */
    
    --ennu-opacity-0: 0;
    --ennu-opacity-5: 0.05;
    --ennu-opacity-10: 0.1;
    --ennu-opacity-20: 0.2;
    --ennu-opacity-25: 0.25;
    --ennu-opacity-30: 0.3;
    --ennu-opacity-40: 0.4;
    --ennu-opacity-50: 0.5;
    --ennu-opacity-60: 0.6;
    --ennu-opacity-70: 0.7;
    --ennu-opacity-75: 0.75;
    --ennu-opacity-80: 0.8;
    --ennu-opacity-90: 0.9;
    --ennu-opacity-95: 0.95;
    --ennu-opacity-100: 1;
    
    /* ========================================================================
       CONTAINER WIDTHS
       ======================================================================== */
    
    --ennu-container-xs: 320px;
    --ennu-container-sm: 384px;
    --ennu-container-md: 448px;
    --ennu-container-lg: 512px;
    --ennu-container-xl: 576px;
    --ennu-container-2xl: 672px;
    --ennu-container-3xl: 768px;
    --ennu-container-4xl: 896px;
    --ennu-container-5xl: 1024px;
    --ennu-container-6xl: 1152px;
    --ennu-container-7xl: 1280px;
    --ennu-container-full: 100%;
    
    /* ========================================================================
       ASPECT RATIOS
       ======================================================================== */
    
    --ennu-aspect-square: 1 / 1;
    --ennu-aspect-video: 16 / 9;
    --ennu-aspect-portrait: 3 / 4;
    --ennu-aspect-wide: 21 / 9;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --ennu-duration-75: 0ms;
        --ennu-duration-100: 0ms;
        --ennu-duration-150: 0ms;
        --ennu-duration-200: 0ms;
        --ennu-duration-300: 0ms;
        --ennu-duration-500: 0ms;
        --ennu-duration-700: 0ms;
        --ennu-duration-1000: 0ms;
        
        --ennu-transition-fast: 0ms;
        --ennu-transition-base: 0ms;
        --ennu-transition-slow: 0ms;
        --ennu-transition-bounce: 0ms;
    }
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */

.theme-dark,
[data-theme="dark"] {
    /* Invert neutral scale */
    --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;
    
    /* Adjust shadows for dark */
    --ennu-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --ennu-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --ennu-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --ennu-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --ennu-shadow-gold: 0 4px 14px 0 rgba(201, 169, 98, 0.35);
    
    /* Semantic light backgrounds for dark mode */
    --ennu-success-light: #052E16;
    --ennu-warning-light: #451A03;
    --ennu-error-light: #450A0A;
    --ennu-info-light: #082F49;
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --ennu-primary: #B8860B;
        --ennu-focus-ring: 0 0 0 3px #000000;
    }
}

/* ==========================================================================
   PRINT OVERRIDES
   ========================================================================== */

@media print {
    :root {
        --ennu-shadow-sm: none;
        --ennu-shadow-md: none;
        --ennu-shadow-lg: none;
        --ennu-shadow-xl: none;
        --ennu-shadow-2xl: none;
        --ennu-shadow-gold: none;
    }
}