/**
 * Mobile Enterprise Design Tokens
 * WhenBRRR V12 - McKinsey-Grade Mobile Design System
 * 
 * Single source of truth for mobile-specific design tokens.
 * Inherits from enterprise-variables.css and scales proportionally.
 * 
 * Token Naming Convention:
 *   --m-{category}-{property}: Mobile-specific tokens
 *   Categories: space, text, touch, radius, safe, z, shadow, duration
 * 
 * Mobile-First Philosophy:
 *   - All values optimized for thumb zone interaction
 *   - Safe area aware for notch/home indicator
 *   - Touch target minimums enforced (44px Apple HIG)
 *   - Reduced motion support built-in
 */

/* ============================================================================
   MOBILE BREAKPOINTS - Reference Only
   ============================================================================ 
   
   iPhone SE (3rd gen):  375×667  @2x  (smallest supported)
   iPhone 15:            390×844  @3x  (primary target)
   iPhone 15 Pro Max:    430×932  @3x  (large phone)
   Samsung Galaxy S24:   360×780  (Android reference)
   iPad Mini:            744×1133 (tablet boundary)
   
   Breakpoints:
     --bp-mobile-sm: 375px    (small phones)
     --bp-mobile:    768px    (primary mobile breakpoint)
     --bp-tablet:    1024px   (tablet)
   
   ============================================================================ */

/* ============================================================================
   MOBILE CUSTOM PROPERTIES - Applied at 768px and below
   ============================================================================ */
