/* * tokens.css — additive design-token layer for garnetgrid.com * * Lifted in shape from ~/Downloads/VertSolutions-React-v2/src/styles/tokens.css * + src/index.css (B2 in audits/garnetgrid-com/vertsolutions-decision.md). * * VALUES are garnetgrid's existing palette — discovered from * - assets/css/main.css (--bg-primary, --garnet-deep, --neon-garnet, --space-*, --radius-*) * - index.html inline :root block (--bg-obsidian, --garnet-main, --garnet-glow) * NOT VS-v2's cyan accent. This is intentional per Open Question 1 in * vertsolutions-decision.md — tokens reflect garnetgrid's brand, not Vert's. * * LOAD ORDER: this file loads AFTER main.css, nav.css, and styles.min.css * in . Tokens defined here are NEW additions (--ink-*, --paper-*, * --accent, --space-*, --radius-*, --ease-*) — they DO NOT collide with * the existing --bg-primary, --garnet-main, --space-xs, --radius-sm, * --transition-base names. Existing rules continue to win because their * variables are not redefined here. * * Bridges: a few aliases at the bottom point the new tokens at the * existing variables so future code that uses the VS-v2-style names * still resolves to the live garnetgrid value. */ :root { /* ════════════════════════════════════════════════════════════════ * MACHINE GARNET rebrand (2026-06-29). * A precision-instrument identity: graphite-black chassis, drawn * hairlines + faint grids, mono readouts, and GARNET as the single * live-signal color (it only appears on CTAs / active / secure / live * states, so when it glows it means something). Keeps the brand garnet * hsl(348,83%,47%); reimagines everything else. * ════════════════════════════════════════════════════════════════ */ /* ── INK — graphite chassis (cooler + more neutral than the old void) */ --ink-0: #0a0b0e; /* page void — graphite near-black */ --ink-1: #101218; /* card / panel base */ --ink-2: #161922; /* elevated surface */ --ink-3: #272b34; /* hairline / divider (drawn, visible) */ /* ── PAPER — off-white readouts (not harsh pure white) */ --paper-0: #eceef2; /* primary text */ --paper-1: rgba(236, 238, 242, 0.82); /* secondary text */ --paper-2: rgba(236, 238, 242, 0.62); /* muted — clears AA 4.5:1 on --ink-0 */ /* ── ACCENT — garnet, the single SIGNAL color (kept exactly) */ --accent: hsl(348, 83%, 47%); /* brand garnet */ --accent-rgb: 220, 20, 60; /* for rgba(var(--accent-rgb), α) */ --accent-deep: hsl(348, 83%, 30%); /* AA gradient base for filled CTAs */ --accent-lift: hsl(348, 90%, 63%); /* brighter live garnet — text/links/glow */ --accent-glow: hsla(348, 83%, 50%, 0.40); /* HUD halo */ --accent-rim: hsla(348, 86%, 58%, 0.18); /* hairline tint */ /* ── Machine semantics */ --hairline: var(--ink-3); --grid-line: rgba(236, 238, 242, 0.045); /* faint instrument grid lines */ --signal: var(--accent); /* the one live-signal color */ /* ── Type roles (Machine Garnet) */ --font-display: 'Space Mono', ui-monospace, monospace; /* machine headlines */ --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* humane body */ --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace; /* readouts/labels */ /* ── Status */ --ok: #3fd17a; --warn: #f9c05c; --err: #e84118; /* ── SPACE (numeric scale, unchanged) */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 160px; /* ── RADIUS — sharper (instrument, not soft) */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-pill: 999px; /* ── SHADOW — shallow; the machine reads via hairlines, not glow */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.6); --shadow-3: 0 24px 80px rgba(0, 0, 0, 0.72); /* ── EASE (motion curves) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --transition-token: 240ms var(--ease-out); /* ── read-only forwards */ --color-bg-void: var(--ink-0); --color-accent: var(--accent); --color-accent-glow: var(--accent-glow); } /* * a11y skip-link — the visually-hidden-until-focused pattern. * * Source: VS-v2 src/index.css lines 2242–2268. Garnetgrid's index.html * already has an inline-styled skip link from a previous pass; site-wide * application + the focusable visible state lives in T-A2. This rule * makes the same pattern available CSS-class-only so other pages can * adopt ` tag wrapping the existing .glass-card.tile-bg pattern, plus a small * monospace eyebrow (.lane-eyebrow) above the h3 to carry the "01 / GEO" * numbered-archetype rhythm from VertSolutions's BRAND.md voice (kicker → * headline → body). */ .lane-card { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: transform 280ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 280ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .lane-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px var(--accent-glow, hsla(348, 83%, 47%, 0.35)); } .lane-card:focus-visible { outline: 2px solid var(--accent, hsl(348, 83%, 47%)); outline-offset: 4px; border-radius: var(--radius-2, 14px); } .lane-eyebrow { display: block; font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, hsl(348, 83%, 47%)); margin-bottom: 0.85rem; opacity: 0.85; }