@import url("./fonts/InterFont/Inter.css");
@import url("./fonts/MiSans/MiSans.css");

@import "tailwindcss";

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

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

a {
	@apply text-primary dark:text-dark-primary;
}

:root {
	font-family: "Inter", "MiSans", sans-serif;
	font-weight: 400;
	@apply bg-surface dark:bg-dark-surface text-on-surface dark:text-dark-on-surface;
}

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

@supports (font-variation-settings: normal) {
	:root {
		font-family: "Inter Variable", "MiSans VF", sans-serif;
		font-optical-sizing: auto;
		font-weight: 280;
	}
}

.content-box {
	@apply bg-background/80 dark:bg-dark-background/80 rounded-lg;
}