/* ---------- variable style ---------- */



@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap');


:root {

    /* fonts */
    --font-body: "Afacad Flux", sans-serif;
    --font-title: "Playfair Display", serif;

    --bold: bold;
    --medium: 500;
    --light: 300;
    --italic: italic;

    --title-large: 3rem;
    --title-medium: 2.25rem;
    --title-small: 1.5rem;

    --headline-large: 2.1rem;
    --headline-medium: 1.8rem;
    --headline-small: 1.5rem;

    --body: 1.1rem;

    /* colors */
    --c-negro: #2d2d2d;
    --c-primario: #9dc6ab;
    --c-primario-claro: #f4f9f2;
    --c-lila: #af9dc6;
    --c-lila-claro: #faf5fd;
    --c-beige: #FBF1EC;
    --c-blanco: #ffffff;
    --c-fondos: #f4f4f4;

    /* Transitions */
    --all-transition: all 0.4s ease;

}



@media screen and (max-width: 1024px) {
    :root {
        --title-large: 2.5rem;
        --title-medium: 2rem;
        --title-small: 1.25rem;
    }
}



@media screen and (max-width: 600px) {
    :root {
        --title-large: 2rem;
        --title-medium: 1.75rem;
        --title-small: 1.25rem;
    }
}