/***********************************************************
 *
 * ECOTRACK - Variables CSS
 * Colorimetría del Interfaz
 *
 * Este archivo contiene todas las variables de colores,
 * tipografía y espaciados utilizados en el sistema EcoTrack
 *
 ************************************************************/

:root {
    /* ===================================
       COLORES PRINCIPALES
       =================================== */

    /* Azul Primario - Color principal del sistema */
    --color-primary: #008BFE;
    --color-primary-rgb: 0, 139, 254;

    /* Azul Oscuro - Para fondos y elementos de contraste */
    --color-dark: #04354D;
    --color-dark-rgb: 4, 53, 77;

    /* Azul Secundario */
    --color-secondary: #008DD8;
    --color-secondary-rgb: 0, 141, 216;

    /* ===================================
       COLORES CON OPACIDAD
       =================================== */

    /* Azul Claro - 50% opacidad */
    --color-light-50: #80D2FF;
    --color-light-50-rgba: rgba(128, 210, 255, 0.5);

    /* Azul Claro - 25% opacidad */
    --color-light-25: rgba(128, 210, 255, 0.25);

    /* Azul Primario - 25% opacidad */
    --color-primary-25: rgba(0, 139, 254, 0.25);

    /* Azul Oscuro - 50% opacidad */
    --color-dark-50: rgba(4, 53, 77, 0.5);

    /* ===================================
       COLORES DE TEXTO
       =================================== */

    --text-primary: #04354D;
    --text-secondary: #677788;
    --text-light: #97a4af;
    --text-white: #ffffff;

    /* ===================================
       COLORES DE FONDO
       =================================== */

    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-blur: rgba(255, 255, 255, 0.1);

    /* ===================================
       COLORES DE BORDES
       =================================== */

    --border-light: #eeeeff;
    --border-medium: #97a4af;

    /* ===================================
       TIPOGRAFÍA
       =================================== */

    --font-family: 'Open Sans', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 600;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */

    /* ===================================
       ESPACIADOS
       =================================== */

    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-xxl: 3rem;     /* 48px */

    /* ===================================
       BORDER RADIUS
       =================================== */

    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;   /* Completamente redondeado */

    /* ===================================
       SOMBRAS
       =================================== */

    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    --shadow-md: 0 4px 20px 0 rgba(0, 139, 254, 0.14), 0 7px 10px -5px rgba(0, 139, 254, 0.4);
    --shadow-lg: 0 4px 11px rgba(0, 139, 254, 0.35);
    --shadow-hover: 0 8px 24px rgba(0, 139, 254, 0.25);

    /* ===================================
       TRANSICIONES
       =================================== */

    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.4s ease-in-out;

    /* ===================================
       Z-INDEX
       =================================== */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal: 9999;
    --z-preloader: 11;
}