/* Scout Trails design tokens.
 *
 * Spec: docs-internal/TIER2-WEB-DESIGN-SYSTEM-SPEC.md — authoritative for
 * token names, palette values, and component rules.
 *
 * Two independent axes, both attributes on <html>, stamped server-side:
 *
 *   data-theme    light | dark   (absent => follow the OS preference)
 *   data-palette  ember          (the seed palette)
 *
 * Every color, radius, and type step in the product resolves through a
 * semantic role below. Component CSS must never name a color. Adding a
 * palette is a new pair of role-value blocks and nothing else — see the
 * spec's "Adding a palette" section for the selector pattern.
 *
 * Ordering matters. The ember values live on bare :root, so a future
 * palette's [data-palette="x"] blocks outrank them, and each palette must
 * define both themes in the order light -> dark-media -> dark-attribute so
 * an explicit data-theme wins in BOTH directions.
 */

/* --- fonts -----------------------------------------------------------------
 * Self-hosted, latin subset. No external request: the service must render
 * correctly with no network egress. IBM Plex Sans latin ships as a single
 * variable face covering 400-600; IBM Plex Mono is static per weight.
 * Licensed under SIL OFL 1.1 — see fonts/LICENSE.txt.
 */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- theme-invariant roles ------------------------------------------------
 * Geometry and type do not vary by theme. A palette may override them.
 */

:root {
	/* Keep native UI (form controls, scrollbars, caret) on the same theme as
	 * the tokens. Pinned when data-theme is explicit so it can't disagree
	 * with the palette block that won. */
	color-scheme: light dark;

	--wb-radius-control: 8px;
	--wb-radius-card: 12px;
	--wb-radius-seg: 7px;
	--wb-radius-bar: 3px;
	--wb-radius-pill: 999px;

	--wb-font-sans: "IBM Plex Sans", system-ui, -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--wb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
		monospace;

	/* The brand-mark slot .wb-logo paints: Scout's solid-orange icon. */
	--wb-brand-mark: url("/static/mark.svg");
}

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* --- palette: ember (Graphite & Ember) — light ---------------------------- */

:root {
	/* surfaces */
	--wb-canvas: #f7f6f3;
	--wb-panel: #ffffff;
	--wb-panel-alt: #f0efeb;
	--wb-control: #fbfaf8;
	/* --- The graphite rail -------------------------------------------------
	 *
	 * The topbar is a dark island in a light page, so it cannot borrow the
	 * global ink scale — that scale is dark-on-light by construction. It gets
	 * its own roles, and they are theme-independent: the rail is graphite in
	 * both themes, so these values do not change in the dark block below.
	 * "Graphite rail" is the palette's own name for this surface. */
	--wb-topbar: #202327;
	--wb-topbar-ink: #f7f6f3;
	--wb-topbar-ink-2: #a8aaad;
	--wb-topbar-border: #2c3035;
	--wb-topbar-hover: #2a2e33;
	--wb-chip: #f0efeb;

	/* lines */
	--wb-border: #e5e3dd;
	--wb-border-soft: #efede8;
	--wb-track: var(--wb-border-soft);

	/* ink */
	--wb-ink: #1c1e21;
	--wb-ink-2: #55565a;
	--wb-ink-3: #75766f;
	--wb-ink-4: #94958f;

	/* action
	 * primary-ink is near-black, not white: white on this orange is 3.78:1,
	 * which fails AA for button label text. A near-black ink reaches 4.80:1
	 * on the same fill, so the brand orange survives unchanged and both
	 * themes share one treatment. Because the ink is dark, hover goes
	 * LIGHTER (a darker hover would erode the label contrast). */
	--wb-primary: #d95e12;
	--wb-primary-ink: #f7f6f3;
	--wb-primary-hover: #e06a1d;
	--wb-link: #d95e12;
	--wb-link-hover: #b04d0c;
	--wb-accent: #d95e12;

	/* status — reserved; never a chart series */
	--wb-ok: #0f7a52;
	/* Darkened from the source's #9a6a00, which reaches only 4.27:1 against
	 * the tinted chip background below — under AA for badge-sized text. */
	--wb-warn: #8f6200;
	--wb-danger: #c23434;
	--wb-chip-high: #c23434;
	--wb-chip-high-bg: #fbeeee;
	--wb-chip-med: #8f6200;
	--wb-chip-med-bg: #faf3e0;
	--wb-chip-low: #55565a;
	--wb-chip-low-bg: #efeeeb;

	/* chart — categorical slots, fixed order (CVD-validated). Slot 8 is
	 * orange and collides with this palette's primary, so it sits last. */
	--wb-series-1: #2a78d6;
	--wb-series-2: #008300;
	--wb-series-3: #e87ba4;
	--wb-series-4: #eda100;
	--wb-series-5: #1baf7a;
	--wb-series-6: #4a3aa7;
	--wb-series-7: #e34948;
	--wb-series-8: #eb6834;

	/* chart — single-hue visuals (sparklines, mono bar charts) */
	--wb-spark: var(--wb-series-1);
	--wb-bar: var(--wb-series-1);

	--wb-shadow: 0 1px 2px rgba(40, 30, 20, 0.05);

	/* Modal backdrop wash — sits behind a native <dialog>::backdrop so the
	 * page underneath dims without disappearing. Neutral dark by role, not
	 * a palette hue, so it reads the same in every theme. */
	--wb-scrim: rgba(0, 0, 0, 0.5);
}

