/*
 * Quest log theme, "modern game UI": palette, type, and status tokens. Dark only.
 *
 * design/theme.md is canonical. Change it first, then this file.
 *
 * Fonts are open-licensed (SIL Open Font License 1.1). Load them from Google Fonts:
 * <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;600&display=swap">
 */

:root {
	color-scheme: dark;

	/* Surfaces: cool near-black */
	--ql-bg: #0a0c11;
	--ql-panel: #11151d;
	--ql-raised: #1a202b;
	--ql-rule: #262e3b;
	--ql-rule-strong: #3a4557;

	/* The accent: quest-giver amber, for calls to action and the markers */
	--ql-accent: #ffc53d;
	--ql-accent-dim: #8a6a1f;

	/* Text */
	--ql-text: #e8ecf3;
	--ql-muted: #97a2b4;
	--ql-link: #7cc4ff;

	/* Status and size hues: the loot-rarity ladder */
	--ql-grey: #9ba5b4;
	--ql-green: #4ade80;
	--ql-blue: #4da3ff;
	--ql-purple: #b98cff;
	--ql-orange: #ff9a3c;

	/* Size colours: colour a size through these, not the hues. */
	--ql-size-xs: var(--ql-grey);
	--ql-size-s: var(--ql-green);
	--ql-size-m: var(--ql-blue);
	--ql-size-l: var(--ql-purple);
	--ql-size-xl: var(--ql-orange);

	/* Type */
	--ql-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--ql-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ql-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * A panel: a raised surface with a hairline border and a short accent tab on
 * its top edge. Set --ql-tab to recolour the tab, for example to a size colour.
 */
.ql-panel {
	position: relative;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 40%), var(--ql-panel);
	color: var(--ql-text);
	font-family: var(--ql-font-body);
	border: 1px solid var(--ql-rule);
	border-radius: 6px;
	padding: 1.75rem;
}

.ql-panel::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.25rem;
	width: 2.5rem;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: var(--ql-tab, var(--ql-accent));
}

:where(.ql-panel) :is(h1, h2, h3) {
	font-family: var(--ql-font-display);
	font-weight: 700;
	color: var(--ql-text);
}

/*
 * A label above a heading: small, uppercase, tracked out, in the accent.
 * <p class="ql-eyebrow">Milestone 0</p>
 */
.ql-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--ql-font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ql-accent);
}

/* Status markers. Always pair the glyph with its label text. */
.ql-marker {
	font-weight: 700;
}

.ql-available,
.ql-turn-in {
	color: var(--ql-accent);
}

.ql-blocked {
	color: var(--ql-grey);
}

/* Size colours. Always show the size label as well as the colour. */
.ql-xs {
	color: var(--ql-size-xs);
}

.ql-s {
	color: var(--ql-size-s);
}

.ql-m {
	color: var(--ql-size-m);
}

.ql-l {
	color: var(--ql-size-l);
}

.ql-xl {
	color: var(--ql-size-xl);
}

/* A size label in its colour, for example <span class="ql-size ql-l">L</span>. */
.ql-size {
	display: inline-block;
	min-width: 2.4em;
	border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
	border-radius: 3px;
	padding: 0 0.4em;
	font-family: var(--ql-font-display);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Agent tokens, donated or spent. Display only. */
.ql-tokens {
	color: var(--ql-accent);
	font-weight: 600;
	white-space: nowrap;
}