/**
 * Design tokens: theme colors, type, spacing, and a fixed 1px retro border.
 *
 * Low, normal, and high foreground colors meet 3:1, 4.5:1, and 7:1
 * background contrast. Monochrome palettes use exactly two foreground
 * colors and one background.
 */

@font-face {
	font-family: "IBM VGA 8x16";
	src: url("../fonts/ibm-vga-8x16.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-ui: "IBM VGA 8x16", ui-monospace, "Cascadia Mono", "DejaVu Sans Mono",
		monospace;
	--font-size-ui: 20px;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--app-max-width: 1152px;
	--control-min-height: 2.75rem;

	--color-bg: var(--color-bg-normal);
	--color-text: var(--color-text-normal);
	--color-text-intense: var(--color-text-intense-normal);
	--color-title: var(--color-title-normal);
	--color-status: var(--color-status-normal);
	--color-status-intense: var(--color-status-intense-normal);
	--color-accent: var(--color-accent-normal);
	--color-accent-intense: var(--color-accent-intense-normal);
	--color-selected-bg: var(--color-selected-bg-normal);
	--color-selected-text: var(--color-selected-text-normal);

	--retro-border-width: 1px;
}

html[data-font-size="16"] {
	--font-size-ui: 16px;
}

html[data-font-size="20"] {
	--font-size-ui: 20px;
}

html[data-font-size="24"] {
	--font-size-ui: 24px;
}

html[data-contrast="low"] {
	--color-bg: var(--color-bg-low);
	--color-text: var(--color-text-low);
	--color-text-intense: var(--color-text-intense-low);
	--color-title: var(--color-title-low);
	--color-status: var(--color-status-low);
	--color-status-intense: var(--color-status-intense-low);
	--color-accent: var(--color-accent-low);
	--color-accent-intense: var(--color-accent-intense-low);
	--color-selected-bg: var(--color-selected-bg-low);
	--color-selected-text: var(--color-selected-text-low);
}

html[data-contrast="normal"] {
	--color-bg: var(--color-bg-normal);
	--color-text: var(--color-text-normal);
	--color-text-intense: var(--color-text-intense-normal);
	--color-title: var(--color-title-normal);
	--color-status: var(--color-status-normal);
	--color-status-intense: var(--color-status-intense-normal);
	--color-accent: var(--color-accent-normal);
	--color-accent-intense: var(--color-accent-intense-normal);
	--color-selected-bg: var(--color-selected-bg-normal);
	--color-selected-text: var(--color-selected-text-normal);
}

html[data-contrast="high"] {
	--color-bg: var(--color-bg-high);
	--color-text: var(--color-text-high);
	--color-text-intense: var(--color-text-intense-high);
	--color-title: var(--color-title-high);
	--color-status: var(--color-status-high);
	--color-status-intense: var(--color-status-intense-high);
	--color-accent: var(--color-accent-high);
	--color-accent-intense: var(--color-accent-intense-high);
	--color-selected-bg: var(--color-selected-bg-high);
	--color-selected-text: var(--color-selected-text-high);
}

html[data-theme="dark"] {
	--color-title-low: #AA6600;
	--color-title-normal: #FFFF55;
	--color-title-high: #FFFF00;
	--color-text-low: #666666;
	--color-text-normal: #AAAAAA;
	--color-text-high: #C6C6C6;
	--color-text-intense-low: #AAAAAA;
	--color-text-intense-normal: #FFFFFF;
	--color-text-intense-high: #FFFFFF;
	--color-status-low: #168500;
	--color-status-normal: #00AA00;
	--color-status-high: #35D04B;
	--color-status-intense-low: #00A33A;
	--color-status-intense-normal: #55FF55;
	--color-status-intense-high: #8CFF8C;
	--color-accent-low: #257080;
	--color-accent-normal: #00AAAA;
	--color-accent-high: #24DDE3;
	--color-accent-intense-low: #477A9E;
	--color-accent-intense-normal: #55C7FF;
	--color-accent-intense-high: #77C5FF;
	--color-bg-low: #141414;
	--color-bg-normal: #000000;
	--color-bg-high: #000000;
	--color-selected-bg-low: #666666;
	--color-selected-bg-normal: #AAAAAA;
	--color-selected-bg-high: #C6C6C6;
	--color-selected-text-low: #141414;
	--color-selected-text-normal: #000000;
	--color-selected-text-high: #000000;
}

html[data-theme="light"] {
	--color-title-low: #A50065;
	--color-title-normal: #A80000;
	--color-title-high: #8D0000;
	--color-text-low: #555555;
	--color-text-normal: #444444;
	--color-text-high: #333333;
	--color-text-intense-low: #3E3E9E;
	--color-text-intense-normal: #171799;
	--color-text-intense-high: #000078;
	--color-status-low: #386B00;
	--color-status-normal: #006B00;
	--color-status-high: #005A00;
	--color-status-intense-low: #00683E;
	--color-status-intense-normal: #005134;
	--color-status-intense-high: #003D28;
	--color-accent-low: #006C78;
	--color-accent-normal: #00616A;
	--color-accent-high: #00505A;
	--color-accent-intense-low: #5D497C;
	--color-accent-intense-normal: #4D3D75;
	--color-accent-intense-high: #3A285F;
	--color-bg-low: #B6B6B6;
	--color-bg-normal: #E3E3E3;
	--color-bg-high: #FFFFFF;
	--color-selected-bg-low: #555555;
	--color-selected-bg-normal: #444444;
	--color-selected-bg-high: #333333;
	--color-selected-text-low: #B6B6B6;
	--color-selected-text-normal: #E3E3E3;
	--color-selected-text-high: #FFFFFF;
}

html[data-theme="blue"] {
	--color-title-low: #B6A72A;
	--color-title-normal: #FFFF55;
	--color-title-high: #FFFF00;
	--color-text-low: #898989;
	--color-text-normal: #C4C4C4;
	--color-text-high: #E3E3E3;
	--color-text-intense-low: #C3C3C3;
	--color-text-intense-normal: #FFFFFF;
	--color-text-intense-high: #FFFFFF;
	--color-status-low: #6FCB74;
	--color-status-normal: #75E083;
	--color-status-high: #9BEE9B;
	--color-status-intense-low: #9DF79D;
	--color-status-intense-normal: #B5FFB5;
	--color-status-intense-high: #D0FFD0;
	--color-accent-low: #3999B8;
	--color-accent-normal: #55CBE8;
	--color-accent-high: #7FE8F0;
	--color-accent-intense-low: #7CB7DB;
	--color-accent-intense-normal: #9DD9FF;
	--color-accent-intense-high: #B7DCFF;
	--color-bg-low: #000071;
	--color-bg-normal: #0000AA;
	--color-bg-high: #000071;
	--color-selected-bg-low: #898989;
	--color-selected-bg-normal: #C4C4C4;
	--color-selected-bg-high: #E3E3E3;
	--color-selected-text-low: #000071;
	--color-selected-text-normal: #0000AA;
	--color-selected-text-high: #000071;
}

html[data-theme="mono-green"] {
	--color-title-low: #55FF55;
	--color-title-normal: #55FF55;
	--color-title-high: #55FF55;
	--color-text-low: #00AA00;
	--color-text-normal: #00AA00;
	--color-text-high: #00B000;
	--color-text-intense-low: #55FF55;
	--color-text-intense-normal: #55FF55;
	--color-text-intense-high: #55FF55;
	--color-status-low: #55FF55;
	--color-status-normal: #55FF55;
	--color-status-high: #55FF55;
	--color-status-intense-low: #55FF55;
	--color-status-intense-normal: #55FF55;
	--color-status-intense-high: #55FF55;
	--color-accent-low: #55FF55;
	--color-accent-normal: #55FF55;
	--color-accent-high: #55FF55;
	--color-accent-intense-low: #55FF55;
	--color-accent-intense-normal: #55FF55;
	--color-accent-intense-high: #55FF55;
	--color-bg-low: #204100;
	--color-bg-normal: #001300;
	--color-bg-high: #000000;
	--color-selected-bg-low: #00AA00;
	--color-selected-bg-normal: #00AA00;
	--color-selected-bg-high: #00B000;
	--color-selected-text-low: #204100;
	--color-selected-text-normal: #001300;
	--color-selected-text-high: #000000;
}

html[data-theme="mono-amber"] {
	--color-title-low: #FFCC00;
	--color-title-normal: #FFCC00;
	--color-title-high: #FFCC00;
	--color-text-low: #AA7200;
	--color-text-normal: #A87000;
	--color-text-high: #C68B00;
	--color-text-intense-low: #FFCC00;
	--color-text-intense-normal: #FFCC00;
	--color-text-intense-high: #FFCC00;
	--color-status-low: #FFCC00;
	--color-status-normal: #FFCC00;
	--color-status-high: #FFCC00;
	--color-status-intense-low: #FFCC00;
	--color-status-intense-normal: #FFCC00;
	--color-status-intense-high: #FFCC00;
	--color-accent-low: #FFCC00;
	--color-accent-normal: #FFCC00;
	--color-accent-high: #FFCC00;
	--color-accent-intense-low: #FFCC00;
	--color-accent-intense-normal: #FFCC00;
	--color-accent-intense-high: #FFCC00;
	--color-bg-low: #413100;
	--color-bg-normal: #1C0800;
	--color-bg-high: #000000;
	--color-selected-bg-low: #AA7200;
	--color-selected-bg-normal: #A87000;
	--color-selected-bg-high: #C68B00;
	--color-selected-text-low: #413100;
	--color-selected-text-normal: #1C0800;
	--color-selected-text-high: #000000;
}

html[data-theme="mono-dark"] {
	--color-title-low: #AAAAAA;
	--color-title-normal: #FFFFFF;
	--color-title-high: #FFFFFF;
	--color-text-low: #707070;
	--color-text-normal: #AAAAAA;
	--color-text-high: #AAAAAA;
	--color-text-intense-low: #AAAAAA;
	--color-text-intense-normal: #FFFFFF;
	--color-text-intense-high: #FFFFFF;
	--color-status-low: #AAAAAA;
	--color-status-normal: #FFFFFF;
	--color-status-high: #FFFFFF;
	--color-status-intense-low: #AAAAAA;
	--color-status-intense-normal: #FFFFFF;
	--color-status-intense-high: #FFFFFF;
	--color-accent-low: #AAAAAA;
	--color-accent-normal: #FFFFFF;
	--color-accent-high: #FFFFFF;
	--color-accent-intense-low: #AAAAAA;
	--color-accent-intense-normal: #FFFFFF;
	--color-accent-intense-high: #FFFFFF;
	--color-bg-low: #202020;
	--color-bg-normal: #141414;
	--color-bg-high: #000000;
	--color-selected-bg-low: #707070;
	--color-selected-bg-normal: #AAAAAA;
	--color-selected-bg-high: #AAAAAA;
	--color-selected-text-low: #202020;
	--color-selected-text-normal: #141414;
	--color-selected-text-high: #000000;
}

html[data-theme="mono-light"] {
	--color-title-low: #454545;
	--color-title-normal: #2D2D2D;
	--color-title-high: #000000;
	--color-text-low: #626262;
	--color-text-normal: #616161;
	--color-text-high: #515151;
	--color-text-intense-low: #454545;
	--color-text-intense-normal: #2D2D2D;
	--color-text-intense-high: #000000;
	--color-status-low: #454545;
	--color-status-normal: #2D2D2D;
	--color-status-high: #000000;
	--color-status-intense-low: #454545;
	--color-status-intense-normal: #2D2D2D;
	--color-status-intense-high: #000000;
	--color-accent-low: #454545;
	--color-accent-normal: #2D2D2D;
	--color-accent-high: #000000;
	--color-accent-intense-low: #454545;
	--color-accent-intense-normal: #2D2D2D;
	--color-accent-intense-high: #000000;
	--color-bg-low: #B6B6B6;
	--color-bg-normal: #E3E3E3;
	--color-bg-high: #FFFFFF;
	--color-selected-bg-low: #626262;
	--color-selected-bg-normal: #616161;
	--color-selected-bg-high: #515151;
	--color-selected-text-low: #B6B6B6;
	--color-selected-text-normal: #E3E3E3;
	--color-selected-text-high: #FFFFFF;
}

html[data-theme="hotdog-stand"] {
	--color-title-low: #990000;
	--color-title-normal: #FF0000;
	--color-title-high: #FF0000;
	--color-text-low: #000000;
	--color-text-normal: #000000;
	--color-text-high: #000000;
	--color-text-intense-low: #990000;
	--color-text-intense-normal: #FF0000;
	--color-text-intense-high: #FF0000;
	--color-status-low: #CC3333;
	--color-status-normal: #FF0000;
	--color-status-high: #FF0000;
	--color-status-intense-low: #990000;
	--color-status-intense-normal: #000000;
	--color-status-intense-high: #FF0000;
	--color-accent-low: #CC3333;
	--color-accent-normal: #FF0000;
	--color-accent-high: #FF0000;
	--color-accent-intense-low: #990000;
	--color-accent-intense-normal: #CC0000;
	--color-accent-intense-high: #FF0000;
	--color-bg-low: #888800;
	--color-bg-normal: #C8C800;
	--color-bg-high: #FFFF00;
	--color-selected-bg-low: #000000;
	--color-selected-bg-normal: #000000;
	--color-selected-bg-high: #000000;
	--color-selected-text-low: #888800;
	--color-selected-text-normal: #C8C800;
	--color-selected-text-high: #FFFF00;
}