/* * 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 { /* ── INK (page surfaces, dark side) ─────────────────────────────── Garnet voice is obsidian-on-crimson, NOT VS-v2's cool void. Sourced from the existing --bg-obsidian / --bg-obsidian-soft and main.css's --bg-primary 6% lightness. */ --ink-0: #050505; /* page void (matches --bg-obsidian) */ --ink-1: #0a0a0a; /* card base (matches --bg-obsidian-soft) */ --ink-2: #141414; /* elevated surface */ --ink-3: #1f1f1f; /* hairline / divider */ /* ── PAPER (foreground text + light surfaces) ──────────────────── Garnetgrid is a dark-first site; paper-0 is the live --text-primary value. Light-mode pages adopt the warm-cream variant via existing body.light-mode rules in main.css — we DO NOT redefine those here. */ --paper-0: #ffffff; /* primary foreground (matches --text-primary) */ --paper-1: rgba(255, 255, 255, 0.85); /* secondary text */ --paper-2: rgba(255, 255, 255, 0.55); /* muted */ /* ── ACCENT (brand crimson — garnetgrid's signature) ────────────── The whole site is built around hsl(348, 83%, 47%). This is the color of --garnet-main, --neon-garnet, the meta theme-color #aa0000, and the gradient stops in the SVG hero. */ --accent: hsl(348, 83%, 47%); /* primary garnet (matches --garnet-main) */ --accent-deep: hsl(348, 83%, 25%); /* deeper garnet (matches --garnet-deep) */ --accent-lift: hsl(348, 83%, 60%); /* lifted highlight (matches --garnet-rim base hue) */ --accent-glow: hsla(348, 83%, 47%, 0.35); /* halo glow (matches --garnet-glow alpha pattern) */ --accent-rim: hsla(348, 83%, 60%, 0.15); /* hairline tint (matches --garnet-rim) */ /* Status colors — minimal, only what existing pages already use. */ --ok: #4cd137; /* matches main.css success-color literal */ --warn: #f9c05c; /* matches main.css warn literal */ --err: #e84118; /* matches main.css error-color literal */ /* ── SPACE (numeric scale, in addition to existing semantic --space-*) ──── The existing --space-xs..--space-xl is rem-based (0.5–2rem). The numeric scale here mirrors VS-v2's px-stepped scale so per-page ports can target consistent rhythm without renaming the rem stack. */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px; --space-5: 64px; --space-6: 96px; --space-7: 160px; /* ── RADIUS (numeric scale, in addition to existing --radius-sm..xl) ─── Existing radii are rem-based (0.5rem = 8px, 0.875rem = 14px, 1.25rem = 20px, 1.75rem = 28px). The numeric stops here pin specific px values when a port needs them; existing classes keep using --radius-sm/md/lg/xl. */ --radius-1: 8px; --radius-2: 14px; --radius-3: 24px; --radius-pill: 999px; /* ── SHADOW (uniform dark-mode shadow scale) ───────────────────── Garnetgrid is dark-default, so shadows are shallow + carry no glow unless --accent-glow is layered explicitly. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-3: 0 24px 80px rgba(0, 0, 0, 0.7); /* ── EASE (motion curves) ──────────────────────────────────────── Lifted exactly from VS-v2 — these curves are universal, not brand- specific. The existing --transition-base/fast/slow continue to work because they reference cubic-bezier(0.4, 0, 0.2, 1) literals; our --ease-* gives new code the option of the more cinematic (0.16, 1, 0.3, 1) curve already used by the index.html dazzle animations. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --transition-token: 400ms var(--ease-out); /* ── Bridge: alias new names at existing live values ───────────── If any future port lands code that uses --bg-dark / --text-primary in the VS-v2 sense, these point at the canonical garnetgrid vars so behavior is identical. We do NOT redefine --text-primary etc. globally — those already exist and rule. These are 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 `