@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,500;0,700;1,500;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');

:root {
    /* === Fuentes === */
    --font-heading: 'Poppins', 'Montserrat', sans-serif;
    --font-body: 'Lato', 'Nunito', sans-serif;

    /* === Colores Primarios === */
    --primary-100: #FF3E32; /* Rojo corporativo */
    --primary-200: #003C6F; /* Azul corporativo */
    --primary-300: #000000; /* Negro sólido */
    --primary-400: #F3F5F7; /* Blanco/gris claro fondo principal */

    /* === Colores Secundarios === */
    --secondary-100: #F15B40; /* Rojo anaranjado */
    --secondary-200: #FBB03B; /* Amarillo intenso */
    --secondary-300: #FBBF6D; /* Amarillo pastel */
    --secondary-400: #0F6E8C; /* Azul océano */
    --secondary-500: #148C9A; /* Verde-azulado */
    --secondary-600: #6EAAA0; /* Verde suave */
    --secondary-700: #B0C2CB; /* Gris azulado */
    --secondary-800: #C5D5DF; /* Gris claro */
    --secondary-900: #DAEBF5; /* Gris muy claro */

    /* === Estados === */
    --status-red: #FF3E32; /* Estado crítico */
    --status-green: #2ec75c; /* Estado correcto */
    --status-yellow: #FBB03B; /* Estado en atención */

    /* === Texto === */
    --text-100: #000000; /* Texto principal */
    --text-200: #313d44; /* Texto secundario */

    /* === Fondos === */
    --bg-100: #FFFFFF; /* Fondo base */
    --bg-200: #dbdbdb; /* Fondo secciones */
    --bg-300: #919191; /* Bordes y tarjetas */
}

body{
    font-family: var(--font-body);
}

h1,
h2{
    font-family: var(--font-heading);
    font-weight: 700;
}

h3{
    font-family: var(--font-body);
    font-weight: 500;
}

h4{
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 500;
}

h5{
    font-family: var(--font-body);
    font-weight: 700;
}

h6{
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 700;
}