@import url("https://assets.projectcvsa.com/hm-sans/index.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--md-sys-color-background: #fff8f6;
	--md-sys-color-on-background: #2a1613;
	--md-sys-color-surface: #fff8f6;
	--md-sys-color-surface-dim: #f7d2cc;
	--md-sys-color-surface-bright: #fff8f6;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #fff0ee;
	--md-sys-color-surface-container: #ffe9e6;
	--md-sys-color-surface-container-high: #ffe2dd;
	--md-sys-color-surface-container-highest: #ffdad4;
	--md-sys-color-on-surface: #2a1613;
	--md-sys-color-surface-variant: #ffdad4;
	--md-sys-color-on-surface-variant: #5f3e39;
	--md-sys-color-inverse-surface: #422b27;
	--md-sys-color-inverse-on-surface: #ffedea;
	--md-sys-color-outline: #946e68;
	--md-sys-color-outline-variant: #eabcb4;
	--md-sys-color-shadow: #000000;
	--md-sys-color-scrim: #000000;
	--md-sys-color-surface-tint: #c00100;
	--md-sys-color-primary: #ee0000;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #ee0000;
	--md-sys-color-on-primary-container: #ffffff;
	--md-sys-color-inverse-primary: #ffb4a8;
	--md-sys-color-secondary: #b4271a;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #ff7460;
	--md-sys-color-on-secondary-container: #2f0000;
	--md-sys-color-tertiary: #6f4800;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #9f6900;
	--md-sys-color-on-tertiary-container: #ffffff;
	--md-sys-color-error: #ba1a1a;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-error-container: #ffdad6;
	--md-sys-color-on-error-container: #410002;
}

@media (prefers-color-scheme: light) {
	:root {
		--md-sys-color-background: #fff8f6;
		--md-sys-color-on-background: #2a1613;
		--md-sys-color-surface: #fff8f6;
		--md-sys-color-surface-dim: #f7d2cc;
		--md-sys-color-surface-bright: #fff8f6;
		--md-sys-color-surface-container-lowest: #ffffff;
		--md-sys-color-surface-container-low: #fff0ee;
		--md-sys-color-surface-container: #ffe9e6;
		--md-sys-color-surface-container-high: #ffe2dd;
		--md-sys-color-surface-container-highest: #ffdad4;
		--md-sys-color-on-surface: #2a1613;
		--md-sys-color-surface-variant: #ffdad4;
		--md-sys-color-on-surface-variant: #5f3e39;
		--md-sys-color-inverse-surface: #422b27;
		--md-sys-color-inverse-on-surface: #ffedea;
		--md-sys-color-outline: #946e68;
		--md-sys-color-outline-variant: #eabcb4;
		--md-sys-color-shadow: #000000;
		--md-sys-color-scrim: #000000;
		--md-sys-color-surface-tint: #c00100;
		--md-sys-color-primary: #ee0000;
		--md-sys-color-on-primary: #ffffff;
		--md-sys-color-primary-container: #ee0000;
		--md-sys-color-on-primary-container: #ffffff;
		--md-sys-color-inverse-primary: #ffb4a8;
		--md-sys-color-secondary: #b4271a;
		--md-sys-color-on-secondary: #ffffff;
		--md-sys-color-secondary-container: #ff7460;
		--md-sys-color-on-secondary-container: #2f0000;
		--md-sys-color-tertiary: #6f4800;
		--md-sys-color-on-tertiary: #ffffff;
		--md-sys-color-tertiary-container: #9f6900;
		--md-sys-color-on-tertiary-container: #ffffff;
		--md-sys-color-error: #ba1a1a;
		--md-sys-color-on-error: #ffffff;
		--md-sys-color-error-container: #ffdad6;
		--md-sys-color-on-error-container: #410002;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--md-sys-color-background: #210e0b;
		--md-sys-color-on-background: #ffdad4;
		--md-sys-color-surface: #210e0b;
		--md-sys-color-surface-dim: #210e0b;
		--md-sys-color-surface-bright: #4b332f;
		--md-sys-color-surface-container-lowest: #1b0907;
		--md-sys-color-surface-container-low: #2a1613;
		--md-sys-color-surface-container: #2f1a17;
		--md-sys-color-surface-container-high: #3a2421;
		--md-sys-color-surface-container-highest: #462f2b;
		--md-sys-color-on-surface: #ffdad4;
		--md-sys-color-surface-variant: #5f3e39;
		--md-sys-color-on-surface-variant: #eabcb4;
		--md-sys-color-inverse-surface: #ffdad4;
		--md-sys-color-inverse-on-surface: #422b27;
		--md-sys-color-outline: #b08780;
		--md-sys-color-outline-variant: #5f3e39;
		--md-sys-color-shadow: #000000;
		--md-sys-color-scrim: #000000;
		--md-sys-color-surface-tint: #ffb4a8;
		--md-sys-color-primary: #ffb4a8;
		--md-sys-color-on-primary: #690000;
		--md-sys-color-primary-container: #de0000;
		--md-sys-color-on-primary-container: #ffffff;
		--md-sys-color-inverse-primary: #c00100;
		--md-sys-color-secondary: #ffb4a8;
		--md-sys-color-on-secondary: #690000;
		--md-sys-color-secondary-container: #870100;
		--md-sys-color-on-secondary-container: #ffc9c0;
		--md-sys-color-tertiary: #feba54;
		--md-sys-color-on-tertiary: #452b00;
		--md-sys-color-tertiary-container: #966300;
		--md-sys-color-on-tertiary-container: #ffffff;
		--md-sys-color-error: #ffb4ab;
		--md-sys-color-on-error: #690005;
		--md-sys-color-error-container: #93000a;
		--md-sys-color-on-error-container: #ffdad6;
	}
}

