/* ========================================================================= qpn-tokens — Quantum Privacy Network design tokens. CANONICAL · single source of truth for webshield.io, ep3foundation.org, qpncatalyst.io, and future QPN apps. Status: v0.1.0 (2026-06-17). Supersedes the hand-mirrored copies: • website/site/css/webshield-navy.css (was canonical-by-convention) • ep3-website/site/css/webshield-navy.css (vendored — had drifted: missing --ws-ink-hover) • qpn-catalyst-email/website/css/qpn-shared.css (:root — parallel --qpn-* set) Token prefix (decision, Rich 2026-06-17): canonical names are NETWORK-NEUTRAL --qpn-* (real values). A complete `--ws-*: var(--qpn-*)` alias block follows so webshield + EP3 — whose component CSS references --ws-* — consume this file with ZERO component changes; qpn references --qpn-* directly. The aliases are a migration bridge, removable once webshield/EP3 components adopt --qpn-* (later). Page background (decision, Rich 2026-06-17): --qpn-page is BONE #F6F3EC across all three sites. qpn's former "signature paper" cream #FFFBF5 is retired so the three canvases match exactly (settled after an on-page A/B). Value lineage (from webshield-navy.css, palette LOCKED 2026-04-20): v1.3 (2026-04-21) body font sizes bumped ~10% (lede/body/body-sm/lh-body). v1.4 (2026-06-09) added ink-hover (#112E54). Contrast (WCAG, on white): ink 16.2:1 AAA · ink-muted 8.9:1 AAA · ink-faint 4.9:1 AA · accent 5.1:1 AA. ========================================================================= */ :root { /* ── Core palette ──────────────────────────────────────────────────── */ --qpn-ink: #0B1F3A; /* primary navy — display, body on light */ --qpn-ink-deep: #0E2748; /* deeper navy stop — navy hero gradient. Not body text. */ --qpn-ink-hover: #112E54; /* brighter navy — CTA hover; brightest banner stop */ --qpn-ink-muted: #3B4A63; /* supporting body, eyebrows */ --qpn-ink-faint: #6B7585; /* micro-copy, metadata */ --qpn-accent: #8A6B2E; /* muted gold — claim refs and citations only */ --qpn-accent-hover:#A3823A; /* hover state only; do not use as fill */ --qpn-accent-soft: rgba(138, 107, 46, 0.35); /* gold @ 35% — hairlines on dark surfaces */ --qpn-page: #F6F3EC; /* warm bone — page background (all three sites) */ --qpn-surface: #FFFFFF; /* card surface */ --qpn-surface-2: #FBF8F1; /* inset / secondary surface */ --qpn-rule: #D7CFBF; /* 1px divider on bone */ --qpn-rule-faint: #E8E2D4; /* softer divider on surface */ /* ── Typography ────────────────────────────────────────────────────── */ --qpn-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --qpn-font-body: 'Inter', system-ui, -apple-system, sans-serif; --qpn-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ── Type scale ────────────────────────────────────────────────────── */ --qpn-fs-display-lg: 40px; /* page hero */ --qpn-fs-display: 26px; /* card name (serif) */ --qpn-fs-lede: 18px; /* definition (serif anchor) */ --qpn-fs-body: 15px; /* supporting body (sans) */ --qpn-fs-body-sm: 13.5px; /* footer metadata value */ --qpn-fs-label: 11px; /* small-caps label */ --qpn-fs-micro: 10.5px; /* mono ordinal / claim ref */ --qpn-lh-tight: 1.15; --qpn-lh-lede: 1.45; --qpn-lh-body: 1.7; --qpn-tracking-label: 0.16em; /* all uppercase eyebrows */ --qpn-tracking-mono: 0.04em; /* mono metadata */ /* ── Spacing scale ─────────────────────────────────────────────────── */ --qpn-sp-1: 4px; --qpn-sp-2: 8px; --qpn-sp-3: 12px; --qpn-sp-4: 16px; --qpn-sp-5: 22px; --qpn-sp-6: 28px; --qpn-sp-7: 40px; /* ── Rule weights ──────────────────────────────────────────────────── */ --qpn-rule-hair: 1px; /* default divider */ --qpn-rule-anchor: 2px; /* accent under heros; gold rules */ /* ── Universal-card component tokens (Ledger Row) ──────────────────── */ --qpn-uc-rail-width: 140px; --qpn-uc-col-gap: 32px; --qpn-uc-pad-y: 26px; --qpn-uc-pad-x: 32px; --qpn-uc-border: var(--qpn-rule-hair) solid var(--qpn-rule); --qpn-uc-accent-eyebrow: var(--qpn-accent); /* ── --ws-* compatibility aliases ────────────────────────────────────── webshield.io + ep3foundation.org component CSS references --ws-* names. Each --ws-* below maps onto its --qpn-* source so those sites work unchanged. Migration bridge — removable once those components adopt --qpn-*. Keep this block exhaustive: every --ws-* referenced by any file in css/ MUST have an alias here (enforced by `make test`). ───────────────────────────────────────────────────────────────────── */ --ws-ink: var(--qpn-ink); --ws-ink-deep: var(--qpn-ink-deep); --ws-ink-hover: var(--qpn-ink-hover); --ws-ink-muted: var(--qpn-ink-muted); --ws-ink-faint: var(--qpn-ink-faint); --ws-accent: var(--qpn-accent); --ws-accent-hover: var(--qpn-accent-hover); --ws-accent-soft: var(--qpn-accent-soft); --ws-page: var(--qpn-page); --ws-surface: var(--qpn-surface); --ws-surface-2: var(--qpn-surface-2); --ws-rule: var(--qpn-rule); --ws-rule-faint: var(--qpn-rule-faint); --ws-font-display: var(--qpn-font-display); --ws-font-body: var(--qpn-font-body); --ws-font-mono: var(--qpn-font-mono); --ws-fs-display-lg: var(--qpn-fs-display-lg); --ws-fs-display: var(--qpn-fs-display); --ws-fs-lede: var(--qpn-fs-lede); --ws-fs-body: var(--qpn-fs-body); --ws-fs-body-sm: var(--qpn-fs-body-sm); --ws-fs-label: var(--qpn-fs-label); --ws-fs-micro: var(--qpn-fs-micro); --ws-lh-tight: var(--qpn-lh-tight); --ws-lh-lede: var(--qpn-lh-lede); --ws-lh-body: var(--qpn-lh-body); --ws-tracking-label: var(--qpn-tracking-label); --ws-tracking-mono: var(--qpn-tracking-mono); --ws-sp-1: var(--qpn-sp-1); --ws-sp-2: var(--qpn-sp-2); --ws-sp-3: var(--qpn-sp-3); --ws-sp-4: var(--qpn-sp-4); --ws-sp-5: var(--qpn-sp-5); --ws-sp-6: var(--qpn-sp-6); --ws-sp-7: var(--qpn-sp-7); --ws-rule-hair: var(--qpn-rule-hair); --ws-rule-anchor: var(--qpn-rule-anchor); --ws-uc-rail-width: var(--qpn-uc-rail-width); --ws-uc-col-gap: var(--qpn-uc-col-gap); --ws-uc-pad-y: var(--qpn-uc-pad-y); --ws-uc-pad-x: var(--qpn-uc-pad-x); --ws-uc-border: var(--qpn-uc-border); --ws-uc-accent-eyebrow: var(--qpn-uc-accent-eyebrow); }