/*
 * MicsRO theme - tokens.
 *
 * Direction A, "client window": the site is built from the same parts as the
 * RO client - a window with a gradient title bar and a close box, dotted
 * key/value rows, HP/SP/EXP meters, a dark chat box - on the soft blue ground
 * of the login screen. The values below are the two palette blocks of the
 * approved mockups, verbatim, plus a few text-safe variants where a fill
 * colour does not clear AA as small text (marked "ink").
 *
 * Light is the default. Dark follows the system unless the visitor picked a
 * theme with the header toggle, which sets data-theme on <html> before first
 * paint (see header.php). Every old variable name the views still use is
 * aliased in compat.css, so nothing goes unstyled while pages migrate.
 */

:root {
	/* ground and surfaces */
	--ground: #c9dbf0;
	--ground2: #dde8f6;
	--win: #f8fafd;
	--sel: #dfe8f8;
	--t1: #a3bbe3;
	--t2: #e6edf9;
	--line: #8ea5cf;
	--line-soft: #c4d1e8;
	--btn1: #ffffff;
	--btn2: #dbe4f3;
	--track: #d7deea;
	--chat: rgba(16, 20, 32, 0.92);
	--chat-ink: #f1f4fb;

	/* text */
	--ink: #24304a;
	--muted: #56647f;
	--accent: #34589f;
	--accent-ink: #ffffff;
	--pink: #d9587f;
	--pink-ink: #b8355f;

	/* meters and states */
	--hp: #35a447;
	--hp-ink: #1c7029;
	--hp-bg: rgba(53, 164, 71, 0.14);
	--sp: #3b6fd6;
	--sp-bg: rgba(59, 111, 214, 0.12);
	--exp: #d9ad1f;
	--exp-ink: #7d620a;
	--exp-bg: rgba(217, 173, 31, 0.16);
	--danger: #b53325;
	--danger-bg: rgba(181, 51, 37, 0.12);

	/* rank colours: fills from the mockup, inks that clear AA on --win */
	--gold: #b98a12;
	--gold-ink: #8a6608;
	--silver: #6f7c93;
	--silver-ink: #56647f;
	--bronze: #9a5a2c;
	--bronze-ink: #7d4620;

	/* chrome */
	--shadow-win: 0 2px 0 rgba(20, 30, 60, 0.12);
	--radius-win: 6px;
	--radius: 5px;
	--radius-sm: 4px;
	--radius-xs: 3px;

	/* type */
	--font-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-px: "Pixelify Sans", "Courier New", "Lucida Console", monospace; /* display words only: titles, title bars, the wordmark - never numerals (its 5 reads as S/8; digits take .n / .num, base.css) */
	--font-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

	/* layout */
	--page: 1200px;
	--head-h: 64px; /* the sticky header's height; base.css raises it where the tabs wrap */
	--gutter: 24px;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground: #121929;
		--ground2: #18213a;
		--win: #1f2840;
		--sel: #2b3a5e;
		--t1: #34466e;
		--t2: #26324f;
		--line: #43557f;
		--line-soft: #2f3d5e;
		--btn1: #2c3857;
		--btn2: #232d48;
		--track: #2b3552;
		--chat: rgba(10, 13, 22, 0.92);
		--chat-ink: #f1f4fb;

		--ink: #e6ecf8;
		--muted: #a3b0cb;
		--accent: #8fabf0;
		--accent-ink: #101829;
		--pink: #f08db0;
		--pink-ink: #f08db0;

		--hp: #5ccb6c;
		--hp-ink: #5ccb6c;
		--hp-bg: rgba(92, 203, 108, 0.16);
		--sp: #6f9bf2;
		--sp-bg: rgba(111, 155, 242, 0.16);
		--exp: #efc84a;
		--exp-ink: #efc84a;
		--exp-bg: rgba(239, 200, 74, 0.16);
		--danger: #ff8a80;
		--danger-bg: rgba(255, 138, 128, 0.14);

		--gold: #efc84a;
		--gold-ink: #efc84a;
		--silver: #c1cadb;
		--silver-ink: #c1cadb;
		--bronze: #e0a06b;
		--bronze-ink: #e0a06b;

		--shadow-win: 0 2px 0 rgba(0, 0, 0, 0.35);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--ground: #121929;
	--ground2: #18213a;
	--win: #1f2840;
	--sel: #2b3a5e;
	--t1: #34466e;
	--t2: #26324f;
	--line: #43557f;
	--line-soft: #2f3d5e;
	--btn1: #2c3857;
	--btn2: #232d48;
	--track: #2b3552;
	--chat: rgba(10, 13, 22, 0.92);
	--chat-ink: #f1f4fb;

	--ink: #e6ecf8;
	--muted: #a3b0cb;
	--accent: #8fabf0;
	--accent-ink: #101829;
	--pink: #f08db0;
	--pink-ink: #f08db0;

	--hp: #5ccb6c;
	--hp-ink: #5ccb6c;
	--hp-bg: rgba(92, 203, 108, 0.16);
	--sp: #6f9bf2;
	--sp-bg: rgba(111, 155, 242, 0.16);
	--exp: #efc84a;
	--exp-ink: #efc84a;
	--exp-bg: rgba(239, 200, 74, 0.16);
	--danger: #ff8a80;
	--danger-bg: rgba(255, 138, 128, 0.14);

	--gold: #efc84a;
	--gold-ink: #efc84a;
	--silver: #c1cadb;
	--silver-ink: #c1cadb;
	--bronze: #e0a06b;
	--bronze-ink: #e0a06b;

	--shadow-win: 0 2px 0 rgba(0, 0, 0, 0.35);

	color-scheme: dark;
}