/* Variables */
:root {
    /* Colores principales */
    --blanco: #FFFFFF;
    --gris: #333333;
    --verde-azulado: #014752;
    --amarillo: #EF9C04;
    --fondo: #FFFCF9;

    /* Colores secundarios */
    --tierra: #B85C38;
    --esmeralda: #006A67;
    --morado: #674188;
    --mostaza: #C07D07;

    /* Colores de estados */
    --link: #0D6EFD;
    --success: #198754;
    --danger: #DC3545;
    --warning: #FFC107;
    --info: #0DCAF0;

    /* Familias tipográficas */
    --fuente-titulos: 'DM Serif Display', serif;
    --fuente-textos: 'Montserrat', sans-serif;

    /* Tamaños de fuente */
    --h1: clamp(2.5rem, 5vw, 4rem);         /* 40px - 64px */
    --h2: clamp(2rem, 4vw, 3rem);           /* 32px - 48px */
    --h3: clamp(1.5rem, 3vw, 2rem);         /* 24px - 32px */
    --h4: clamp(1.25rem, 2vw, 1.5rem);      /* 20px - 24px */
    --h5: clamp(1.125rem, 1.75vw, 1.25rem); /* 18px - 20px */
    --body: clamp(1rem, 1.5vw, 1.125rem);   /* 16px - 18px */
    --caption: clamp(0.875rem, 1vw, 1rem);  /* 14px - 16px */

    /* Grosor de fuente */
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
}

/* Estilos tipográficos base */
body {
    font-family: var(--fuente-textos);
    font-size: var(--body);
    line-height: 1.6;
    color: var(--gris);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--fondo);
    justify-content: space-between;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    line-height: 1.2;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

.texto-pequeno {
    font-size: var(--caption);
}

/* Grosor de fuente */
.fuente-light {
    font-weight: var(--light);
}

.fuente-regular {
    font-weight: var(--regular);
}

.fuente-medium {
    font-weight: var(--medium);
}

.fuente-semibold {
    font-weight: var(--semibold);
}