/* =====================================================
   VARIABLES CSS
   OPTIMIZACIÓN CANARIAS V2
   DESIGN SYSTEM 1.0
===================================================== */

:root {

    /* =================================================
       COLORES PRINCIPALES
    ================================================= */

    --color-primary: #0B2149;

    --color-primary-light: #183A74;

    --color-secondary: #7DAA3D;

    --color-secondary-dark: #6A9134;

    --color-secondary-light: #EEF6E2;


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

    --color-text: #0B2149;

    --color-text-light: #667085;

    --color-text-muted: #98A2B3;


    /* =================================================
       FONDOS
    ================================================= */

    --color-white: #FFFFFF;

    --color-background: #F8FAFC;

    --color-background-light: #F5F7FA;

    --color-border: #EDF1F7;


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

    --font-main: 'Montserrat', sans-serif;


    /* =================================================
       TAMAÑOS DE TEXTO
    ================================================= */

    --text-xs: 14px;

    --text-sm: 16px;

    --text-md: 18px;

    --text-lg: 20px;

    --text-xl: 26px;

    --text-2xl: 34px;

    --text-3xl: 52px;

    --text-4xl: 72px;


    /* =================================================
       PESOS DE FUENTE
    ================================================= */

    --font-light: 300;

    --font-regular: 400;

    --font-medium: 500;

    --font-semibold: 600;

    --font-bold: 700;

    --font-extrabold: 800;


    /* =================================================
       BORDES REDONDEADOS
    ================================================= */

    --radius-sm: 10px;

    --radius-md: 14px;

    --radius-lg: 24px;

    --radius-xl: 32px;

    --radius-pill: 50px;


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

    --shadow-sm:
        0 8px 20px rgba(16, 24, 40, 0.05);

    --shadow-md:
        0 20px 50px rgba(16, 24, 40, 0.08);

    --shadow-lg:
        0 30px 70px rgba(16, 24, 40, 0.12);


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

    --shadow-button:
        0 18px 45px rgba(125, 170, 61, 0.35);

    --shadow-image:
        0 35px 70px rgba(0, 0, 0, 0.18);


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

    --transition-fast: 0.2s ease;

    --transition-normal: 0.35s ease;

    --transition-slow: 0.5s ease;


    /* =================================================
       CONTENEDORES
    ================================================= */

    --container-width: 1380px;

    --container-padding: 40px;


    /* =================================================
       ESPACIADO
    ================================================= */

    --space-xs: 10px;

    --space-sm: 18px;

    --space-md: 25px;

    --space-lg: 40px;

    --space-xl: 70px;

    --space-2xl: 100px;

    --space-section: 140px;

}