.gradient-blur {
	inset: auto 0 0 0;
	pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
	position: absolute;
	inset: 0;
}
.gradient-blur::before {
	content: "";
	z-index: 1;
	backdrop-filter: blur(0.5px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 1) 12.5%,
		rgba(0, 0, 0, 1) 25%,
		rgba(0, 0, 0, 0) 37.5%
	);
}
.gradient-blur > div:nth-of-type(1) {
	z-index: 2;
	backdrop-filter: blur(1px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 12.5%,
		rgba(0, 0, 0, 1) 25%,
		rgba(0, 0, 0, 1) 37.5%,
		rgba(0, 0, 0, 0) 50%
	);
}
.gradient-blur > div:nth-of-type(2) {
	z-index: 3;
	backdrop-filter: blur(2px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 25%,
		rgba(0, 0, 0, 1) 37.5%,
		rgba(0, 0, 0, 1) 50%,
		rgba(0, 0, 0, 0) 62.5%
	);
}
.gradient-blur > div:nth-of-type(3) {
	z-index: 4;
	backdrop-filter: blur(4px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 37.5%,
		rgba(0, 0, 0, 1) 50%,
		rgba(0, 0, 0, 1) 62.5%,
		rgba(0, 0, 0, 0) 75%
	);
}
.gradient-blur > div:nth-of-type(4) {
	z-index: 5;
	backdrop-filter: blur(8px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, 1) 62.5%,
		rgba(0, 0, 0, 1) 75%,
		rgba(0, 0, 0, 0) 87.5%
	);
}
.gradient-blur > div:nth-of-type(5) {
	z-index: 6;
	backdrop-filter: blur(13px);
	mask: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 62.5%,
		rgba(0, 0, 0, 1) 75%,
		rgba(0, 0, 0, 1) 87.5%,
		rgba(0, 0, 0, 0) 100%
	);
}
.gradient-blur > div:nth-of-type(6) {
	z-index: 7;
	backdrop-filter: blur(24px);
	mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
}
.gradient-blur::after {
	content: "";
	z-index: 8;
	backdrop-filter: blur(48px);
	mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
}

a:not(.clear) {
	@apply text-primary;
}

:root {
	font-family: "HarmonyOS Sans SC", sans-serif;
	@apply bg-surface text-on-surface;
}

@font-face {
	font-family: "IPSD";
	src: url("/fonts/IBMPlexSansCondDigits-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}