/* puaj.club theme for gamja, loaded after gamja's own stylesheet.
   Same palette and UX as the landing page (../style.css):
   light: early-browser grey page, Win-style navy selection
   dark:  BBS / DOS text mode, CGA palette, Norton Commander blue panels */

:root {
	color-scheme: light;
	--mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* puaj palette */
	--paper: #c0c0c0;
	--ink: #000000;
	--muted: #404040;
	--rule: #808080;
	--accent: #000080;
	--link: #0000ee;
	--field-bg: #ffffff;
	--field-ink: #000000;
	--select-bg: #000080;
	--select-ink: #ffffff;
	--unread: #800000;
	--mention: #0000ee;
	--danger: #800000;
	--ok: #005000;
	--warn: #703000;

	/* gamja variables */
	--main-background: var(--paper);
	--main-color: var(--ink);
	--sidebar-background: #a8a8a8;
	--expander-background: #a8a8a8;
	--expander-background-hover: #909090;
	--expander-border: var(--ink);
	--button-color: var(--accent);
	--button-background: transparent;
	--button-background-hover: transparent;
	--button-border: transparent;
	--danger-button-color: var(--danger);
	--danger-button-background: transparent;
	--danger-button-background-hover: transparent;
	--danger-button-border: transparent;
	--green: var(--ok);
	--gray: var(--muted);
	--red: var(--danger);

	/* nick colours: dark enough to read on grey */
	--nick-1: #000080;
	--nick-2: #800000;
	--nick-3: #005000;
	--nick-4: #600060;
	--nick-5: #703000;
	--nick-6: #004848;
	--nick-7: #0000c0;
	--nick-8: #383838;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--paper: #000000;
		--ink: #aaaaaa;
		--muted: #aaaaaa;
		--rule: #555555;
		--accent: #ffff55;
		--link: #55ffff;
		--field-bg: #0000aa;
		--field-ink: #ffffff;
		--select-bg: #00aaaa;
		--select-ink: #000000;
		--unread: #ffff55;
		--mention: #ff55ff;
		--danger: #ff5555;
		--ok: #55ff55;
		--warn: #ffff55;

		--sidebar-background: #0000aa;
		--expander-background: #0000aa;
		--expander-background-hover: #0000cc;
		--expander-border: #ffffff;

		--nick-1: #55ffff;
		--nick-2: #ffff55;
		--nick-3: #ff55ff;
		--nick-4: #55ff55;
		--nick-5: #ff5555;
		--nick-6: #00aaaa;
		--nick-7: #00aa00;
		--nick-8: #ffffff;
	}

	/* DOS panels: white text on blue */
	#buffer-list, #member-list {
		color: #ffffff;
	}
	#buffer-list li a, #member-list li a.nick {
		color: #ffffff;
	}
	#member-list li a.away {
		color: #aaaaaa;
	}
}

/* ---- base: monospace everywhere, flat like the landing ---- */
html {
	scrollbar-color: var(--rule) transparent;
}

body, button, input, select, textarea {
	font-family: var(--mono);
}

body {
	background: var(--paper);
}

a {
	color: var(--link);
}

/* buttons as bracketed text, like the landing page */
button {
	color: var(--button-color);
	background: transparent;
	border: none;
	font-size: inherit;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	transition: none;
}
button:hover {
	background: transparent;
	text-decoration: underline;
}
button::before {
	content: "[ ";
}
button::after {
	content: " ]";
}
button.expander::before, button.expander::after,
button.dialog-close::before, button.dialog-close::after,
#error-msg button::before, #error-msg button::after {
	content: none;
}
button:focus-visible, a:focus-visible, input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* form fields: flat boxes in the "code" colours of the landing */
form input[type="text"],
form input[type="username"],
form input[type="password"],
form input[type="url"],
form input[type="email"],
form input[type="search"] {
	color: var(--field-ink);
	background: var(--field-bg);
	border: 1px solid var(--rule);
	border-radius: 0;
	padding: 0.25rem 0.375rem;
}
form input[type="text"]:focus,
form input[type="username"]:focus,
form input[type="password"]:focus,
form input[type="url"]:focus,
form input[type="email"]:focus,
form input[type="search"]:focus {
	outline: 0;
	border-color: var(--accent);
}

#composer input {
	color: var(--main-color);
}
#composer input::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* ---- sidebars and header ---- */
#buffer-list li.error a {
	color: var(--danger);
}
#buffer-list li.unread-message a {
	color: var(--unread);
	font-weight: 600;
}
#buffer-list li.unread-highlight a {
	color: var(--mention);
	font-weight: 600;
}
#buffer-list li.active a {
	color: var(--select-ink);
	background-color: var(--select-bg);
}

#buffer-header, #member-list-header, #composer {
	border-color: var(--rule);
}
#buffer-header .status-here { color: var(--ok); }
#buffer-header .status-gone { color: var(--warn); }
#buffer-header .status-offline { color: var(--danger); }

.membership.owner { color: var(--nick-2); }
.membership.admin { color: var(--nick-1); }
.membership.operator { color: var(--nick-3); }
.membership.halfop { color: var(--nick-5); }
.membership.voice { color: var(--nick-4); }

/* ---- message buffer ---- */
#buffer .error { color: var(--danger); }
#buffer .me-tell { color: var(--warn); }
#buffer .highlight .nick {
	color: var(--select-ink);
	background-color: var(--select-bg);
}

#buffer .nick-1, #buffer .nick-9 { color: var(--nick-1); }
#buffer .nick-2, #buffer .nick-10 { color: var(--nick-2); }
#buffer .nick-3, #buffer .nick-11 { color: var(--nick-3); }
#buffer .nick-4, #buffer .nick-12 { color: var(--nick-4); }
#buffer .nick-5, #buffer .nick-13 { color: var(--nick-5); }
#buffer .nick-6, #buffer .nick-14 { color: var(--nick-6); }
#buffer .nick-7, #buffer .nick-15 { color: var(--nick-7); }
#buffer .nick-8, #buffer .nick-16 { color: var(--nick-8); }

#buffer .date-separator { color: var(--muted); }
#buffer .date-separator::before,
#buffer .date-separator::after { border-color: var(--rule); }
#buffer .unread-separator { color: var(--unread); }
#buffer .unread-separator::before,
#buffer .unread-separator::after { border-color: var(--unread); }

/* ---- dialogs, errors ---- */
.dialog .dialog-body {
	border: 2px solid var(--rule);
}
#error-msg,
#error-msg a {
	color: var(--paper);
	background-color: var(--danger);
}
.error-text {
	color: var(--danger);
}
kbd {
	background: var(--field-bg);
	color: var(--field-ink);
	border: 1px solid var(--rule);
	box-shadow: none;
	border-radius: 0;
	font-family: var(--mono);
}
ul.switcher-list li a.selected {
	color: var(--select-ink);
	background-color: var(--select-bg);
}