/*
====================================
EzFile - Variables y Fuentes CSS
====================================

Este archivo contiene todas las variables CSS, fuentes locales y configuración base
del sistema de diseño de EzFile.

CONTENIDO:
- Fuentes locales (Inter)
- Variables CSS principales
- Gradientes y efectos
- Sombras
- Configuración de tema
*/

/* FUENTES LOCALES PARA MEJOR PERFORMANCE - Fuentes originales de Google Fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-300.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colores base */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --secondary: #10b981;
    --secondary-dark: #059669;
    --accent: #f59e0b;
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;

    /* Variables de tema dinámicas */
    --bg-primary: var(--neutral-50);
    --bg-secondary: #ffffff;
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --border-color: var(--neutral-200);
    --card-bg: #ffffff;
    --navbar-bg: rgba(255, 255, 255, 0.95);
    
    /* Gradientes modernos */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-warm: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    --gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Gradientes de texto */
    --text-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text-gradient-rainbow: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    --text-gradient-fire: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --text-gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    
    /* Fondos animados */
    --bg-animated: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 255, 255, 0.2) 0%, transparent 50%);
        
    --bg-mesh: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
        linear-gradient(90deg, rgba(120, 255, 255, 0.05) 0%, transparent 50%, rgba(255, 255, 120, 0.05) 100%);
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* TEMA OSCURO */
[data-theme="dark"] {
    /* Colores base - Tema oscuro */
    --bg-primary: #0f0f23;
    --bg-secondary: #1a1a2e;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --card-bg: rgba(26, 26, 46, 0.8);
    --navbar-bg: rgba(15, 15, 35, 0.95);
    
    /* Fondos oscuros animados */
    --bg-animated: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 255, 255, 0.1) 0%, transparent 50%);
        
    --bg-mesh: 
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(120, 119, 198, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255, 119, 198, 0.05) 0%, transparent 50%),
        linear-gradient(90deg, rgba(120, 255, 255, 0.05) 0%, transparent 50%, rgba(255, 255, 120, 0.05) 100%);
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}