@layer theme{@layer tokens {
:root {
	--english:  "InterVariable", "Inter", system-ui, -apple-system, sans-serif;
	--japanese: "Noto Sans JP", system-ui, sans-serif;
	--display:  "Molle", cursive;
	--type-scale: 1;
	--title-shadow:
		2px 2px 0 #3465e2, 4px 5px 0 #23c3d9, 6px 8px 0 #b0324a,
		8px 11px 0 #ee1d1d, 10px 15px 0 #e08a2f;
	--bg:          #f6ead0;
	--surface:     #fffaf0;
	--surface-alt: #fdf3df;
	--ink:         #413623;
	--ink-muted:   #6b5c3f;
	--heading:     #2d2614;
	--accent:      #bc5a1c;
	--accent-soft: #f6e4c8;
	--note-bar:    #bc5a1c;
	--line:        #e5d5b3;
	--title-top:   #2d2614;
	--badge-text:  #fffaf0;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--bg: #1b1917; --surface: #262320; --surface-alt: #211e1b;
		--ink: #e9e1d2; --ink-muted: #b1a58f; --heading: #f5eddd;
		--accent: #e2914f; --accent-soft: #322c23; --note-bar: #e2914f;
		--line: #3a352d; --title-top: #f5eddd; --badge-text: #1b1917;
	}
}
:root[data-theme="cream"] {
	--bg: #f6ead0; --surface: #fffaf0; --surface-alt: #fdf3df;
	--ink: #413623; --ink-muted: #6b5c3f; --heading: #2d2614;
	--accent: #bc5a1c; --accent-soft: #f6e4c8; --note-bar: #bc5a1c;
	--line: #e5d5b3; --title-top: #2d2614; --badge-text: #fffaf0;
	--title-shadow: 2px 2px 0 #3465e2, 4px 5px 0 #23c3d9, 6px 8px 0 #b0324a, 8px 11px 0 #ee1d1d, 10px 15px 0 #e08a2f;
}
:root[data-theme="dark"] {
	--bg: #1b1917; --surface: #262320; --surface-alt: #211e1b;
	--ink: #e9e1d2; --ink-muted: #b1a58f; --heading: #f5eddd;
	--accent: #e2914f; --accent-soft: #322c23; --note-bar: #e2914f;
	--line: #3a352d; --title-top: #f5eddd; --badge-text: #1b1917;
	--title-shadow: 2px 2px 0 #3465e2, 4px 5px 0 #23c3d9, 6px 8px 0 #b0324a, 8px 11px 0 #ee1d1d, 10px 15px 0 #e08a2f;
}
:root[data-theme="sol-light"] {
	--bg: #fdf6e3; --surface: #f2ecd8; --surface-alt: #f5efdd;
	--ink: #4c5f66; --ink-muted: #657b83; --heading: #073642;
	--accent: #cb4b16; --accent-soft: #eae3cf; --note-bar: #cb4b16;
	--line: #ded6bd; --title-top: #073642; --badge-text: #fdf6e3;
	--title-shadow: 2px 2px 0 #3465e2, 4px 5px 0 #23c3d9, 6px 8px 0 #b0324a, 8px 11px 0 #ee1d1d, 10px 15px 0 #e08a2f;
}
:root[data-theme="sol-dark"] {
	--bg: #002b36; --surface: #073642; --surface-alt: #04303b;
	--ink: #93a1a1; --ink-muted: #839496; --heading: #eee8d5;
	--accent: #cb4b16; --accent-soft: #073b47; --note-bar: #cb4b16;
	--line: #0d4552; --title-top: #eee8d5; --badge-text: #eee8d5;
	--title-shadow: 2px 2px 0 #3465e2, 4px 5px 0 #23c3d9, 6px 8px 0 #b0324a, 8px 11px 0 #ee1d1d, 10px 15px 0 #e08a2f;
}
:root[data-theme="high"] {
	--bg: #ffffff; --surface: #ffffff; --surface-alt: #f2f2f2;
	--ink: #000000; --ink-muted: #1f1f1f; --heading: #000000;
	--accent: #0140b3; --accent-soft: #e8eefb; --note-bar: #0140b3;
	--line: #000000; --title-top: #000000; --badge-text: #ffffff;
	--title-shadow: none;
}
html {
	background-color: var(--bg);
	color: var(--ink);
	transition: background-color 0.25s ease, color 0.25s ease;
}
a, a:active, a:visited { color: var(--accent); }
}
}