/* ===== VARIABLES CSS - CODEMETRIA ===== */
:root {
    /* Colores principales */
    --primary: #6C63FF;
    --primary-dark: #5A52D5;
    --primary-light: #8B83FF;
    --primary-rgb: 108, 99, 255;

    --secondary: #00D9FF;
    --secondary-dark: #00B8D9;
    --secondary-rgb: 0, 217, 255;

    --accent: #FF6584;
    --accent-rgb: 255, 101, 132;

    /* Fondos */
    --bg-primary: #06060F;
    --bg-secondary: #0C0C1D;
    --bg-tertiary: #141432;
    --bg-card: rgba(18, 18, 48, 0.6);
    --bg-card-hover: rgba(30, 30, 74, 0.8);

    /* Glassmorphism */
    --glass-bg: rgba(12, 12, 29, 0.7);
    --glass-border: rgba(108, 99, 255, 0.12);
    --glass-blur: blur(20px);

    /* Textos */
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8D0;
    --text-muted: #7878A0;

    /* Bordes */
    --border-color: rgba(108, 99, 255, 0.1);
    --border-color-hover: rgba(108, 99, 255, 0.3);

    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-hero: linear-gradient(135deg, #06060F 0%, #141432 50%, #06060F 100%);
    --gradient-card: linear-gradient(145deg, rgba(18, 18, 48, 0.5) 0%, rgba(12, 12, 29, 0.5) 100%);
    --gradient-border: linear-gradient(135deg, rgba(108, 99, 255, 0.4) 0%, rgba(0, 217, 255, 0.1) 50%, rgba(108, 99, 255, 0.4) 100%);
    --gradient-glow: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(var(--primary-rgb), 0.25);
    --shadow-glow-sm: 0 0 20px rgba(var(--primary-rgb), 0.15);
    --shadow-glow-lg: 0 4px 60px rgba(var(--primary-rgb), 0.3);

    /* Tipografía */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.5rem;

    /* Espaciado */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 2.5rem;
    --space-4xl: 3.5rem;
    --space-5xl: 5rem;

    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 50px;

    /* Transiciones */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Z-index */
    --z-header: 1000;
    --z-overlay: 900;
    --z-loader: 9999;

    /* Container */
    --container-max: 1200px;
    --container-padding: 1.5rem;
}