@import "tailwindcss";

@font-face {
    font-family: "Italic";
    src: url("../../fonts/Foton/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf");
}

@font-face {
    font-family: "Extra Light";
    src: url("../../fonts/Foton/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf");
}

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

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

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

@font-face {
    font-family: "Text";
    src: url("../../fonts/Foton/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf");
}

@layer theme {
    :root {
        --banner-desktop-height: calc(100vh);
        --banner-mobile-height: calc(100vh * 0.99);
        --banner-color-height: calc(100vh * 0.5);
        --banner-category-mobile-height: 400px;

        --font-regular: "Text", "sans-serif";
        --font-light: "Light", "sans-serif";
        --font-medium: "Medium", "sans-serif";
        --font-semibold: "Bold", "sans-serif";

        --color-primary: #041954;
        --color-primary-light: #CDD1DD;
        --color-secondary: #10dcff;
        --color-primary-light: #cdd1dd;
        --color-accent: #1789ff;
        --color-accent-dark: #3a4759;
        --color-soft-grey: #f1f1f1;
        --color-dark-grey: #1E1E1E;
    }
}

/* FONT */

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

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

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

.font-regular,
.font-text-regular {
    font-family: var(--font-regular);
    font-weight: 400;
}

.font-text-light {
    font-family: var(--font-regular);
    font-weight: 300;
}

.font-text-semibold {
    font-family: var(--font-regular);
    font-weight: 500;
}

.font-text-bold {
    font-family: var(--font-regular);
    font-weight: 700;
}

.font-text-black {
    font-family: var(--font-regular);
    font-weight: 900;
}

/* 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;
    } */
}

@layer utilities {
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}