/* ==========================================================
   BIBLIOTECA BIK
   VARIABLES GLOBALES
   Versión 1.0
   ========================================================== */

:root{

    /* ======================================================
       IDENTIDAD BIK
       ====================================================== */

    --color-bik: #d81b60;          /* Fucsia corporativo */
    --color-vital: #8bc34a;        /* Verde vital */
    --color-acento: #ffc107;       /* Amarillo */

    --color-principal: var(--color-bik);
    --color-secundario: var(--color-vital);


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

    --fondo-blanco: #ffffff;
    --fondo-claro: #f8f9fa;
    --fondo-gris: #eeeeee;
    --fondo-oscuro: #222222;


    /* ======================================================
       TEXTOS
       ====================================================== */

    --texto-principal: #333333;
    --texto-secundario: #666666;
    --texto-claro: #999999;
    --texto-blanco: #ffffff;


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

    --borde-claro: #dddddd;
    --borde-medio: #bbbbbb;


    /* ======================================================
       MENSAJES
       ====================================================== */

    --color-exito: #4caf50;
    --color-aviso: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;


    /* ======================================================
       TIPOGRAFÍAS
       ====================================================== */

    --fuente-principal: "Segoe UI", Arial, Helvetica, sans-serif;
    --fuente-titulos: "Segoe UI", Arial, Helvetica, sans-serif;


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

    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-md: 1rem;
    --texto-lg: 1.25rem;
    --texto-xl: 1.60rem;
    --texto-xxl: 2.50rem;
    --texto-hero: 3.20rem;


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

    --espacio-xs: 5px;
    --espacio-sm: 10px;
    --espacio-md: 20px;
    --espacio-lg: 40px;
    --espacio-xl: 60px;
    --espacio-xxl: 100px;


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

    --radio-xs: 4px;
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 20px;
    --radio-xl: 30px;
    --radio-circular: 999px;


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

    --sombra-suave: 0 2px 8px rgba(0,0,0,.08);
    --sombra-media: 0 5px 15px rgba(0,0,0,.15);
    --sombra-fuerte: 0 10px 30px rgba(0,0,0,.25);


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

    --transicion-rapida: .20s;
    --transicion-normal: .35s;
    --transicion-lenta: .60s;


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

    --ancho-maximo: 1200px;
    --ancho-lectura: 850px;


    /* ======================================================
       HEADER
       ====================================================== */

    --alto-header: 80px;


    /* ======================================================
       BOTONES
       ====================================================== */

    --alto-boton: 48px;
    --padding-boton: 14px 28px;


    /* ======================================================
       TARJETAS
       ====================================================== */

    --radio-tarjeta: 15px;
    --padding-tarjeta: 20px;


    /* ======================================================
       TABLAS
       ====================================================== */

    --alto-fila: 55px;


    /* ======================================================
       CAPAS
       ====================================================== */

    --z-header: 1000;
    --z-menu: 1100;
    --z-modal: 5000;

}