/**
 * CSS Variables Centralizadas
 *
 * Estas variables se cargan primero y están disponibles para todos los bloques
 * del plugin insepro-blocks. Los bloques referencian estas variables con var().
 */

:root {
    /* ========================================
	   Colores - White
	   ======================================== */
    --color-white: #ffffff;

    /* ========================================
	   Colores - Gray
	   ======================================== */
    --color-gray-25: #fdfdfd;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e9eaeb;
    --color-gray-300: #d5d7da;
    --color-gray-600: #535862;
    --color-gray-700: #414651;
    --color-gray-900: #181d27;

    /* ========================================
	   Colores - Brand (Rojo)
	   ======================================== */
    --color-brand-50: #f9f5ff;
    --color-brand-200: #fecaca;
    --color-brand-300: #fca5a5;
    --color-brand-600: #dc2626;
    --color-brand-700: #b91c1c;
    --color-brand-800: #991b1b;

    /* ========================================
	   Colores - Blue Dark
	   ======================================== */
    --color-blue-dark-50: #e5f0ff;
    --color-blue-dark-100: #d1e0ff;
    --color-blue-dark-600: #155eef;
    --color-blue-dark-700: #004eeb;
    --color-blue-dark-800: #1e40af;
    --color-blue-dark-900: #00359e;

    /* ========================================
	   Colores - Brand Blue (Usados en bloques)
	   ======================================== */
    --brand-blue: #2c3e50;
    --brand-blue-light: #4a5f7f;
    --brand-blue-dark: #1a252f;

    /* ========================================
	   Colores - Brand Red (Usados en bloques)
	   ======================================== */
    --red-900: #7f1d1d;
    --red-950: #450a0a;

    /* ========================================
          whatsapp colors
          ======================================== */
    ----whatsapp-bg: #25d366;
    --whatsapp-shadow-hover: rgba(37, 211, 102, 0.5);

    /* ========================================
	   Sombras
	   ======================================== */
    --shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --shadow-xs-inset:
        inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
        inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
    --shadow-lg:
        0px 10px 13.474px 0px rgba(10, 13, 18, 0.08),
        0px 3.368px 5.053px 0px rgba(10, 13, 18, 0.03),
        0px 1.684px 1.684px 0px rgba(10, 13, 18, 0.04);
    --shadow-xl:
        0px 20px 24px -4px rgba(10, 13, 18, 0.08),
        0px 8px 8px -4px rgba(10, 13, 18, 0.03),
        0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);

    /* ========================================
	   Layout
	   ======================================== */
    --container-max-width: 1480px;
}