/* ============================================================================ * Design tokens v2 — canonical --vp-* layer (UI KIT 2026-06-23, INPA-467 WF-1). * Runtime rollout: t_4ad1f327 (v1) → INPA-467 (v2, 2026-07-05). * ============================================================================ * * CANONICAL TOKEN NAMES (use these in new code; v1 names remain valid aliases) * -------------------------------------------------------------------------- * COLORS — primary / brand * --vp-color-primary CANONICAL primary, #003677 (UI KIT). * Used for: buttons, CTAs, links, focus bg. * --vp-color-action-primary ALIAS of --vp-color-primary. v1 name kept for * back-compat with blog.css / common.css / * header.css / footer.css / myOrders.css. * --vp-color-border-primary #0014A8 — primary-tinted borders. NOT primary. * --vp-color-link-primary #0014A8 — links. NOT primary. * --vp-color-focus-ring #0014A8 — focus outline. NOT primary. * NB: #0014A8 is intentionally reserved for border/link/focus only. * Primary CTA / brand red / inverse-on-primary always #003677. * * COLORS — background * --vp-color-bg-page #f2f2f2 page canvas * --vp-color-bg-surface #ffffff card / surface * --vp-color-bg-muted #f8f8f8 muted surface (chip, badge bg) * --vp-color-bg-disabled #e0e0e0 disabled CTA bg * * COLORS — text * --vp-color-text CANONICAL primary text, #1a1a1a (was #141414 * pre-WF-6, INPA-486). Alias of * --vp-color-text-primary (footer bg uses the * v1 name by visual contract). * --vp-color-text-primary #1a1a1a (was #141414 pre-WF-6) * --vp-color-text-secondary #6b6b6b secondary/muted body text * (was #646464 pre-WF-6) * --vp-color-text-muted #6B6B6B muted/disabled text (INPA-528, * was #848484 — AA fail * 3.52:1 on --vp-color-bg-muted * per Visual contract color/muted) * --vp-color-text-disabled #6b6b6b disabled CTA text * --vp-color-text-inverse #ffffff text on dark bg * * COLORS — border * --vp-color-border CANONICAL generic border, #e0e0e0 (was * #e1e1e1 pre-WF-6, INPA-486). Alias of * --vp-color-border-subtle. * --vp-color-border-subtle #e0e0e0 subtle border (cards, inputs) * (was #e1e1e1 pre-WF-6) * --vp-color-border-muted #d9d9d9 muted border * * COLORS — state * --vp-color-error #C8102E error text/ring (INPA-528 — was * #b00020, contract * color/error #C8102E) * --vp-color-success #10703a success text/ring (WF-5b, * INPA-499, INPA-497 Reviewer gate). * Darkened from #1e8e3e (4.21:1 on white, * FAIL) to #10703a (6.18:1 on white, * ~5.40:1 on #e6f4ea tint, PASS AA + * headroom for color-mix(8%) bg). * --vp-color-danger #ca505a danger bg * * COLORS — brand * --vp-color-brand-red #cd2d3a brand red (logo, badge) * * COLORS — accent (WF-10 follow-up, INPA-489; UI KIT 7889:20805 source) * --vp-color-accent #FF8C00 orange accent (decorative, badge, * outline-only — NOT button bg). * --vp-color-accent-strong #A85C00 accent CTA bg. WCAG AA ≥ 4.5:1 on * white text (post-INPA-135 remediation). * Source: Figma btn_accent 7889:20805. * --vp-color-accent-text #C46A00 orange text on white (secondary * CTA, chip balance text). * * COLORS — hover (Button variant hovers, INPA-503; WF-10 follow-up) * --vp-color-primary-hover #002a5e ~14% darkened variant-primary hover. * WCAG 14.07:1 on #ffffff (PASS AAA). * --vp-color-accent-strong-hover #8a4a00 ~14% darkened variant-accent hover. * WCAG 6.86:1 on #ffffff (PASS AA). * --vp-color-primary-tint rgba(0, 54, 119, 0.06) variant-secondary hover * (primary at 6% on white — light tint wash). * NB: rgba keeps channel numeric, NOT * rgb() var() composition — see Button.module.css. * * COLORS — chip (public-shell.css, catalog page) * --vp-color-chip-bg #eef2ff chip background * --vp-color-chip-text #3730a3 chip text (WCAG AA on #eef2ff) * * TYPOGRAPHY * --vp-font-family-brand "Helvetica Neue", Helvetica, Arial, sans-serif * LEGACY Helvetica-only stack. Keep for nav / * btn / footer / link contexts where the new * UI KIT explicitly scopes Helvetica (see * INPA-484 WF-7 audit). * --vp-font-family-sans Inter, "Helvetica Neue", Helvetica, Arial, sans-serif * UI KIT ramp for body / h1-h5 / tag / body- * link copy. Inter is declared but NOT loaded * via CDN — falls back to Helvetica on systems * without Inter installed, so no visual * regression on routes that do not yet apply * this token. * --vp-font-family-display same as --vp-font-family-sans; pairing * with font-weight: 600/700 produces the * Inter display ramp. * * SPACING * --vp-space-{2xs,xs,sm,md,lg,xl,2xl,3xl} 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px * * RADIUS * --vp-radius-{sm,md,emptystate,lg,card,content-card,pill,cta-pill,full} * 4 / 8 / 12 / 16 / 20 / 28 / 32 / 33 / 999 px * --vp-radius-emptystate matches UI KIT EmptyState / ErrorMessage primitive * cornerRadius = 12 (INPA-457 §1.5, Figma * 7936:61113 / 7936:61139). * * ELEVATION * --vp-elevation-{none,hairline,soft,primary-soft} * * LAYOUT * --vp-layout-container-max 1660 px * --vp-layout-container-pad 130 px * --vp-layout-content-max 1164 px * * WCAG footer text contrast (verified 2026-07-05, INPA-467; value updated 2026-07-05, INPA-486): * bg = --vp-color-text-primary / #1a1a1a (was #141414 pre-WF-6) * text = --vp-color-text-inverse / #ffffff * ratio = 18.42 : 1 (≥ 7:1 → WCAG AAA; ≥ 4.5:1 → WCAG AA ✅) * * REVISION HISTORY * v1 (t_4ad1f327) initial --vp-color-* layer, --vp-color-action-primary * defined as #003677 but no canonical alias. * v2 (INPA-467) + --vp-color-primary / --vp-color-text / --vp-color-border * canonical aliases (var() cross-references) * + --vp-color-success, --vp-color-bg-disabled, * --vp-color-text-disabled, --vp-color-chip-{bg,text} * + canonical name documentation in this header. * + WCAG verification recorded above. * v3 (INPA-484) + --vp-font-family-sans / --vp-font-family-display * UI KIT Inter ramp. Declared but not loaded via CDN; * legacy Helvetica remains primary stack. * v4 (INPA-486) Wave F / WF-6 — pixel-diff tone alignment with UI KIT * (#1a1a1a / #6b6b6b / #e0e0e0). Three canonical hex * values drifted from spec by 1–7 units; tone fix * converge between token + role_home hardcoded literals. * Touched tokens (3): * --vp-color-text #141414 → #1a1a1a * --vp-color-text-secondary #646464 → #6b6b6b * --vp-color-border #e1e1e1 → #e0e0e0 * Aliases --vp-color-text-primary / --vp-color-border-subtle * remain var() references and pick up the new value via * var(--vp-color-text) / var(--vp-color-border). * WCAG contrast updated above for footer-bg pair. * v5 (INPA-489) Wave F / WF-10 — Button UI primitive requires accent * tokens. UI KIT 7889:20805 (btn_accent) binds bg to * --color-accent-strong (#A85C00). Added: * --vp-color-accent #FF8C00 * --vp-color-accent-strong #A85C00 * --vp-color-accent-text #C46A00 * Source: INPA-456 audit §2 row 3 (WF-3 accent CTA), * Figma btn_accent description. * v6 (INPA-488) Wave F / WF-9 — Radius token for public shell. Added: * --vp-radius-emptystate: 12px * Source: UI KIT EmptyState 7936:61113 / ErrorMessage * 7936:61139 cornerRadius (INPA-457 §1.5). Existing * radii (md 8, card 20, content-card 28, full 999) keep * their canonical values — no radius regression on any * breakpoint. * v7 (INPA-499) Wave F / WF-5b — Success shade darken (Reviewer gate * INPA-497 found --vp-color-success #1e8e3e measured * 4.21:1 on white, FAIL AA 4.5:1). Darkened canonical * token in BOTH tokens.css copies: * --vp-color-success #1e8e3e → #10703a * Measured contrast (WCAG sRGB): * #10703a on #ffffff = 6.18 : 1 PASS * #10703a on #e6f4ea ≈ 5.40 : 1 PASS (8% color-mix bg) * One-shot token fix re-renders all 7 WF-5 sites + future * consumers consistently; per-site code not revisited. * Static mirror kept byte-equal (verified via diff). * v8 (INPA-503) Wave F / WF-10 follow-up — Hover shade tokens for the * Button UI primitive (INPA-489). Button.module.css:66, 67, * 76, 77 used raw hex literals for hover; component- * contracts.md §2.2 forbids arbitrary hex. Added: * --vp-color-primary-hover #002a5e * --vp-color-accent-strong-hover #8a4a00 * --vp-color-primary-tint rgba(0, 54, 119, 0.06) * Each ~14% darkened from its base token for visual depth * on :hover, and white text on #002a5e measures 14.07:1, * white text on #8a4a00 measures 6.86:1 — both PASS WCAG AA * 4.5:1. Primary-tint is rgba (transparent * variant-secondary hover on white). * Applied in Button.module.css via var() with hex fallback * preserved for legacy routes without tokens.css. * Static mirror kept byte-equal (verified via diff). * v9 (INPA-475) Wave F / WF-6 follow-up — Tone-fallback hex alignment in * sites touched by WF-1..WF-5. After WF-6 v4 alignment moved * canonical token values to #1a1a1a / #6b6b6b / #e0e0e0 but * per-site var() fallback literals in style.css / role_home * .css / executorProfile.css retained the prior 1–7 unit- * drifted values (#191919 / #646464 / #E1E1E1) for byte- * identical legacy-route render. With tokens.css present * those literals are inert; without tokens.css they shaded * off by 1–7 units. Re-aligned 90 call-site literals: * --vp-color-text fallback #191919 → #1a1a1a * --vp-color-text-primary fallback #191919 → #1a1a1a * --vp-color-text-secondary fallback #646464 → #6b6b6b * --vp-color-border fallback #E1E1E1 → #e0e0e0 * No new tokens introduced. CSS canonical values unchanged. * 90 replacements in 4 source files: * templates/css/style.css 18×#191919 23×#646464 1×#E1E1E1 (42) * templates/css/role_home.css 14×#191919 (14) * static/css/role_home.css 14×#191919 (14) * frontend/src/executorProfile/...css 1×#191919 19×#646464 (20) * style.min.css regenerated via csso with restructure:false * to preserve selector order / @-rule nesting for byte- * identical legacy-route render. Static mirror kept byte- * equal (verified via diff). * ============================================================================ */ :root { /* === COLORS: PRIMARY === */ --vp-color-primary: #003677; --vp-color-action-primary: var(--vp-color-primary); /* back-compat alias */ /* === COLORS: BORDER / LINK / FOCUS (#0014A8 by contract — NOT primary) === */ --vp-color-border-primary: #0014a8; --vp-color-link-primary: #0014a8; --vp-color-focus-ring: #0014a8; /* === COLORS: BACKGROUND === */ --vp-color-bg-page: #f2f2f2; --vp-color-bg-surface: #ffffff; --vp-color-bg-muted: #f8f8f8; --vp-color-bg-disabled: #e0e0e0; /* === COLORS: TEXT === */ --vp-color-text: #1a1a1a; --vp-color-text-primary: var(--vp-color-text); --vp-color-text-secondary: #6b6b6b; --vp-color-text-muted: #6B6B6B; --vp-color-text-disabled: #6b6b6b; --vp-color-text-inverse: #ffffff; /* === COLORS: BORDER === */ --vp-color-border: #e0e0e0; --vp-color-border-subtle: var(--vp-color-border); --vp-color-border-muted: #d9d9d9; /* === COLORS: STATE === */ --vp-color-error: #C8102E; --vp-color-success: #10703a; --vp-color-danger: #ca505a; /* === COLORS: BRAND === */ --vp-color-brand-red: #cd2d3a; /* === COLORS: ACCENT (btn_accent UI KIT — INPA-489) === */ --vp-color-accent: #ff8c00; --vp-color-accent-strong: #a85c00; --vp-color-accent-text: #c46a00; /* === COLORS: HOVER (WF-10 / INPA-503) === */ --vp-color-primary-hover: #002a5e; /* #003677 darkened ~14% */ --vp-color-accent-strong-hover: #8a4a00; /* #A85C00 darkened ~14% */ --vp-color-primary-tint: rgba(0, 54, 119, 0.06); /* primary 6% on white */ /* === COLORS: CHIP (public-shell.css catalog page) === */ --vp-color-chip-bg: #eef2ff; --vp-color-chip-text: #3730a3; /* === TYPOGRAPHY === */ --vp-font-family-brand: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; /* owner 2026-08-15: whole app on Inter */ --vp-font-family-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --vp-font-family-display: var(--vp-font-family-sans); /* === SPACING === */ --vp-space-2xs: 4px; --vp-space-xs: 8px; --vp-space-sm: 12px; --vp-space-md: 16px; --vp-space-lg: 24px; --vp-space-xl: 32px; --vp-space-2xl: 48px; --vp-space-3xl: 64px; /* === RADIUS === */ --vp-radius-sm: 4px; --vp-radius-md: 8px; --vp-radius-emptystate: 12px; /* UI KIT EmptyState / ErrorMessage cornerRadius (INPA-488 v6) */ --vp-radius-lg: 16px; --vp-radius-card: 20px; --vp-radius-content-card: 28px; --vp-radius-pill: 32px; --vp-radius-cta-pill: 33px; --vp-radius-full: 999px; /* === ELEVATION === */ --vp-elevation-none: none; --vp-elevation-hairline: 0 1px 2px rgba(15, 23, 42, 0.05); --vp-elevation-soft: 0 12px 30px rgba(15, 23, 42, 0.07); --vp-elevation-primary-soft: 0 10px 24px rgba(0, 20, 168, 0.08); /* === LAYOUT === */ --vp-layout-container-max: 1660px; --vp-layout-container-pad: 130px; --vp-layout-content-max: 1164px; } @media (prefers-reduced-motion: reduce) { :root { --vp-motion-duration-fast: 0ms; } } /* Remove the blue tap/click highlight site-wide (kanban t_cf0577a1). Universal selector: covers every tappable/clickable element regardless of HTML tag — native controls, disclosure toggles, and custom click targets (e.g.
in admin templates). Keyboard focus (:focus-visible) is intentionally preserved for accessibility. */ * { -webkit-tap-highlight-color: transparent; } :focus:not(:focus-visible) { outline: none; }