/**
 * MAJOTUBEUNAIDEA - Design System Variables (Premium Edition v4.0)
 * Paleta de colores premium, tipografía y tokens de diseño mejorados
 * @description Sistema de diseño centralizado para consistencia visual premium
 */

:root {
    /* ============================================
       COLORES PRIMARIOS (Electric Blue Premium)
       ============================================ */
    --color-primary: #0066FF;
    --color-primary-light: #3395FF;
    --color-primary-dark: #0047CC;
    --color-primary-glow: rgba(0, 102, 255, 0.25);
    --color-primary-glow-strong: rgba(0, 102, 255, 0.4);

    /* ============================================
       COLORES ACCENT (Sunset Orange Premium)
       ============================================ */
    --color-accent: #FF2D55;
    --color-accent-light: #FF5C7C;
    --color-accent-dark: #CC1A3D;
    --color-accent-glow: rgba(255, 45, 85, 0.25);
    --color-accent-glow-strong: rgba(255, 45, 85, 0.4);

    /* ============================================
       COLORES SEMÁNTICOS (Premium)
       ============================================ */
    --color-success: #00D68F;
    --color-success-glow: rgba(0, 214, 143, 0.2);
    --color-warning: #FFB020;
    --color-warning-glow: rgba(255, 176, 32, 0.2);
    --color-error: #FF453A;
    --color-error-glow: rgba(255, 69, 58, 0.2);
    --color-info: #64D2FF;
    --color-info-glow: rgba(100, 210, 255, 0.2);

    /* ============================================
       FONDOS (Deep Space - Premium Dark)
       ============================================ */
    --bg-void: #000000;
    --bg-dark: #050508;
    --bg-surface: #0A0A0F;
    --bg-card: #12121A;
    --bg-card-hover: #1A1A24;
    --bg-elevated: #252532;
    --bg-glass: rgba(18, 18, 26, 0.8);

    /* ============================================
       GRADIENTES PREMIUM
       ============================================ */
    --gradient-primary: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%);
    --gradient-accent: linear-gradient(135deg, #FF2D55 0%, #FF9500 100%);
    --gradient-success: linear-gradient(135deg, #00D68F 0%, #00FFA3 100%);
    --gradient-dark: linear-gradient(180deg, #0A0A0F 0%, #12121A 100%);
    --gradient-radial: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
    --gradient-mesh:
        radial-gradient(at 40% 20%, rgba(0, 102, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(255, 45, 85, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(0, 214, 143, 0.08) 0px, transparent 50%),
        radial-gradient(at 80% 50%, rgba(100, 210, 255, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 176, 32, 0.05) 0px, transparent 50%);

    /* ============================================
       GLASSMORPHISM (Enhanced)
       ============================================ */
    --glass-bg: rgba(18, 18, 26, 0.75);
    --glass-bg-light: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.15);
    --glass-shine: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(24px);
    --glass-blur-strong: blur(40px);

    /* ============================================
       BORDES (Premium)
       ============================================ */
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-accent: var(--color-primary);
    --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));

    /* ============================================
       TEXTO (Premium Readability)
       ============================================ */
    --text-primary: #FAFAFC;
    --text-secondary: #A8A8B5;
    --text-muted: #6E6E78;
    --text-disabled: #3E3E46;

    /* ============================================
       TIPOGRAFÍA (Premium Fonts)
       ============================================ */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-headings: 'Outfit', 'Inter', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 2rem;
    /* 32px */
    --font-size-4xl: 2.5rem;
    /* 40px */
    --font-size-5xl: 3.5rem;
    /* 56px */
    --font-size-6xl: 4.5rem;
    /* 72px */
    --font-size-hero: clamp(2.5rem, 8vw, 5rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.15em;

    /* ============================================
       ESPACIADO (Premium Scale)
       ============================================ */
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-7: 2rem;
    /* 32px */
    --space-8: 2.5rem;
    /* 40px */
    --space-10: 3rem;
    /* 48px */
    --space-12: 4rem;
    /* 64px */
    --space-16: 6rem;
    /* 96px */
    --space-20: 8rem;
    /* 128px */
    --space-24: 10rem;
    /* 160px */

    /* ============================================
       BORDES RADIUS (Premium)
       ============================================ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-3xl: 36px;
    --radius-full: 9999px;

    /* ============================================
       SOMBRAS (Premium Depth)
       ============================================ */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 32px 96px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 40px var(--color-primary-glow);
    --shadow-glow-strong: 0 0 60px var(--color-primary-glow-strong);
    --shadow-glow-accent: 0 0 40px var(--color-accent-glow);
    --shadow-inner: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-inner-strong: inset 0 4px 16px rgba(0, 0, 0, 0.6);

    /* ============================================
       TRANSICIONES (Premium Easing)
       ============================================ */
    --transition-instant: 100ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================
       Z-INDEX (Premium Stack)
       ============================================ */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;

    /* ============================================
       CONTENEDORES (Premium)
       ============================================ */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    --container-full: 1920px;

    /* ============================================
       HEADER (Premium)
       ============================================ */
    --header-height: 72px;
    --header-height-scrolled: 60px;

    /* ============================================
       SAFE AREAS (Mobile)
       ============================================ */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* ============================================
       PLATFORM FIXES
       ============================================ */
    --tap-highlight: transparent;
    --focus-ring: 0 0 0 3px rgba(0, 102, 255, 0.4);
}

/* ============================================
   DARK MODE (Default)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-spring: 0ms;
    }
}

/* ============================================
   HIGH CONTRAST
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --border-subtle: rgba(255, 255, 255, 0.3);
        --border-default: rgba(255, 255, 255, 0.5);
        --text-secondary: #C8C8D5;
    }
}

/* ============================================
   APPLE FONT SMOOTHING
   ============================================ */
@supports (-webkit-font-smoothing: antialiased) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}