/* =========================================================
   CADIK
   VARIABLES.CSS
   Identidad visual y variables generales
   ========================================================= */


/* =========================================================
   01. COLORES PRINCIPALES
   ========================================================= */

:root {

    /* Identidad CADIK */
    --color-navy: #0b1c38;
    --color-navy-dark: #08172e;
    --color-navy-light: #102a50;

    --color-orange: #f47c20;
    --color-orange-dark: #d96512;
    --color-orange-light: #ff9642;


    /* Colores neutros */

    --color-white: #ffffff;

    --color-gray-50: #f8fafc;
    --color-gray-100: #E5E7EB;
    --color-gray-200: #e9edf2;
    --color-gray-300: #d8dee7;

    --color-gray-500: #667085;
    --color-gray-600: #475467;
    --color-gray-700: #344054;

    --color-text: #172033;


    /* Transparencias */

    --white-10: rgba(255, 255, 255, 0.10);
    --white-20: rgba(255, 255, 255, 0.20);
    --white-40: rgba(255, 255, 255, 0.40);
    --white-60: rgba(255, 255, 255, 0.60);
    --white-80: rgba(255, 255, 255, 0.80);


    /* =====================================================
       02. TIPOGRAFÍA
    ====================================================== */

    --font-primary:
        "Montserrat",
        Arial,
        sans-serif;


    --font-size-xs: 9px;
    --font-size-sm: 11px;
    --font-size-md: 13px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --font-size-3xl: 40px;
    --font-size-4xl: 56px;


    /* Pesos */

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* =====================================================
       03. ESPACIADO
    ====================================================== */

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 15px;
    --space-lg: 20px;
    --space-xl: 30px;
    --space-2xl: 40px;
    --space-3xl: 60px;
    --space-4xl: 80px;


    /* =====================================================
       04. CONTENEDORES
    ====================================================== */

    --container-width: 1200px;

    --container-padding-desktop: 40px;
    --container-padding-tablet: 25px;
    --container-padding-mobile: 18px;


    /* =====================================================
       05. BORDES Y SOMBRAS
    ====================================================== */

    --border-light:
        1px solid rgba(15, 31, 58, 0.08);

    --border-dark:
        1px solid rgba(255, 255, 255, 0.10);

    --shadow-small:
        0 8px 20px rgba(15, 31, 58, 0.07);

    --shadow-medium:
        0 15px 35px rgba(15, 31, 58, 0.12);

    --shadow-large:
        0 25px 55px rgba(15, 31, 58, 0.18);


    /* =====================================================
       06. RADIOS
    ====================================================== */

    --radius-small: 2px;
    --radius-medium: 6px;
    --radius-large: 12px;
    --radius-round: 50%;


    /* =====================================================
       07. TRANSICIONES
    ====================================================== */

    --transition-fast:
        0.2s ease;

    --transition-normal:
        0.3s ease;

    --transition-slow:
        0.5s ease;


    /* =====================================================
       08. CAPAS
    ====================================================== */

    --z-header: 1000;
    --z-dropdown: 1100;
    --z-modal: 2000;

}