/**
 * ============================================================
 * EMZO Corporate
 * variables.css
 * ------------------------------------------------------------
 * Design Tokens del Framework.
 *
 * Responsabilidad:
 * Centralizar todas las variables CSS utilizadas
 * por el tema.
 *
 * @package EMZO_Corporate
 * @version 1.0.0
 * ============================================================
 */

:root {

    /* ========================================================
       COLORES CORPORATIVOS
    ======================================================== */

    --emzo-primary: #F5A623;
    --emzo-primary-dark: #D88A00;
    --emzo-secondary: #0F172A;
    --emzo-accent: #2563EB;

    --emzo-success: #16A34A;
    --emzo-warning: #D97706;
    --emzo-danger: #DC2626;
    --emzo-info: #0284C7;

    /* ========================================================
       ESCALA DE GRISES
    ======================================================== */

    --emzo-white: #FFFFFF;

    --emzo-gray-50: #F8FAFC;
    --emzo-gray-100: #F1F5F9;
    --emzo-gray-200: #E2E8F0;
    --emzo-gray-300: #CBD5E1;
    --emzo-gray-400: #94A3B8;
    --emzo-gray-500: #64748B;
    --emzo-gray-600: #475569;
    --emzo-gray-700: #334155;
    --emzo-gray-800: #1E293B;
    --emzo-gray-900: #0F172A;

    --emzo-black: #000000;

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

    --emzo-font-family:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --emzo-font-size-xs: .75rem;
    --emzo-font-size-sm: .875rem;
    --emzo-font-size-md: 1rem;
    --emzo-font-size-lg: 1.125rem;
    --emzo-font-size-xl: 1.25rem;
    --emzo-font-size-2xl: 1.5rem;
    --emzo-font-size-3xl: 2rem;
    --emzo-font-size-4xl: 2.75rem;
    --emzo-font-size-5xl: 3.5rem;

    --emzo-font-weight-light: 300;
    --emzo-font-weight-normal: 400;
    --emzo-font-weight-medium: 500;
    --emzo-font-weight-semibold: 600;
    --emzo-font-weight-bold: 700;

    --emzo-line-height: 1.6;

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

    --emzo-space-0: 0;
    --emzo-space-1: .25rem;
    --emzo-space-2: .50rem;
    --emzo-space-3: .75rem;
    --emzo-space-4: 1rem;
    --emzo-space-5: 1.50rem;
    --emzo-space-6: 2rem;
    --emzo-space-7: 3rem;
    --emzo-space-8: 4rem;
    --emzo-space-9: 6rem;

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

    --emzo-container-xs: 540px;
    --emzo-container-sm: 720px;
    --emzo-container-md: 960px;
    --emzo-container-lg: 1140px;
    --emzo-container-xl: 1320px;

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

    --emzo-radius-sm: 6px;
    --emzo-radius-md: 12px;
    --emzo-radius-lg: 20px;
    --emzo-radius-xl: 30px;
    --emzo-radius-pill: 999px;

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

    --emzo-shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --emzo-shadow-md:
        0 8px 20px rgba(0,0,0,.10);

    --emzo-shadow-lg:
        0 15px 40px rgba(0,0,0,.15);

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

    --emzo-transition-fast: .20s ease-in-out;
    --emzo-transition-normal: .35s ease-in-out;
    --emzo-transition-slow: .60s ease;

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

    --emzo-z-dropdown: 1000;
    --emzo-z-sticky: 1020;
    --emzo-z-fixed: 1030;
    --emzo-z-offcanvas: 1045;
    --emzo-z-modal: 1055;
    --emzo-z-tooltip: 1080;

}