@media (max-width: 768px) {
    :root {
        /* ====================================================================
           MOBILE SPACING SCALE
           Based on 4px base unit, optimized for touch interactions
           ==================================================================== */
        --m-space-0: 0;
        --m-space-px: 1px;
        --m-space-0-5: 2px;
        --m-space-1: 4px;
        --m-space-1-5: 6px;
        --m-space-2: 8px;
        --m-space-2-5: 10px;
        --m-space-3: 12px;
        --m-space-3-5: 14px;
        --m-space-4: 16px;
        --m-space-5: 20px;
        --m-space-6: 24px;
        --m-space-7: 28px;
        --m-space-8: 32px;
        --m-space-9: 36px;
        --m-space-10: 40px;
        --m-space-12: 48px;
        --m-space-14: 56px;
        --m-space-16: 64px;
        --m-space-20: 80px;
        
        /* Semantic spacing aliases */
        --m-space-gutter: var(--m-space-4);        /* 16px - standard mobile gutter */
        --m-space-section: var(--m-space-6);       /* 24px - section spacing */
        --m-space-card: var(--m-space-4);          /* 16px - card padding */
        --m-space-card-gap: var(--m-space-3);      /* 12px - gap between cards */
        --m-space-list-gap: var(--m-space-2);      /* 8px - list item gap */
        
        /* ====================================================================
           TOUCH TARGET SYSTEM
           Apple HIG: 44px minimum | Material: 48px recommended
           ==================================================================== */
        --m-touch-min: 44px;                       /* Absolute minimum */
        --m-touch-sm: 36px;                        /* Small (icon buttons only) */
        --m-touch-md: 44px;                        /* Standard (Apple HIG) */
        --m-touch-lg: 48px;                        /* Comfortable (Material) */
        --m-touch-xl: 56px;                        /* Large (primary CTAs) */
        --m-touch-2xl: 64px;                       /* Extra large (FAB expanded) */
        
        /* Touch area padding (invisible tap expansion) */
        --m-touch-padding-sm: 8px;
        --m-touch-padding-md: 12px;
        --m-touch-padding-lg: 16px;
        
        /* ====================================================================
           MOBILE TYPOGRAPHY SCALE
           Compressed for mobile, 16px minimum input size (iOS zoom prevention)
           ==================================================================== */
        --m-text-2xs: 0.625rem;    /* 10px - micro labels */
        --m-text-xs: 0.6875rem;    /* 11px - captions */
        --m-text-sm: 0.8125rem;    /* 13px - secondary text */
        --m-text-base: 0.875rem;   /* 14px - body text */
        --m-text-md: 1rem;         /* 16px - input minimum (iOS) */
        --m-text-lg: 1.125rem;     /* 18px - emphasized text */
        --m-text-xl: 1.25rem;      /* 20px - section headers */
        --m-text-2xl: 1.5rem;      /* 24px - page titles */
        --m-text-3xl: 1.875rem;    /* 30px - hero metrics */
        --m-text-4xl: 2.25rem;     /* 36px - large display */
        
        /* Line heights optimized for mobile readability */
        --m-leading-none: 1;
        --m-leading-tight: 1.2;
        --m-leading-snug: 1.35;
        --m-leading-normal: 1.5;
        --m-leading-relaxed: 1.65;
        --m-leading-loose: 1.8;
        
        /* Letter spacing */
        --m-tracking-tighter: -0.02em;
        --m-tracking-tight: -0.01em;
        --m-tracking-normal: 0;
        --m-tracking-wide: 0.02em;
        --m-tracking-wider: 0.04em;
        
        /* ====================================================================
           MOBILE BORDER RADIUS
           Larger radius for softer, friendlier mobile UI
           ==================================================================== */
        --m-radius-none: 0;
        --m-radius-sm: 6px;
        --m-radius-md: 10px;
        --m-radius-lg: 14px;
        --m-radius-xl: 18px;
        --m-radius-2xl: 22px;
        --m-radius-3xl: 28px;
        --m-radius-full: 9999px;
        
        /* Component-specific radius */
        --m-radius-button: var(--m-radius-lg);
        --m-radius-card: var(--m-radius-xl);
        --m-radius-input: var(--m-radius-md);
        --m-radius-modal: var(--m-radius-2xl);
        --m-radius-sheet: var(--m-radius-3xl) var(--m-radius-3xl) 0 0;
        
        /* ====================================================================
           SAFE AREA INSETS
           For notch, dynamic island, home indicator
           ==================================================================== */
        --m-safe-top: env(safe-area-inset-top, 0px);
        --m-safe-bottom: env(safe-area-inset-bottom, 0px);
        --m-safe-left: env(safe-area-inset-left, 0px);
        --m-safe-right: env(safe-area-inset-right, 0px);
        
        /* Combined safe padding */
        --m-safe-padding-top: max(var(--m-space-4), var(--m-safe-top));
        --m-safe-padding-bottom: max(var(--m-space-4), var(--m-safe-bottom));
        
        /* ====================================================================
           MOBILE LAYOUT HEIGHTS
           Fixed heights for navigation elements
           ==================================================================== */
        --m-header-height: 56px;
        --m-bottom-nav-height: 56px;
        --m-bottom-nav-height-safe: calc(56px + var(--m-safe-bottom));
        --m-tab-bar-height: 48px;
        --m-search-bar-height: 44px;
        --m-fab-size: 56px;
        --m-fab-mini-size: 40px;
        
        /* Content area calculations */
        --m-content-top: calc(var(--m-header-height) + var(--m-safe-top));
        --m-content-bottom: var(--m-bottom-nav-height-safe);
        --m-viewport-height: 100dvh;  /* Dynamic viewport height */
        
        /* ====================================================================
           MOBILE Z-INDEX SCALE
           Layered system for mobile overlays
           ==================================================================== */
        --m-z-base: 1;
        --m-z-dropdown: 100;
        --m-z-sticky: 500;
        --m-z-fixed: 900;
        --m-z-bottom-nav: 1000;
        --m-z-fab: 1001;
        --m-z-header: 1002;
        --m-z-sidebar: 1003;
        --m-z-sheet: 1004;
        --m-z-drawer: 1005;
        --m-z-modal-backdrop: 1006;
        --m-z-modal: 1007;
        --m-z-toast: 1008;
        --m-z-tooltip: 1009;
        --m-z-max: 9999;
        
        /* ====================================================================
           MOBILE SHADOWS
           Softer, more diffuse shadows for mobile
           ==================================================================== */
        --m-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
        --m-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
        --m-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
        --m-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
        --m-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
        --m-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.15);
        
        /* Semantic shadows */
        --m-shadow-card: var(--m-shadow-sm);
        --m-shadow-dropdown: var(--m-shadow-lg);
        --m-shadow-sheet: 0 -4px 20px rgba(0, 0, 0, 0.15);
        --m-shadow-fab: 0 4px 16px rgba(59, 130, 246, 0.35);
        --m-shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
        --m-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.18);
        
        /* ====================================================================
           MOBILE ANIMATION TIMING
           Premium easing curves for native-like feel
           ==================================================================== */
        /* Durations */
        --m-duration-instant: 0ms;
        --m-duration-fast: 100ms;
        --m-duration-normal: 200ms;
        --m-duration-slow: 300ms;
        --m-duration-slower: 400ms;
        --m-duration-slowest: 500ms;
        
        /* Easing curves - iOS-inspired */
        --m-ease-linear: linear;
        --m-ease-in: cubic-bezier(0.4, 0, 1, 1);
        --m-ease-out: cubic-bezier(0, 0, 0.2, 1);
        --m-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Premium spring/bounce curves */
        --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --m-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --m-ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
        --m-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
        
        /* iOS-native curves */
        --m-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
        --m-ease-modal: cubic-bezier(0.2, 0.9, 0.4, 1);
        --m-ease-swipe: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        
        /* ====================================================================
           GESTURE THRESHOLDS
           Values for gesture detection
           ==================================================================== */
        --m-swipe-threshold: 50px;
        --m-swipe-velocity: 0.3;
        --m-long-press-duration: 500ms;
        --m-double-tap-delay: 300ms;
        --m-momentum-friction: 0.92;
        
        /* ====================================================================
           MOBILE COLORS - Adjustments for OLED screens
           ==================================================================== */
        /* Slightly elevated blacks for OLED power saving */
        --m-color-black-pure: #000000;
        --m-color-black-soft: #0a0a0a;
        --m-color-gray-900: #111111;
        
        /* Touch feedback colors */
        --m-color-tap-overlay: rgba(0, 0, 0, 0.04);
        --m-color-tap-overlay-dark: rgba(255, 255, 255, 0.08);
        
        /* Blur values for glassmorphism */
        --m-blur-sm: 8px;
        --m-blur-md: 16px;
        --m-blur-lg: 24px;
        --m-blur-xl: 40px;
    }
}

