@font-face {
  font-family: "Manrope-Bold";
  src: url("@/assets/fonts/Manrope-Bold.ttf");
}

@font-face {
  font-family: "Manrope-SemiBold";
  src: url("@/assets/fonts/Manrope-SemiBold.ttf");
}

@font-face {
    font-family: "Manrope-Medium";
    src: url("@/assets/fonts/Manrope-Medium.ttf");
}

@font-face {
  font-family: "Manrope-Regular";
  src: url("@/assets/fonts/Manrope-Regular.ttf");
}

/* ===== COLORS ===== */

:root {
    /* ===== TEXT ===== */
    --Text-Primary: #131313;
    --Text-Secondary: #424242;
    --Text-Tertiary: #FEFEFE;

    --Text-Brand-1: #3A5D71;
    --Text-Brand-2: #3BC9B1;
    --Text-Brand-3: #999999;

    /* ===== BACKGROUND ===== */
    --Background-Primary: #FEFEFE;
    --Background-Secondary: #F4F4F4;
    --Background-Tertiary: #2338440F;
    --Background-Brand: #233844;

    /* ===== BUTTON ===== */
    --Button-Primary: #3A5D71;
    --Button-Primary-hover: #2D4858;
    --Button-Primary-active: #203642;

    --Button-Secondary: #FEFEFE;
    --Button-Secondary-hover: #ECEDF0;
    --Button-Secondary-active: #E2E3E5;

    --Button-Tertiary: #131313;
    --Button-Tertiary-hover: #636363;
    --Button-Tertiary-active: #323232;

    --Button-Link: #298BD0;
    --Button-Link-hover: #2376B1;
    --Button-Link-active: #1D6192;

    /* ===== BORDER ===== */
    --Border-Primary: #F4F4F4;
    --Border-Secondary: #999999;
}

/* ===== TYPOGRAPHY ===== */

:root {
    @media (width > 1550px) {
        --H1-font-size: 80px;
        --H1-line-height: 96px;
        
        --H2-font-size: 72px;
        --H2-line-height: 86px;

        --H3-font-size: 52px;
        --H3-line-height: 62px;

        --Button-font-size: 20px;
        --Button-line-height: 24px;
    }

    @media (1024px < width <= 1550px) {
        --H1-font-size: 72px;
        --H1-line-height: 86px;
        
        --H2-font-size: 56px;
        --H2-line-height: 68px;

        --H3-font-size: 44px;
        --H3-line-height: 54px;

        --Button-font-size: 20px;
        --Button-line-height: 24px;
    }

    @media (510px < width <= 1024px) {
        --H1-font-size: 40px;
        --H1-line-height: 44px;
        
        --H2-font-size: 36px;
        --H2-line-height: 42px;

        --H3-font-size: 36px;
        --H3-line-height: 42px;

        --Button-font-size: 20px;
        --Button-line-height: 24px;
    }
    
    @media (width <= 510px) {
        --H1-font-size: 28px;
        --H1-line-height: 32px;
        
        --H2-font-size: 24px;
        --H2-line-height: 28px;

        --H3-font-size: 24px;
        --H3-line-height: 28px;

        --Button-font-size: 16px;
        --Button-line-height: 20px;
    }
}

:root {
    --XL-font-size: 32px;
    --XL-line-height: 40px;
    
    --L-font-size: 20px;
    --L-line-height: 28px;
    
    --M-font-size: 16px;
    --M-line-height: 22px;
    
    --S-font-size: 14px;
    --S-line-height: 20px;
    
    --XS-font-size: 12px;
    --XS-line-height: 16px;
}

:root {
    --Bold-font-family: "Manrope-Bold";
    --SemiBold-font-family: "Manrope-SemiBold";
    --Medium-font-family: "Manrope-Medium";
    --Regular-font-family: "Manrope-Regular";
}

/* ===== UTILS ===== */

.rect-size {
    --_size: var(--size, 24px);

    min-width: var(--_size);
    min-height: var(--_size);
    width: var(--_size);
    height: var(--_size);
    max-width: var(--_size);
    max-height: var(--_size);
    aspect-ratio: 1;
}

.masked-block {
    --_url: var(--url);

    mask: var(--_url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    background-color: currentColor;
}