/* ============================================================
BADGERSKOPE — Design tokens (shared across all surfaces)
Editorial brutalist · "EVIDENCE > HYPE"
Dark only. The brand identity does not have a light variant.
============================================================ */
:root {
/* ---------- Surface ----------
Softening pass: shifted off pure-near-black into clear dark warm
grey range. No surface uses #000 or #0B0B0A directly anymore;
"ink" places (tier-chip text, primary-button text) reference --bg
so the dark stays cohesive with the page. */
--bg: #1A1A18; /* page background — dark warm grey */
--bg-2: #232320; /* alt section bg, card bg */
--bg-3: #2C2C29; /* tertiary surface, faded numerals */
/* ---------- Hairlines ----------
Bumped one stop to keep visible separation against the lighter bgs. */
--line: #3A3A33;
--line-2: #4A4A43;
/* ---------- Foreground ---------- */
--fg: #F2EFE5; /* primary text */
--fg-2: #C9C5B6; /* secondary text */
--fg-3: #A6A290; /* muted, mono labels, dates — lifted from #8A8775
to clear ~4.6:1 on --bg-2 #232320 (was 3.7:1, AA fail) */
/* ---------- Accent (all-teal) ----------
One brand color: deep teal #2DA89C, used as both the
interactive accent (links, hover, focus rings, active nav,
EVIDENCE > chevron, FAQ accordion) and the Tier-A semantic chip.
Earlier drafts split this into olive (#C8D17A) for Tier-A and
teal for interactive; that split is gone. Aliases below are
kept so existing per-call references keep resolving — but they
all collapse to one hex. */
--accent-tier-a: #2DA89C; /* deep teal */
--accent-brand: #2DA89C;
--accent-interactive: var(--accent-brand);
--accent-link: var(--accent-brand);
--accent: var(--accent-interactive); /* primary accent alias */
--accent-soft: rgba(45, 168, 156, 0.10); /* teal soft glow */
--accent-tier-a-soft: var(--accent-soft);
/* ---------- Tier ramp (Evidence / Safety / Access) ----------
Cool-to-warm editorial ramp: teal → forest → mustard → burnt
orange → crimson. Tier A unified with the brand teal so the
"FDA approved" chip and the interactive-accent share one identity.
Reuse is fine because they appear in different contexts (chip vs
link / focus ring / hover state).
Letter ink uses --bg (#1A1A18) for A/B/C/D so chips stay cohesive
with the page. F flips to --fg because crimson vs dark dips below
AA. The text-color flip for F lives in app.css / marketing.css.
A #2DA89C deep teal ~5.7:1 vs #1A1A18 (Gold Standard)
B #4A9F1F forest green ~5.0:1 vs #1A1A18 (Promising)
C #C68A0A mustard ~5.2:1 vs #1A1A18 (Suggestive)
D #D9621B burnt orange ~4.7:1 vs #1A1A18 (Weak / Dated)
F #9C1818 crimson ~6.4:1 vs #F2EFE5 (SLOP, white ink)
*/
--tier-a: var(--accent-tier-a); /* deep teal */
--tier-b: #4A9F1F; /* forest green */
--tier-c: #C68A0A; /* mustard */
--tier-d: #D9621B; /* burnt orange */
--tier-f: #9C1818; /* crimson */
/* ---------- Evidence tiers (legacy semantic names consumed by SPA JS) ---------- */
--ev-approved: var(--tier-a);
--ev-strong: var(--tier-b);
--ev-early: var(--tier-c);
--ev-animal: var(--tier-d);
--ev-practice: var(--tier-f);
--ev-unknown: var(--tier-f);
/* ---------- Status ---------- */
--success: var(--accent-tier-a); /* olive — "approved" reads as tier-A */
--warning: #E8B547;
--danger: #D97757;
/* ---------- Typography ----------
Softening pass: dropped JetBrains Mono. Mono caps labels read as
"mechanical" / "terminal"; the brand voice reads better with a
uniform modern sans across body and labels. --font-mono now aliases
--font-body (Inter) so every existing `font-family: var(--font-mono)`
site picks up the sans without per-call rewrites. The aggressive
letter-spacing on caps labels (--tracking-mono / --tracking-mono-lg)
is what still gives those rows their editorial-grid feel. */
--font-display: "Oswald", "Barlow Condensed", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: var(--font-body); /* alias — no monospace anywhere */
/* legacy aliases — kept so older surfaces don't shatter mid-migration */
--font-sans: var(--font-body);
--tracking-display: -0.005em; /* tight on giant headings */
--tracking-h1: -0.015em; /* tighter on hero */
--tracking-mono: 0.18em; /* mono labels / data */
--tracking-mono-lg: 0.22em; /* uppercase eyebrows */
--tracking-wordmark: 0.18em;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 16px;
--text-md: 17px;
--text-lg: 19px;
--text-xl: 22px;
--text-2xl: 26px;
--text-3xl: 32px;
--text-4xl: 44px;
--text-5xl: 56px;
/* Single source of truth for mono uppercase labels (filter row labels,
chip labels, table headers, count text, badge text, etc).
Codebase previously mixed 10/11/12px for visually-identical labels;
this token unifies them. */
--text-label: 11px;
--leading-tight: 0.92;
--leading-h1: 0.86;
--leading-snug: 1.15;
--leading-normal: 1.5;
--leading-relaxed: 1.6;
/* ---------- Spacing ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* ---------- Radius ----------
Editorial brutalist — sharp corners. The brand is explicit about
this, and a 2px softening pass had crept in across cards, modals,
and the library table; reverted. The few interactive controls
that want a tactile hint use --radius-micro = 1px so they don't
look razor-thin against a finger; everything else is 0. */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-micro: 1px;
/* ---------- Motion ---------- */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
/* ---------- Legacy aliases (drop after phase 4) ---------- */
--bg-elevated: var(--bg-2);
--surface: var(--bg-2);
--surface-raised: var(--bg-3);
--border: var(--line);
--border-strong: var(--line-2);
--text: var(--fg);
--text-muted: var(--fg-2);
--text-dim: var(--fg-3);
}
/* ============================================================
Film grain overlay — single-pass SVG fractal noise.
Desktop only: on iOS Safari, mix-blend-mode: overlay repaints on
every scroll frame and produces measurable jank on iPhone 12-class
hardware. Below 1024px the grain is dropped entirely. Editorial
feel is load-bearing on big screens, not on phones.
============================================================ */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.055;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
html.no-grain body::before,
body.no-grain::before { opacity: 0; }
}
/* Brutalist: layout containers stay sharp (--radius-sm = 0).
The block below is intentionally a no-op; kept so the per-file
selectors are documented in one place if the brand softens later. */
@media (prefers-reduced-motion: reduce) {
:root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; }
}
/* ============================================================
Brand-mark badger inside