/* ============================================================================
   SMALL PHONE OVERRIDES (375px and below)
   iPhone SE, older Android devices
   ============================================================================ */
@media (max-width: 375px) {
    :root {
        /* Tighter spacing for small screens */
        --m-space-gutter: var(--m-space-3);        /* 12px gutter */
        --m-space-section: var(--m-space-5);       /* 20px sections */
        --m-space-card: var(--m-space-3);          /* 12px card padding */
        
        /* Slightly smaller typography */
        --m-text-base: 0.8125rem;    /* 13px */
        --m-text-xl: 1.125rem;       /* 18px */
        --m-text-2xl: 1.375rem;      /* 22px */
        --m-text-3xl: 1.625rem;      /* 26px */
        
        /* Smaller radius */
        --m-radius-card: var(--m-radius-lg);
        --m-radius-modal: var(--m-radius-xl);
    }
}

/* ============================================================================
   LARGE PHONE OVERRIDES (430px and above)
   iPhone Pro Max, Samsung Ultra
   ============================================================================ */
@media (min-width: 430px) and (max-width: 768px) {
    :root {
        /* More generous spacing */
        --m-space-gutter: var(--m-space-5);        /* 20px gutter */
        --m-space-section: var(--m-space-8);       /* 32px sections */
        --m-space-card: var(--m-space-5);          /* 20px card padding */
        
        /* Touch targets can be slightly larger */
        --m-touch-lg: 52px;
        --m-touch-xl: 60px;
    }
}

/* ============================================================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        /* Compressed vertical spacing in landscape */
        --m-header-height: 48px;
        --m-bottom-nav-height: 48px;
        --m-space-section: var(--m-space-4);
        
        /* Use dynamic viewport for landscape keyboard issues */
        --m-viewport-height: 100dvh;
    }
}

