/*======================================
    VARIABLES GLOBALES
======================================*/

:root {
    /*==============================
        COLORES PRINCIPALES
    ==============================*/
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-secondary: #64748b;
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-danger: #dc2626;
    /*==============================
        FONDOS
    ==============================*/
    --background: #f4f7fb;
    --background-card: #ffffff;
    --background-input: #ffffff;
    --background-result: #f8fafc;
    /*==============================
        TEXTO
    ==============================*/
    --text-primary: #222222;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-white: #ffffff;
    /*==============================
        BORDES
    ==============================*/
    --border-color: #e5e7eb;
    --border-input: #d7d7d7;
    --border-focus: #2563eb;
    /*==============================
        SOMBRAS
    ==============================*/
    --shadow-small: 0 5px 15px rgba(0, 0, 0, .05);
    --shadow-medium: 0 10px 25px rgba(0, 0, 0, .08);
    --shadow-large: 0 20px 40px rgba(0, 0, 0, .12);
    --shadow-hover: 0 20px 35px rgba(37, 99, 235, .18);
    /*==============================
        RADIOS
    ==============================*/
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 18px;
    --radius-xl: 24px;
    /*==============================
        ESPACIADOS
    ==============================*/
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
    /*==============================
        TRANSICIONES
    ==============================*/
    --transition-fast: .2s;
    --transition: .3s;
    --transition-slow: .5s;
    /*==============================
        TIPOGRAFÍA
    ==============================*/
    --font-family: 'Poppins', sans-serif;
    --font-small: 14px;
    --font-normal: 16px;
    --font-medium: 18px;
    --font-large: 24px;
    --font-title: 36px;
    --font-hero: 46px;
    /*==============================
        ALTURAS
    ==============================*/
    --header-height: 80px;
    --button-height: 50px;
}