@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-body: "Roboto Condensed", sans-serif;
    --font-secondary: "Bebas Neue", sans-serif;
    --font-title: "Plus Jakarta Sans", sans-serif;
    --body: 1.1125rem;

    --title-xl: 5rem;
    --title-l: 3.5rem;
    --title-m: 3rem;
    --title-s: 2.25rem;
    --title-xs: 1.75rem;
    --title-xxs: 1.25rem;

    --black: 900;
    --extrabold: 800;
    --bold: 700;
    --semibold: 600;
    --medium: 500;
    --regular: 400;
    --light: 300;

    --c-negro: #111216;
    --c-gris: #5e5f62;
    --c-lila: #5F3FA3;
    --c-lavanda-suave: #EFE7FF;
    --c-verde-deporte: #1E7F5F;
    --c-acento-micro: #9FDE35;
    --c-blanco-papel: #F7F7FA;
    --c-blanco: #ffffff;

    --b-radius-1: 2.5rem;
    --b-radius-2: 5rem;

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

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1024px) {
    :root {
        --title-xl: 4rem;
        --title-l: 3.2rem;
        --title-m: 2.6rem;
        --title-s: 2rem;
        --title-xs: 1.6rem;
        --title-xxs: 1.2rem;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --title-xl: 2.9rem;
        --title-l: 2.4rem;
        --title-m: 2rem;
        --title-s: 1.6rem;
        --title-xs: 1.3rem;
        --title-xxs: 1.1rem;
    }
}