@import "tailwindcss";

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

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

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

@font-face {
    font-family: "SemiBold";
    src: url("../../fonts/Kanit/Kanit-SemiBold.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";

        --color-primary: #2fcad3;
        --color-primary-dark: #10949c;
        --color-accent-dark: #3a4759;
        --color-black: #1e1e1e;
    }
}

.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);
}