/* ==========================================================
   REQUISITOS CFE
   Sistema de Diseño (Design System)
   ========================================================== */

/* Colores */
:root {
    /*==========================================================
        COLORES
    ==========================================================*/

    --color-primary: #0F172A;
    --color-primary-light: #1E293B;
    --color-secondary: #334155;
    --color-accent: #2563EB;
    --color-accent-hover: #1D4ED8;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-danger: #DC2626;
    --color-background: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-border: #E2E8F0;
    --color-text: #1E293B;
    --color-text-light: #64748B;
}

/* Tipografía */
/*==========================================================
    TIPOGRAFÍA
==========================================================*/

:root {
    --font-family: "Inter", sans-serif;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.75rem;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

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

:root {
    --space-1: .25rem;
    --space-2: .50rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
}

/* Bordes */
/*==========================================================
    BORDER RADIUS
==========================================================*/

:root {
    --radius-sm: .375rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;
}

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

:root {
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08);
    --shadow-lg: 0 20px 40px rgba(15,23,42,.10);
}

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

:root {
    --transition-fast: .15s ease;
    --transition-normal: .30s ease;
}

/* Alturas */
/*==========================================================
    ALTURAS
==========================================================*/

:root {
    --navbar-height: 72px;
    --footer-min-height: 120px;
}

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

:root {
    --z-navbar: 1000;
    --z-dropdown: 1050;
    --z-modal: 1100;
    --z-toast: 1200;
}

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

:root {
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
}


/*==========================================================
    EJEMPLOS DE USO

    color: var(--color-primary);

    padding: var(--space-5);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-md);

==========================================================*/