/* ============================================================================
   REDUCED MOTION PREFERENCES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --m-duration-instant: 0ms;
        --m-duration-fast: 0ms;
        --m-duration-normal: 0ms;
        --m-duration-slow: 0ms;
        --m-duration-slower: 0ms;
        --m-duration-slowest: 0ms;
        
        --m-ease-spring: var(--m-ease-out);
        --m-ease-bounce: var(--m-ease-out);
    }
}

/* ============================================================================
   DARK MODE MOBILE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 768px) {
    [data-theme="dark"] {
        /* Elevated shadows for dark mode (lighter) */
        --m-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
        --m-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
        --m-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
        --m-shadow-sheet: 0 -4px 20px rgba(0, 0, 0, 0.5);
        
        /* OLED black backgrounds */
        --m-color-bg-pure: var(--m-color-black-pure);
        
        /* Adjusted tap overlay */
        --m-color-tap-overlay: var(--m-color-tap-overlay-dark);
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   ============================================================================ */
@media (prefers-contrast: high) {
    :root {
        --m-shadow-sm: 0 0 0 1px currentColor;
        --m-shadow-md: 0 0 0 2px currentColor;
        --m-shadow-lg: 0 0 0 2px currentColor;
    }
}

/* ============================================================================
   UTILITY CLASSES - Token-based
   ============================================================================ */
@media (max-width: 768px) {
    /* Spacing utilities */
    .m-p-0 { padding: var(--m-space-0) !important; }
    .m-p-1 { padding: var(--m-space-1) !important; }
    .m-p-2 { padding: var(--m-space-2) !important; }
    .m-p-3 { padding: var(--m-space-3) !important; }
    .m-p-4 { padding: var(--m-space-4) !important; }
    .m-p-5 { padding: var(--m-space-5) !important; }
    .m-p-6 { padding: var(--m-space-6) !important; }
    
    .m-px-4 { padding-left: var(--m-space-4) !important; padding-right: var(--m-space-4) !important; }
    .m-py-4 { padding-top: var(--m-space-4) !important; padding-bottom: var(--m-space-4) !important; }
    
    .m-m-0 { margin: var(--m-space-0) !important; }
    .m-m-auto { margin: auto !important; }
    .m-mx-auto { margin-left: auto !important; margin-right: auto !important; }
    
    .m-gap-2 { gap: var(--m-space-2) !important; }
    .m-gap-3 { gap: var(--m-space-3) !important; }
    .m-gap-4 { gap: var(--m-space-4) !important; }
    
    /* Typography utilities */
    .m-text-xs { font-size: var(--m-text-xs) !important; }
    .m-text-sm { font-size: var(--m-text-sm) !important; }
    .m-text-base { font-size: var(--m-text-base) !important; }
    .m-text-lg { font-size: var(--m-text-lg) !important; }
    .m-text-xl { font-size: var(--m-text-xl) !important; }
    .m-text-2xl { font-size: var(--m-text-2xl) !important; }
    
    /* Touch target utilities */
    .m-touch-target { min-height: var(--m-touch-min); min-width: var(--m-touch-min); }
    .m-touch-lg { min-height: var(--m-touch-lg); min-width: var(--m-touch-lg); }
    .m-touch-xl { min-height: var(--m-touch-xl); min-width: var(--m-touch-xl); }
    
    /* Safe area utilities */
    .m-safe-top { padding-top: var(--m-safe-padding-top) !important; }
    .m-safe-bottom { padding-bottom: var(--m-safe-padding-bottom) !important; }
    .m-safe-x { padding-left: var(--m-safe-left) !important; padding-right: var(--m-safe-right) !important; }
    
    /* Shadow utilities */
    .m-shadow-sm { box-shadow: var(--m-shadow-sm) !important; }
    .m-shadow-md { box-shadow: var(--m-shadow-md) !important; }
    .m-shadow-lg { box-shadow: var(--m-shadow-lg) !important; }
    .m-shadow-card { box-shadow: var(--m-shadow-card) !important; }
    
    /* Radius utilities */
    .m-rounded-md { border-radius: var(--m-radius-md) !important; }
    .m-rounded-lg { border-radius: var(--m-radius-lg) !important; }
    .m-rounded-xl { border-radius: var(--m-radius-xl) !important; }
    .m-rounded-full { border-radius: var(--m-radius-full) !important; }
}