/* Brand tokens. Source of truth: brand/queueconsole-brand-guide.md */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
	--qc-control-h: 3rem; --qc-bg: #FFFFFF; --qc-band: #0A0A0A; --qc-on-band: #F5F5F5; --qc-surface: #F2F2F2;
	--qc-ink: #0A0A0A; --qc-ink-2: #5C5C5C; --qc-line: #E0E0E0;
	--qc-signal: #FFD500; --qc-on-signal: #0A0A0A;
	--qc-go: #22C55E; --qc-slow: #FF8A00; --qc-stop: #F0432F;

	--qc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--qc-font-body: "Inter", system-ui, sans-serif;
	--qc-font-mono: "JetBrains Mono", ui-monospace, monospace;

	--qc-ease: cubic-bezier(.2, .8, .2, 1);
	--qc-dur: 500ms;
	--qc-radius: 6px;
	--qc-header-h: 53px; /* sticky header: 12px padding x2 + 28px logo + 1px border */
	/* form fields: same recipe as the dashboard (input.tsx): transparent / faint wash, line border, 3px focus ring */
	--qc-field-bg: transparent; --qc-field-border: var(--qc-line); --qc-field-focus: #0A0A0A; --qc-field-ring: rgba(10, 10, 10, .5); --qc-field-radius: 4px;
	/* page transitions (transitions.css) */
	--vt-dur: 450ms;
	--vt-ease: var(--qc-ease);
	--vt-dim: .28; /* outgoing page opacity at the end of the wipe (brand emphasis dim) */
	--vt-shift: 6%; /* how far the outgoing page drifts */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--qc-bg: #0A0A0A; --qc-band: #181818; --qc-surface: #141414;
		--qc-ink: #F5F5F5; --qc-ink-2: #A3A3A3; --qc-line: #2A2A2A;
		--qc-field-bg: rgba(255, 255, 255, .05); --qc-field-border: rgba(255, 255, 255, .16); --qc-field-focus: #FFD500; --qc-field-ring: rgba(255, 213, 0, .5);
	}
}
:root[data-theme="dark"] {
	--qc-bg: #0A0A0A; --qc-band: #181818; --qc-surface: #141414;
	--qc-ink: #F5F5F5; --qc-ink-2: #A3A3A3; --qc-line: #2A2A2A;
	--qc-field-bg: rgba(255, 255, 255, .05); --qc-field-border: rgba(255, 255, 255, .16); --qc-field-focus: #FFD500; --qc-field-ring: rgba(255, 213, 0, .5);
}

/* Map brand tokens onto GeneratePress */
body { background: var(--qc-bg); color: var(--qc-ink); font-family: var(--qc-font-body); font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--qc-font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: inherit; }
h1 { letter-spacing: -.045em; line-height: .9; }
code, kbd, pre, .qc-mono { font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; }
a { color: inherit; }
.qc-band { background: var(--qc-band); color: var(--qc-on-band); }
.qc-signal { background: var(--qc-signal); color: var(--qc-on-signal); }