/* ============================================================
TeleVerify — Design tokens (Ship 1 of the Style Guide rollout)
Source: TeleVerify-Style-Guide.md §2, §9
------------------------------------------------------------
ADDITIVE-ONLY as of ADD-DESIGN-TOKENS-2026-07-22:
- Every custom property defined here uses a NEW name that does
NOT collide with any variable already declared in
website/styles.css. That file's --primary, --gray-*, --font-
sans, --shadow-*, etc. keep working exactly as they do today.
- EXCEPT --font-mono, which the spec (§9) names verbatim and
which website/styles.css already declares as 'SF Mono, ...'.
To avoid silently flipping every current --font-mono
consumer over to Plex Mono the moment this file is loaded,
we expose the spec's Plex Mono under the alias
--tv-font-evidence. Ships that consciously want the new
mono can either use --tv-font-evidence or redefine
--font-mono in their own scope.
- This file is NOT loaded by any live marketing page yet.
website/design-system.html is a private showcase that pulls
it in to render swatches + component demos. Existing pages
see zero change until a future ship explicitly links this
file into them.
Fonts:
- Loading Manrope + IBM Plex Mono is done via tag in
each HTML page's , NOT via @import in this file
(@import blocks first-paint render):
============================================================ */
:root {
/* Navy field (backgrounds, dark sections) */
--navy-900: #081a34;
--navy-800: #0d2749;
--navy-700: #143a63;
--navy-ink: #08243f;
/* Signature hero background gradient */
--bg-hero: radial-gradient(120% 140% at 78% -10%, #143a63 0%, #0d2749 42%, #081a34 100%);
/* Accent */
--teal-400: #2dd4bf;
--teal-soft: #6ff0da;
--sky-400: #38bdf8;
--sky-300: #7dd3fc;
/* Text on navy */
--text-white: #ffffff;
--text-200: #cfe0f0;
--text-300: #aec6de;
--text-400: #8fb0cd;
--text-500: #6f92b2;
--text-url: #9fbdd8;
/* Light-mode surfaces (spec §7) */
--paper: #f4f8fb;
--paper-card: #ffffff;
--ink-900: #0d2749;
--ink-600: #46617c;
--hairline: rgba(13, 39, 73, 0.10);
/* Line / tint helpers used verbatim on the cover art */
--hairline-teal: rgba(125, 211, 252, 0.22);
--chip-border: rgba(125, 211, 252, 0.28);
--chip-fill: rgba(255, 255, 255, 0.03);
--glass-fill: rgba(255, 255, 255, 0.055);
--glass-shadow: 0 30px 60px rgba(4, 14, 28, 0.5);
--ok-fill: rgba(45, 212, 191, 0.14);
--ok-border: rgba(45, 212, 191, 0.40);
/* Status colors (chroma-matched to the teal per spec §2) */
--ok: #2dd4bf;
--warn: #f5b642;
--risk: #f4785c;
/* Type stacks (see file header re: --font-mono alias) */
--font-ui: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--tv-font-evidence: 'IBM Plex Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
}