/**
 * DESIGN TOKENS - Bimmer Modular
 * ================================
 * Sistema de tokens unificado para mantener coherencia visual
 * Importar PRIMERO en index.html antes de otros CSS
 * 
 * Estructura:
 * - Colors
 * - Typography
 * - Spacing
 * - Border Radius
 * - Shadows
 * - Animations
 * - Z-Index
 */

:root {
    /* ==================== COLORS - SOCIAL MEDIA INSPIRED ==================== */
    /* Primary Gradient (Instagram-inspired) */
    --color-primary: #FF6B6B;
    --color-primary-dark: #FF5252;
    --color-primary-light: #FF8787;
    
    /* Secondary Gradient (TikTok-inspired) */
    --color-secondary: #00BCD4;
    --color-secondary-accent: #9C27B0;
    
    /* Accent Palette (Modern & Vibrant) */
    --gradient-warm: linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%);
    --gradient-cool: linear-gradient(135deg, #00BCD4 0%, #9C27B0 100%);
    --gradient-sunset: linear-gradient(135deg, #FF6B6B 0%, #FF8E72 50%, #FFB88C 100%);
    --gradient-modern: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Status Colors (Brighter & More Saturated) */
    --color-success: #00D084;
    --color-warning: #FFA500;
    --color-danger: #FF4757;
    --color-info: #00BCD4;
    
    /* Neutral Palette (Softer & More Elegant) */
    --color-ink: #1A1A2E;
    --color-ink-soft: #2D3436;
    --color-muted: #5F6368;
    --color-surface: #FAFBFC;
    --color-surface-alt: #F0F4F8;
    --color-border: #E8EAED;
    --color-white: #FFFFFF;
    
    /* Dark Mode (Sophisticated) */
    --color-dark-bg: #121212;
    --color-dark-surface: #1E1E1E;
    --color-dark-ink: #FFFFFF;
    --color-dark-border: #333333;

    /* ==================== BUTTONS ==================== */
    /* Button Sizes */
    --btn-padding-xs: 6px 12px;
    --btn-padding-sm: 8px 14px;
    --btn-padding-md: 11px 20px;
    --btn-padding-lg: 14px 24px;
    --btn-padding-xl: 16px 28px;
    
    /* Button Heights */
    --btn-height-xs: 28px;
    --btn-height-sm: 36px;
    --btn-height-md: 44px;
    --btn-height-lg: 48px;
    --btn-height-xl: 52px;
    
    /* ==================== TYPOGRAPHY - MODERN ==================== */
    --font-family-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-family-display: 'Poppins', 'Trebuchet MS', sans-serif;
    --font-family-mono: 'Fira Code', 'IBM Plex Mono', monospace;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Font sizes with fluid scaling */
    --text-xs: clamp(0.7rem, 1.5vw, 0.75rem);
    --text-sm: clamp(0.8rem, 1.75vw, 0.875rem);
    --text-base: clamp(1rem, 2vw, 1.125rem);
    --text-lg: clamp(1.1rem, 2.25vw, 1.25rem);
    --text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 3vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 4vw, 2.25rem);
    
    /* ==================== SPACING - GENEROUS ==================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;
    
    /* ==================== BORDER RADIUS - SOFT ==================== */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;
    
    /* ==================== SHADOWS - SOFT & ELEVATED ==================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 28px 64px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 24px rgba(255, 107, 107, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* ==================== TRANSITIONS & ANIMATIONS ==================== */
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --duration-slower: 0.4s;
    --duration-slowest: 0.5s;
    
    --easing-linear: linear;
    --easing-ease: ease;
    --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-out: cubic-bezier(0.0, 0, 0.2, 1);
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --transition-fast: all 0.15s var(--easing-ease);
    --transition-base: all 0.2s var(--easing-ease);
    --transition-slow: all 0.3s var(--easing-in-out);
    --transition-smooth: all 0.4s var(--easing-in-out);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 28px 64px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-glow: 0 0 24px rgba(255, 107, 107, 0.2);
    
    /* ==================== ANIMATIONS ==================== */
    /* Durations */
    --duration-fast: 0.15s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --duration-slower: 0.4s;
    --duration-slowest: 0.5s;
    
    /* Easing Functions */
    --easing-linear: linear;
    --easing-ease: ease;
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Transitions */
    --transition-base: all var(--duration-normal) var(--easing-out);
    --transition-fast: all var(--duration-fast) var(--easing-out);
    --transition-slow: all var(--duration-slow) var(--easing-out);
    
    /* ==================== Z-INDEX SCALE ==================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky-nav: 500;
    --z-floating-menu: 1000;
    --z-modal-backdrop: 1001;
    --z-modal: 1002;
    --z-tooltip: 1100;
    --z-notification: 1200;
    
    /* ==================== COMPONENT SIZES ==================== */
    --size-icon-sm: 20px;
    --size-icon-md: 24px;
    --size-icon-lg: 32px;
    --size-icon-xl: 48px;
    
    /* ==================== FOCUS STATES ==================== */
    --focus-width: 2px;
    --focus-color: #3b82f6;
    --focus-shadow: 0 0 0 var(--focus-width) rgba(59, 130, 246, 0.5);
}

/* ==================== DARK MODE OVERRIDES ==================== */
body.dark-mode {
    --color-ink: #e0e0e0;
    --color-ink-soft: #cbd5e1;
    --color-muted: #94a3b8;
    --color-surface: #1e293b;
    --color-surface-alt: #334155;
    --color-border: #475569;
    --color-bg: #0f172a;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 18px 42px rgba(0, 0, 0, 0.6);
}

/* ==================== UTILITY CLASSES ==================== */
.transition-normal { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }

.focus-visible-ring {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: 2px;
}

/* Helper para animaciones */
.animate-pulse { animation: pulse 2s var(--easing-in-out) infinite; }
.animate-bounce { animation: bounce 1s var(--easing-bounce) infinite; }