/* typhography.css */

:root {
    --font-primary: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --text-accent-color: var(--text-accent);

    /* Pesos comunes */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* Line-heights */
    --lh-tight: 1.1;
    --lh-normal: 1.4;
    --lh-relaxed: 1.6;
}

.h0 {
    font-size: clamp(3.5rem, 10vw, 6rem);
    line-height: var(--lh-tight);
    font-weight: var(--weight-bold);
    margin: 0;
}

.h0.accent {
    color: var(--text-accent-color);
}

.h1 {
    font-size: 4rem;     /* 64px */
    line-height: var(--lh-tight);
    font-weight: var(--weight-bold);
}

.h2 {
    font-size: 2.5rem;   /* 40px */
    line-height: var(--lh-tight);
    font-weight: var(--weight-bold);
}

.h3 {
    font-size: 2rem;     /* 32px */
    line-height: var(--lh-tight);
    font-weight: var(--weight-medium);
}

.h4 {
    font-size: 1.75rem;  /* 28px */
    line-height: var(--lh-tight);
    font-weight: var(--weight-medium);
}

.h5 {
    font-size: 1.625rem; /* 26px */
    line-height: var(--lh-tight);
    font-weight: var(--weight-medium);
}

.body {
    font-size: 1.5rem;   /* 24px */
    line-height: var(--lh-relaxed);
    font-weight: var(--weight-regular);
}

.p {
    font-size: 1.25rem;   /* 24px */
    line-height: var(--lh-relaxed);
    color: var(--text-gray);
    margin: 20px 0;
}