/* ==========================================================================
   Apex Biosciences design tokens.

   The nine colour values in the SAMPLED block came off the brand mockups and
   are the only authored brand colours. Everything under DERIVED is built from
   those nine for states, hairlines and typography, so a brand change touches
   the sampled block and nothing else.

   Accessibility constraint that drove one token: --apex-blue on --apex-bg is
   about 5:1, which passes for large text but is thin for body copy and small
   labels. Links and small text use --apex-blue-text instead. Do not swap them.

   The retired tagline is not a token. It was three human outcome claims. The
   approved replacement is text only, never baked into artwork, because a claim
   inside a raster image is invisible to every guard NX owns.
   ========================================================================== */

:root {
	/* ---------------------------------------------------------------- SAMPLED */
	--apex-bg: #0A0D12;
	--apex-bg-pure: #000000;
	--apex-surface: #191A1E;
	--apex-blue: #0B7BE4;
	--apex-blue-deep: #0A66C2;
	--apex-blue-light: #2A96EA;
	--apex-blue-text: #4FA8F5;
	--apex-chrome-hi: #FCFCFC;
	--apex-chrome-mid: #D2D2D2;
	--apex-chrome-lo: #848484;

	/* ---------------------------------------------------------------- DERIVED */

	/* Surfaces and separation. Hairlines are chrome at low alpha rather than a
	   new grey, so they hold up on both --apex-bg and --apex-surface. */
	--apex-surface-raised: #21232A;
	--apex-line: rgba(210, 210, 210, 0.14);
	--apex-line-strong: rgba(210, 210, 210, 0.26);
	--apex-blue-wash: rgba(11, 123, 228, 0.10);
	--apex-focus: #4FA8F5;

	/* State colours. Amber is reserved for placeholder and pending data, so a
	   missing Certificate of Analysis reads as pending rather than as an error. */
	--apex-warn: #FFB020;
	--apex-stop: #E5484D;
	--apex-ok: #30A46C;

	/* Type families. Rajdhani for display, Inter for body, JetBrains Mono for
	   data. Mono is a functional requirement: the specification tables carry
	   amino acid sequences and molecular formulas that have to be unambiguous
	   character by character. All three are self hosted, see assets/fonts. */
	--apex-font-display: "Rajdhani", "Segoe UI Semibold", system-ui, sans-serif;
	--apex-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--apex-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

	/* Type scale, 1.25 from a 1rem base, clamped at the top two steps. */
	--apex-text-xs: 0.75rem;
	--apex-text-sm: 0.875rem;
	--apex-text-base: 1rem;
	--apex-text-lg: 1.125rem;
	--apex-text-xl: 1.375rem;
	--apex-text-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem);
	--apex-text-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);

	/* Spacing, 4px base. */
	--apex-space-1: 0.25rem;
	--apex-space-2: 0.5rem;
	--apex-space-3: 0.75rem;
	--apex-space-4: 1rem;
	--apex-space-5: 1.5rem;
	--apex-space-6: 2rem;
	--apex-space-7: 3rem;
	--apex-space-8: 4rem;

	/* Measure. Body copy caps at 68ch, data tables get the wide track. */
	--apex-measure: 68ch;
	--apex-measure-wide: 1200px;

	/* Radii. Small and consistent reads clinical, large reads consumer. */
	--apex-radius-xs: 2px;
	--apex-radius-sm: 3px;
	--apex-radius-md: 5px;

	/* Motion. Opacity and transform only, nothing that triggers layout. */
	--apex-motion-fast: 120ms;
	--apex-motion-base: 200ms;
	--apex-motion-slow: 320ms;
	--apex-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Elevation. One shadow, used sparingly. */
	--apex-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* The palette is a single dark scheme by design, so tell the browser to render
   form controls and scrollbars to match rather than fighting a light default. */
:root { color-scheme: dark; }

/* Print flips to ink on paper. Packing slips and Certificates of Analysis are
   the two documents that leave the screen, and both must stay legible. */
@media print {
	:root {
		--apex-bg: #FFFFFF;
		--apex-bg-pure: #FFFFFF;
		--apex-surface: #FFFFFF;
		--apex-surface-raised: #FFFFFF;
		--apex-chrome-hi: #000000;
		--apex-chrome-mid: #1A1A1A;
		--apex-chrome-lo: #444444;
		--apex-line: #999999;
		--apex-line-strong: #333333;
		--apex-blue-text: #0A66C2;
		--apex-blue-wash: transparent;
	}
}