@import "tailwindcss";

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

@font-face {
    font-family: "Light";
    src: url("../../fonts/Gwm/Sora-Light.ttf");
}

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

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

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

@font-face {
    font-family: "ExtraBold";
    src: url("../../fonts/Gwm/Sora-ExtraBold.ttf");
}

@layer theme {
    :root {
        --banner-desktop-height: calc(100vw * 0.42);
        --banner-mobile-height: 760px;

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

        --color-primary: #b21112;
        --color-dark: #1e1e1e;
        --color-primary-light: #07a647;
        --color-grey-light-gwm: #f3f2f8;
    }
}

.logo-navigation {
    height: 40px;
}

.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-bold {
    font-family: var(--font-bold);
}

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

.text-primary {
    color: var(--color-primary);
}

.text-dark {
    color: var(--color-dark);
}

.product-menu.font-color-black {
    color: var(--color-primary);
}

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

.product-list .font-color-primary-dark {
    color: var(--color-primary);
    font-family: var(--font-bold);
}

.pricelist-box .bg-\(--color-primary\) {
    background-color: var(--color-dark);
}

.pricelist-box h1 {
    font-family: var(--font-bold);
}

.pricelist-box .bg-\(--color-primary-light\) {
    background-color: white !important;
}

#article h1 {
    font-family: var(--font-bold);
}

#article .date {
    color: var(--color-primary) !important;
}

#colors h1 {
    font-family: var(--font-bold);
}

.color-image .colors-name {
    font-family: var(--font-extrabold);
    font-size: 32px;
    color: var(--color-dark);
}

#gallery h1 {
    font-family: var(--font-bold);
}

#download-brochure .title,
#download-brochure .vehicle-name {
    font-family: var(--font-semibold);
}

@media (max-width: 600px) {
    .color-image .colors-name {
        font-size: 20px;
    }
}