/* --- palette: ember — dark (OS preference) -------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) {
		--wb-canvas: #101113;
		--wb-panel: #1a1b1f;
		--wb-panel-alt: #212227;
		--wb-control: #141518;
		--wb-topbar: #202327;
		--wb-chip: rgba(255, 255, 255, 0.07);

		--wb-border: #2b2c31;
		--wb-border-soft: #242529;

		--wb-ink: #e8e6e1;
		--wb-ink-2: #b6b4ae;
		--wb-ink-3: #94958f;
		--wb-ink-4: #75766f;

		--wb-primary: #f0762b;
		--wb-primary-ink: #f7f6f3;
		--wb-primary-hover: #f58f4f;
		--wb-link: #f0a06a;
		--wb-link-hover: #f5b98d;
		--wb-accent: #f0762b;

		--wb-ok: #3fbf9f;
		--wb-warn: #e6b64c;
		--wb-danger: #ef8080;
		--wb-chip-high: #ef8080;
		--wb-chip-high-bg: #3a2222;
		--wb-chip-med: #e6b64c;
		--wb-chip-med-bg: #37301c;
		--wb-chip-low: #b0b1b5;
		--wb-chip-low-bg: #2a2a2e;

		--wb-series-1: #3987e5;
		--wb-series-2: #008300;
		--wb-series-3: #d55181;
		--wb-series-4: #c98500;
		--wb-series-5: #199e70;
		--wb-series-6: #9085e9;
		--wb-series-7: #e66767;
		--wb-series-8: #d95926;

		--wb-spark: var(--wb-series-1);
		--wb-bar: var(--wb-series-1);

		--wb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
			0 8px 24px -12px rgba(0, 0, 0, 0.5);

		--wb-scrim: rgba(0, 0, 0, 0.65);
	}
}

/* --- palette: ember — dark (explicit) -------------------------------------
 * Higher specificity than the light block above, so picking dark on a
 * light-set OS works. The media-query block handles the reverse.
 */

:root[data-theme="dark"] {
	--wb-canvas: #101113;
	--wb-panel: #1a1b1f;
	--wb-panel-alt: #212227;
	--wb-control: #141518;
	--wb-topbar: #202327;
	--wb-chip: rgba(255, 255, 255, 0.07);

	--wb-border: #2b2c31;
	--wb-border-soft: #242529;

	--wb-ink: #e8e6e1;
	--wb-ink-2: #b6b4ae;
	--wb-ink-3: #94958f;
	--wb-ink-4: #75766f;

	--wb-primary: #f0762b;
	--wb-primary-ink: #f7f6f3;
	--wb-primary-hover: #f58f4f;
	--wb-link: #f0a06a;
	--wb-link-hover: #f5b98d;
	--wb-accent: #f0762b;

	--wb-ok: #3fbf9f;
	--wb-warn: #e6b64c;
	--wb-danger: #ef8080;
	--wb-chip-high: #ef8080;
	--wb-chip-high-bg: #3a2222;
	--wb-chip-med: #e6b64c;
	--wb-chip-med-bg: #37301c;
	--wb-chip-low: #b0b1b5;
	--wb-chip-low-bg: #2a2a2e;

	--wb-series-1: #3987e5;
	--wb-series-2: #008300;
	--wb-series-3: #d55181;
	--wb-series-4: #c98500;
	--wb-series-5: #199e70;
	--wb-series-6: #9085e9;
	--wb-series-7: #e66767;
	--wb-series-8: #d95926;

	--wb-spark: var(--wb-series-1);
	--wb-bar: var(--wb-series-1);

	--wb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
		0 8px 24px -12px rgba(0, 0, 0, 0.5);

	--wb-scrim: rgba(0, 0, 0, 0.65);
}