@import "tailwindcss";

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

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

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

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

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

@font-face {
    font-family: "ExtraBold";
    src: url("../../fonts/Montserrat/Montserrat-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: #f87103;
        --color-black: #1e1e1e;
        --color-grey: #8f8f8f;
        --color-grey-light: #d9d9d9;
        --color-grey-dark: #6d6d6d;
        --color-dark: #222831;
    }
}

.logo-navigation {
    height: 56px;
}

.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-orange {
    color: var(--color-primary);
}

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

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

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

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

.bg-primary {
    background-color: var(--color-primary);
}

.bg-dark {
    background-color: var(--color-dark);
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-grey-light {
    background-color: var(--color-grey-light);
}

.bg-black {
    background-color: var(--color-black);
}

.navigation-item:hover {
    color: var(--color-primary);
}

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

@media (max-width: 600px) {
    .logo-navigation {
        height: 32px;
    }
}