/* Generated from public/styles.css by scripts/cpq/build-client.mjs. Edit the tracker's tokens, not this file. */
/*
 * Ad Pro Order Status - Swiss layout in the Ad Pro brand palette.
 *
 * Neutral page with Industrial Blue as punctuation: the headline's full stop,
 * the section rule, progress, the arrival card, the latest carrier update and
 * the primary button. The order's state is the largest type on the page;
 * progress is a segmented rule with an icon per step; every other section is a
 * labelled band. Hanken Grotesk throughout, monospace only for numeric data.
 * Palette source: Ad Pro Partners Brand Guidelines v1.0.
 */

:root {
	color-scheme: light dark;

	--font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
	--font-display: var(--font-sans);
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--radius: 4px;
	--rule: 1px;

	--page: #f4f4f4;
	--surface: #ffffff;
	--surface-sunk: #ececec;

	--ink: #1a1a1a;
	--body: #333333;
	--muted: #5f6368;
	--meta: #5f6368;
	--eyebrow: #5f6368;

	--rule-strong: #1a1a1a;
	--border: #cccccc;
	--hairline: #dedede;

	--accent: #3a5f7a;
	--accent-strong: #2d4a60;
	--accent-ink: #3a5f7a;
	--accent-tint: #e7edf1;

	/* Green marks what is finished, brick red what needs attention, sky what is moving. */
	--done: #3f6b37;
	--done-label: #3f6b37;
	--done-icon: #ffffff;
	--todo: #d4d4d4;
	--todo-label: #6b6b6b;
	--brick: #8e2a24;
	--sky: #36b4e5;
	--locator-bg: #2d4a60;
	--locator-ink: #ffffff;

	--danger-ink: #8e2a24;

	--chip: #ececec;
	--btn-bg: #3a5f7a;
	--btn-bg-hover: #2d4a60;
	--btn-ink: #ffffff;

	--tip-bg: #1a1a1a;
	--tip-ink: #f4f4f4;

	--halo: 0 0 0 4px rgba(58, 95, 122, 0.18);
	--lift: 0 1px 2px rgba(26, 26, 26, 0.05), 0 8px 24px -16px rgba(45, 74, 96, 0.35);
	--selection: rgba(58, 95, 122, 0.2);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--page: #1a1a1a;
		--surface: #232323;
		--surface-sunk: #2a2a2a;

		--ink: #f4f4f4;
		--body: #cfcfcf;
		--muted: #a3a3a3;
		--meta: #a3a3a3;
		--eyebrow: #a3a3a3;

		--rule-strong: #f4f4f4;
		--border: #3d3d3d;
		--hairline: #2f2f2f;

		--accent: #8fb8d4;
		--accent-strong: #bbd8ec;
		--accent-ink: #9fc3dc;
		--accent-tint: #24313a;

		--done: #2f6a52;
		--done-label: #86bfa0;
	--done-icon: #e3efe8;
		--todo: #3a3a3a;
		--todo-label: #a3a3a3;
		--brick: #d9776b;
		--sky: #5cc3ec;
	--locator-bg: #2d4a60;
	--locator-ink: #f4f4f4;

		--danger-ink: #d9776b;

		--chip: #2a2a2a;
		--btn-bg: #8fb8d4;
		--btn-bg-hover: #bbd8ec;
		--btn-ink: #1a1a1a;

		--tip-bg: #f4f4f4;
		--tip-ink: #1a1a1a;

		--halo: 0 0 0 4px rgba(143, 184, 212, 0.22);
		--lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
		--selection: rgba(143, 184, 212, 0.3);
	}
}

/*
 * The switch in theme.js. Forcing light needs nothing more than the :not()
 * above; forcing dark has to repeat the dark tokens, since a media query
 * cannot be turned on from an attribute.
 */
:root[data-theme="dark"] {
	color-scheme: dark;

	--page: #1a1a1a;
	--surface: #232323;
	--surface-sunk: #2a2a2a;

	--ink: #f4f4f4;
	--body: #cfcfcf;
	--muted: #a3a3a3;
	--meta: #a3a3a3;
	--eyebrow: #a3a3a3;

	--rule-strong: #f4f4f4;
	--border: #3d3d3d;
	--hairline: #2f2f2f;

	--accent: #8fb8d4;
	--accent-strong: #bbd8ec;
	--accent-ink: #9fc3dc;
	--accent-tint: #24313a;

	--done: #2f6a52;
	--done-label: #86bfa0;
	--done-icon: #e3efe8;
	--todo: #3a3a3a;
	--todo-label: #a3a3a3;
	--brick: #d9776b;
	--sky: #5cc3ec;
	--locator-bg: #2d4a60;
	--locator-ink: #f4f4f4;

	--danger-ink: #d9776b;

	--chip: #2a2a2a;
	--btn-bg: #8fb8d4;
	--btn-bg-hover: #bbd8ec;
	--btn-ink: #1a1a1a;

	--tip-bg: #f4f4f4;
	--tip-ink: #1a1a1a;

	--halo: 0 0 0 4px rgba(143, 184, 212, 0.22);
	--lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -16px rgba(0, 0, 0, 0.7);
	--selection: rgba(143, 184, 212, 0.3);
}
:root[data-theme="light"] {
	color-scheme: light;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scrollbar-color: var(--border) var(--page);
}

body {
	margin: 0;
	background: var(--page);
	color: var(--body);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

::selection {
	background: var(--selection);
	color: var(--ink);
}

a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover {
	color: var(--accent-strong);
}

:where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}