/* EloralintideResearch.com design tokens.
   Canonical source: design/design-tokens.json. UTF-8.

   theme.json expresses the palette, type scale and spacing as WordPress
   presets. This file carries the values theme.json cannot express, and mirrors
   the rest under short names so component CSS stays readable. Nothing here is
   a second source of truth: if a value changes, it changes in
   design-tokens.json first, then in theme.json and here together. */

:root {
	/* Neutrals */
	--paper: #FAFBFC;
	--white: #FFFFFF;
	--ink-900: #12181C;
	--ink-700: #33424B;
	--ink-500: #5A6B75;
	--ink-300: #C9D3D8;
	--ink-100: #EEF2F4;

	/* Brand, spectrometer petrol */
	--petrol-900: #063B40;
	--petrol-700: #0B5B62;
	--petrol-500: #12808A;
	--petrol-100: #E2F0F1;

	/* Accent, detector signal amber. amber-500 is graphic-only, never text. */
	--amber-700: #9A5B12;
	--amber-500: #C67E2E;
	--elr-signal: var(--amber-500);

	/* Bright teal for highlights and buttons on dark bands only (1.4.0). */
	--mint: #6FE3CF;

	/* Evidence tiers */
	--tier-p1: #0B6B5B;
	--tier-p2: #14707E;
	--tier-p3: #3A5A7A;
	--tier-p4: #6A5A80;
	--tier-p5: #7A6E62;
	--tier-q: #9A3527;
	--tier-p1-tint: #E4F0EC;
	--tier-p2-tint: #E4EFF1;
	--tier-p3-tint: #E8EDF3;
	--tier-p4-tint: #ECE8F1;
	--tier-p5-tint: #EFECE8;
	--tier-q-tint: #F6E7E4;

	/* Type. Spectral (serif) was the original display face for the "scientific
	   journal" feel the design standard calls for, but tester feedback on a
	   real phone (2026-09-20) read it as looking like newsprint, and asked for
	   something closer to Helvetica/Arial, more rounded. --font-display now
	   points at the same self-hosted Plex Sans stack as body copy, rather than
	   pulling in a new (non-self-hosted) font family, so headings, the hero,
	   and body text are all one rounded sans face site-wide. Spectral is left
	   defined below, unused, in case a future editorial call wants the serif
	   back for headings only: point --font-display back at it and nothing
	   else in the theme needs to change. */
	--font-display-serif: Spectral, Georgia, "Times New Roman", serif;
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: var(--font-sans);
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* The one-value body-family swap (D-28) is now moot: --font-display and
	   --font-sans are the same face, so body copy and headings already match.
	   Left pointed at --font-sans so nothing else in the theme needs to
	   change if that ever stops being true. */
	--elr-body-family: var(--font-sans);

	--fs-display: clamp(2.25rem, 1.6rem + 2.6vw, 2.75rem);
	--fs-h2: clamp(1.6rem, 1.25rem + 1.4vw, 2rem);
	--fs-h3: 1.5rem;
	--fs-h4: 1.25rem;
	--fs-body-lg: 1.1875rem;
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-mono: 0.875rem;
	--fs-eyebrow: 0.8125rem;

	--lh-tight: 1.2;
	--lh-heading: 1.25;
	--lh-body: 1.65;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--tracking-eyebrow: 0.08em;

	/* Spacing, 8px base */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;

	/* Radius and elevation. Restrained on purpose: fully rounded chrome reads
	   as a storefront, which is the one thing this site must not look like. */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--shadow-1: 0 1px 2px rgba(18, 24, 28, .06), 0 1px 3px rgba(18, 24, 28, .05);
	--shadow-2: 0 4px 12px rgba(18, 24, 28, .10), 0 2px 4px rgba(18, 24, 28, .06);

	/* Layout */
	--container-max: 1200px;
	--container-wide: 1320px;
	--content-measure: 80ch;
	--gutter: 24px;

	/* Motion */
	--dur-fast: 160ms;
	--dur-base: 280ms;
	--ease: cubic-bezier(.2, .6, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
	}
}