@import "tailwindcss";

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

@font-face {
    font-family: "Light";
    src: url("../../fonts/Mercedes/MBCorpoSText-Light.otf");
}

@font-face {
    font-family: "Medium";
    src: url("../../fonts/Mercedes/MBCorpoSTextOffice-Bold.ttf");
}

@font-face {
    font-family: "SemiBold";
    src: url("../../fonts/Mercedes/MBCorpoSTextOffice-Bold.ttf");
}

@font-face {
    font-family: "Title Regular";
    src: url("../../fonts/Mercedes/MBCorpoATitle-Regular.otf");
}

@font-face {
    font-family: "Title Light";
    src: url("../../fonts/Mercedes/MBCorpoSTitle-Light.otf");
}

@font-face {
    font-family: "Title Bold";
    src: url("../../fonts/Mercedes/MBCorpoSTitle-Bold.otf");
}


@layer theme {
    :root{
        --banner-desktop-height: calc(100vw * 0.42) ;
        --banner-mobile-height: calc(100vh * 0.90);
        --banner-color-height: calc(100vh * 0.50);

        --font-regular: "Regular", "sans-serif";
        --font-light: "Light", "sans-serif";
        --font-medium : "Medium", "sans-serif";
        --font-semibold : "SemiBold", "sans-serif";
        --font-title-regular: "Title Regular", "sans-serif";
        --font-title-light: "Title Light", "sans-serif";
        --font-title-bold : "Title Bold", "sans-serif";

        --color-primary : #101010;
        --color-primary-light : #424242;
        --color-accent : #0079D6;
        --color-accent-dark : #02599D;
    }
}

/* FONT */

.font-regular {
    font-family: var(--font-regular);
}

.font-light {
    font-family: var(--font-light);
}

.font-medium{
    font-family: var(--font-medium);
}

.font-semibold{
    font-family: var(--font-semibold);
}

.font-title-regular {
    font-family: var(--font-title-regular);
    letter-spacing : var(--tracking-wide);
}

.font-title-light {
    font-family: var(--font-title-light);
    letter-spacing : var(--tracking-wide);

}

.font-title-bold{
    font-family: var(--font-title-bold);
    letter-spacing : var(--tracking-wide);
}

/* CUSTOM */
.bg-product-icon{
    background-repeat: no-repeat;
    background-size: 40%;
    background-position-x: 16px;
}

/* LAYOUT */
.content-layout{
    margin-top: 118px;
}


/* SMARTPHONE */
@media (max-width: 600px) {
    /* DISPLAY */
    .content-layout {
        margin-top: 66px;
    }
}