/* * Verapath Design System — CSS Custom Properties * Source of truth: Figma file "Verapath Web Design Components" * Do not edit values here without also updating the Figma file. */ /* ── Box-sizing reset — ensures padding is included in element widths on all pages, matching the behaviour Framer CSS applies on the Home and About pages. */ *, *::before, *::after { box-sizing: border-box; } :root { /* ── Core Brand Colors ─────────────────────────────────────── */ --color-midnight: #223029; --color-white: #ffffff; --color-bright-green: #a3e96b; --color-green: #0ea665; --color-red: #f9574d; --color-lemon: #FFF515; --color-purple: #bca9f1; /* ── Grays ─────────────────────────────────────────────────── */ --color-gray-01: #909893; --color-gray-02: #b9c0be; --color-gray-03: #e0e3e2; --color-gray-04: #f7f7f7; /* ── Tints ─────────────────────────────────────────────────── */ --color-mint: #daf4dd; --color-mint-50: #edfaee; --color-light-purple: #e5daf4; --color-light-purple-50: #f1edfa; --color-beige: #f1e9e2; --color-beige-50: #f8f4f0; --color-pale-yellow: #FFFCB1; --color-pale-yellow-50: #FFFDD8; /* Sky: the "work in motion" family (Jira-style in-progress blue). Added for ticket-status color coding — the palette had no blue, and every other tint was already claimed by another status family. Pastel to match the tints. */ --color-sky: #d8e7f5; --color-sky-50: #ecf4fb; /* ── Typography ─────────────────────────────────────────────── */ --font-size-label: 14px; --font-size-body: 16px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --color-text: var(--color-midnight); --color-placeholder: var(--color-gray-01); /* ── Buttons ───────────────────────────────────────────────── */ --btn-height: 44px; --btn-padding: 10px 20px; --btn-border-radius: 6px; --btn-font-weight: var(--font-weight-bold); --btn-primary-bg: var(--color-bright-green); --btn-primary-text: var(--color-midnight); --btn-primary-bg-hover: #8fd455; --btn-primary-bg-active: #7bbf47; --btn-primary-bg-disabled:var(--color-gray-03); --btn-primary-text-disabled: var(--color-gray-01); --btn-secondary-bg: var(--color-gray-03); --btn-secondary-text: var(--color-midnight); --btn-secondary-bg-hover: var(--color-gray-02); --btn-secondary-bg-active:#a8b0ae; --btn-tertiary-bg: var(--color-red); --btn-tertiary-text: var(--color-white); --btn-tertiary-bg-hover: #e03e34; --btn-tertiary-bg-active: #c73530; /* ── Form Inputs ───────────────────────────────────────────── */ --input-height: 59px; --input-border-radius: 6px; --input-border: 1px solid var(--color-gray-02); --input-padding: 18px 12px; --input-bg: var(--color-white); --input-text: var(--color-midnight); --input-focus-border: 2px solid var(--color-bright-green); --input-error-border: 2px solid var(--color-red); --input-error-text: var(--color-red); --textarea-min-height: 137px; --vp-field-gap: 6px; --vp-field-label-gap: 3px; --vp-field-message-gap: 8px; --vp-field-inline-gap: 8px; --vp-field-padding-x: 12px; --vp-textarea-padding: 12px; --vp-form-gap: 18px; --vp-form-gap-compact: 14px; --vp-form-section-gap: 18px; --vp-form-section-gap-compact: 14px; /* ── Spacing / Radius ──────────────────────────────────────── */ --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 12px; /* ── Component Semantic Tokens ─────────────────────────────── These flip between light and dark mode. Always use these in component CSS instead of raw color primitives. ── */ --vp-label-color: var(--color-midnight); --vp-input-color: var(--color-midnight); --vp-placeholder-color: #6b736f; /* WCAG AA fix per Lab #227 / audit #14 — was var(--color-gray-01) #909893 (3.21:1 fails) */ --vp-text-secondary: #6b736f; /* Secondary body/caption text. AA on white/gray-04; replaces washed-out --color-gray-01 #909893 (2.58:1 fails) */ --vp-surface-input: var(--color-white); --vp-surface-disabled: var(--color-gray-04); --vp-surface-hover: var(--color-gray-03); --vp-border-default: var(--color-gray-02); --vp-border-disabled: var(--color-gray-03); --vp-border-hover: var(--color-midnight); --vp-content-bg: var(--color-gray-04); --vp-content-text: var(--color-midnight); --vp-code-bg: var(--color-gray-03); --vp-divider: var(--color-gray-03); /* ── Typography Stacks ─────────────────────────────────────── Promoted from inline `var(--font-*, "…")` fallbacks scattered across components so the design language is consistent. ── */ --font-heading: "Season Sans SemiBold", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --font-body: "Season Sans Regular", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif; --font-serif: "Serrif Medium", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ── Card / Canvas Surfaces ───────────────────────────────── */ --vp-canvas-bg: var(--color-gray-04); --vp-card-bg: var(--color-white); --vp-card-border: rgba(15, 23, 19, 0.06); --vp-card-shadow: 0 18px 40px rgba(15, 23, 19, 0.06); } /* ── Dark Mode Overrides ────────────────────────────────────────── Add [data-theme="dark"] to any ancestor element and all descendants will pick up these overrides via CSS custom property inheritance. */ .dark, [data-theme="dark"] { --color-text: var(--color-white); --input-bg: #243b2f; --input-text: var(--color-white); --input-border: 1px solid #4a6057; --vp-label-color: var(--color-white); --vp-input-color: var(--color-white); --vp-placeholder-color: #96aaa2; /* WCAG AA fix per Lab #227 / audit #14 — was #6b8075 (~2.85:1 fails) against #243b2f; #96aaa2 ≈4.9:1 */ --vp-text-secondary: rgba(255, 255, 255, 0.7); /* Secondary body/caption text on dark surfaces */ --vp-surface-input: #243b2f; --vp-surface-disabled: #1a2922; --vp-surface-hover: #2d4038; --vp-border-default: #4a6057; --vp-border-disabled: #2d3d35; --vp-border-hover: var(--color-white); --vp-content-bg: #1a2922; --vp-content-text: var(--color-white); --vp-code-bg: #2d4038; --vp-divider: #2d4038; --vp-canvas-bg: #1a2922; --vp-card-bg: color-mix(in srgb, var(--color-midnight) 86%, #000 14%); --vp-card-border: rgba(255, 255, 255, 0.08); --vp-card-shadow: 0 22px 44px rgba(0, 0, 0, 0.28); --btn-secondary-bg: #2d4038; --btn-secondary-text: var(--color-white); --btn-secondary-bg-hover: #3d5246; --btn-secondary-bg-active:#4a6057; } /* ── Force light mode on any element ────────────────────────────── */ [data-theme="light"] { --color-text: var(--color-midnight); --input-bg: var(--color-white); --input-text: var(--color-midnight); --input-border: 1px solid var(--color-gray-02); --vp-label-color: var(--color-midnight); --vp-input-color: var(--color-midnight); --vp-placeholder-color: #6b736f; /* WCAG AA fix per Lab #227 / audit #14 — kept consistent with :root light-mode */ --vp-text-secondary: #6b736f; /* Secondary body/caption text — consistent with :root light-mode */ --vp-surface-input: var(--color-white); --vp-surface-disabled: var(--color-gray-04); --vp-surface-hover: var(--color-gray-03); --vp-border-default: var(--color-gray-02); --vp-border-disabled: var(--color-gray-03); --vp-border-hover: var(--color-midnight); --vp-content-bg: var(--color-gray-04); --vp-content-text: var(--color-midnight); --vp-code-bg: var(--color-gray-03); --vp-divider: var(--color-gray-03); --vp-canvas-bg: var(--color-gray-04); --vp-card-bg: var(--color-white); --vp-card-border: rgba(15, 23, 19, 0.06); --vp-card-shadow: 0 18px 40px rgba(15, 23, 19, 0.06); --btn-secondary-bg: var(--color-gray-03); --btn-secondary-text: var(--color-midnight); --btn-secondary-bg-hover: var(--color-gray-02); --btn-secondary-bg-active:#a8b0ae; } /* ── Button Base Classes ───────────────────────────────────────── */ .btn-primary, .btn-secondary, .btn-tertiary { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-height); padding: var(--btn-padding); border-radius: var(--btn-border-radius); font-weight: var(--btn-font-weight); font-size: var(--font-size-body); border: none; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; } .btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn-primary:hover { background-color: var(--btn-primary-bg-hover); } .btn-primary:active { background-color: var(--btn-primary-bg-active); } .btn-primary:disabled, .btn-primary.disabled { background-color: var(--btn-primary-bg-disabled); color: var(--btn-primary-text-disabled); cursor: not-allowed; } .btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); } .btn-secondary:hover { background-color: var(--btn-secondary-bg-hover); } .btn-secondary:active { background-color: var(--btn-secondary-bg-active); } .btn-tertiary { background-color: var(--btn-tertiary-bg); color: var(--btn-tertiary-text); } .btn-tertiary:hover { background-color: var(--btn-tertiary-bg-hover); } .btn-tertiary:active { background-color: var(--btn-tertiary-bg-active); } /* ── Form Input Base Classes ───────────────────────────────────── */ .input-group { display: flex; flex-direction: column; gap: var(--vp-field-gap); } .input-group label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); color: var(--color-text); } .form-input input, .form-input select, .form-input textarea { width: 100%; height: var(--input-height); padding: var(--input-padding); border: var(--input-border); border-radius: var(--input-border-radius); background-color: var(--input-bg); color: var(--input-text); font-size: var(--font-size-body); } .form-input textarea { height: auto; min-height: var(--textarea-min-height); resize: vertical; } .form-input input:focus, .form-input select:focus, .form-input textarea:focus { outline: none; border: var(--input-focus-border); } .form-input.error input, .form-input.error select, .form-input.error textarea { border: var(--input-error-border); } .input-error-message { font-size: var(--font-size-label); color: var(--input-error-text); margin-top: var(--vp-field-message-gap); } .form-input input::placeholder, .form-input textarea::placeholder { color: var(--color-placeholder); } /* ── Checkbox ──────────────────────────────────────────────────── */ .checkbox-row { display: flex; align-items: center; gap: 12px; } .checkbox-row .checkbox { width: 18px; height: 18px; border: 1px solid var(--color-gray-02); border-radius: var(--border-radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .checkbox-row .checkbox.checked { background-color: var(--color-bright-green); border-color: var(--color-bright-green); } .checkbox-row .checkbox.error { border-color: var(--color-red); } .checkbox-row label { font-size: var(--font-size-body); color: var(--color-text); cursor: pointer; } /* ───────────────────────────────────────────────────────────────── APPEND to the bottom of verapath-variables.css. Adds conversation-specific semantic tokens and dark overrides. No existing tokens changed. ───────────────────────────────────────────────────────────────── */ :root { /* ── Conversation surfaces ───────────────────────────────── */ --vp-msg-assistant-bg: var(--color-white); --vp-msg-assistant-border: var(--color-gray-03); --vp-msg-user-bg: linear-gradient(160deg, rgba(163, 233, 107, 0.10) 0%, rgba(255, 255, 255, 1) 100%); --vp-msg-user-border: var(--color-gray-03); --vp-msg-streaming-border: rgba(163, 233, 107, 0.45); --vp-msg-streaming-ring: rgba(163, 233, 107, 0.12); --vp-msg-shadow: 0 1px 4px rgba(34, 48, 41, 0.04); --vp-speaker-color: var(--color-green); --vp-msg-kind-color: var(--color-gray-01); --vp-msg-body-color: var(--color-midnight); /* ── Composer gradient (matches page background) ─────────── */ --vp-composer-fade-from: rgba(247, 250, 248, 0); --vp-composer-fade-mid: rgba(247, 250, 248, 0.97); --vp-composer-fade-to: rgba(247, 250, 248, 1); /* ── Suggestion chip ─────────────────────────────────────── */ --vp-suggestion-bg: var(--color-white); --vp-suggestion-border: var(--color-gray-03); --vp-suggestion-border-hover: var(--color-bright-green); --vp-suggestion-shadow: 0 1px 3px rgba(34, 48, 41, 0.04); --vp-suggestion-shadow-hover: 0 0 0 3px rgba(163, 233, 107, 0.15), 0 6px 20px rgba(163, 233, 107, 0.14); /* ── Steps ───────────────────────────────────────────────── */ --vp-step-chip-bg: var(--color-gray-04); --vp-step-chip-border: var(--color-gray-03); --vp-step-chip-text: var(--color-gray-01); --vp-step-chip-hover-bg: var(--color-gray-03); --vp-step-chip-hover-border:var(--color-gray-02); --vp-step-chip-hover-text: var(--color-midnight); --vp-step-shimmer: rgba(163, 233, 107, 0.20); --vp-step-list-border: var(--color-gray-03); --vp-step-row-hover: var(--color-gray-04); --vp-step-detail-bg: var(--color-gray-04); --vp-step-dot-color: var(--color-gray-02); /* ── Citations ───────────────────────────────────────────── */ --vp-citation-bg: var(--color-gray-04); --vp-citation-border: var(--color-gray-03); --vp-citation-num-bg: var(--color-midnight); --vp-citation-num-color: var(--color-bright-green); --vp-citation-link: var(--color-green); --vp-citation-hover-bg: color-mix(in srgb, var(--color-bright-green) 10%, var(--color-gray-04)); /* ── Action icon buttons (feedback / copy) ───────────────── */ --vp-action-btn-color: var(--color-gray-01); --vp-action-btn-hover-bg: var(--color-gray-04); --vp-action-btn-hover-color:var(--color-midnight); /* ── Typing / cursor ─────────────────────────────────────── */ --vp-typing-dot-color: var(--color-gray-02); --vp-cursor-color: var(--color-midnight); /* ── File preview card inside transcript ─────────────────── */ --vp-preview-bg: var(--color-gray-04); --vp-preview-caption-color: var(--color-gray-01); /* ── Code blocks in assistant markdown ───────────────────── */ --vp-code-block-bg: #0f1713; /* deeper than --vp-code-bg for contrast against the white bubble */ --vp-code-block-fg: #e8f3ec; --vp-code-block-border: rgba(255, 255, 255, 0.05); --vp-code-inline-bg: var(--vp-code-bg); /* reuse existing inline chip */ --vp-code-inline-fg: var(--color-midnight); /* ── Scroll-to-bottom fab ────────────────────────────────── */ --vp-fab-bg: var(--color-white); --vp-fab-border: var(--color-gray-02); --vp-fab-shadow: 0 2px 8px rgba(34, 48, 41, 0.12); --vp-fab-shadow-hover: 0 4px 12px rgba(34, 48, 41, 0.18); --vp-fab-color: var(--color-midnight); /* ── Token chip row ──────────────────────────────────────── */ --vp-meta-chip-color: var(--color-gray-01); } .dark, [data-theme="dark"] { --vp-msg-assistant-bg: color-mix(in srgb, var(--color-midnight) 88%, #000 12%); --vp-msg-assistant-border: rgba(255, 255, 255, 0.08); --vp-msg-user-bg: linear-gradient(160deg, rgba(163, 233, 107, 0.12) 0%, rgba(36, 59, 47, 0.98) 100%); --vp-msg-user-border: rgba(255, 255, 255, 0.08); --vp-msg-streaming-border: rgba(163, 233, 107, 0.55); --vp-msg-streaming-ring: rgba(163, 233, 107, 0.16); --vp-msg-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); --vp-speaker-color: var(--color-bright-green); --vp-msg-kind-color: rgba(255, 255, 255, 0.55); --vp-msg-body-color: var(--color-white); --vp-composer-fade-from: rgba(26, 41, 34, 0); --vp-composer-fade-mid: rgba(26, 41, 34, 0.97); --vp-composer-fade-to: rgba(26, 41, 34, 1); --vp-suggestion-bg: rgba(255, 255, 255, 0.03); --vp-suggestion-border: rgba(255, 255, 255, 0.10); --vp-suggestion-border-hover: var(--color-bright-green); --vp-suggestion-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); --vp-suggestion-shadow-hover: 0 0 0 3px rgba(163, 233, 107, 0.22), 0 6px 20px rgba(0, 0, 0, 0.35); --vp-step-chip-bg: rgba(255, 255, 255, 0.04); --vp-step-chip-border: rgba(255, 255, 255, 0.10); --vp-step-chip-text: rgba(255, 255, 255, 0.65); --vp-step-chip-hover-bg: rgba(255, 255, 255, 0.08); --vp-step-chip-hover-border:rgba(255, 255, 255, 0.18); --vp-step-chip-hover-text: var(--color-white); --vp-step-shimmer: rgba(163, 233, 107, 0.14); --vp-step-list-border: rgba(255, 255, 255, 0.08); --vp-step-row-hover: rgba(255, 255, 255, 0.05); --vp-step-detail-bg: rgba(0, 0, 0, 0.25); --vp-step-dot-color: rgba(255, 255, 255, 0.35); --vp-citation-bg: rgba(255, 255, 255, 0.04); --vp-citation-border: rgba(255, 255, 255, 0.08); --vp-citation-num-bg: var(--color-bright-green); --vp-citation-num-color: var(--color-midnight); --vp-citation-link: var(--color-bright-green); --vp-citation-hover-bg: rgba(163, 233, 107, 0.08); --vp-action-btn-color: rgba(255, 255, 255, 0.55); --vp-action-btn-hover-bg: rgba(255, 255, 255, 0.06); --vp-action-btn-hover-color:var(--color-white); --vp-typing-dot-color: rgba(255, 255, 255, 0.35); --vp-cursor-color: var(--color-white); --vp-preview-bg: rgba(255, 255, 255, 0.04); --vp-preview-caption-color: rgba(255, 255, 255, 0.55); --vp-code-block-bg: #0a100d; --vp-code-block-fg: #d9ece0; --vp-code-block-border: rgba(255, 255, 255, 0.06); --vp-code-inline-bg: var(--vp-code-bg); --vp-code-inline-fg: var(--color-white); --vp-fab-bg: color-mix(in srgb, var(--color-midnight) 70%, #000 30%); --vp-fab-border: rgba(255, 255, 255, 0.18); --vp-fab-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --vp-fab-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.55); --vp-fab-color: var(--color-white); --vp-meta-chip-color: rgba(255, 255, 255, 0.55); } /* Explicit light-mode override block also gets the same tokens so nested [data-theme="light"] regions work correctly. */ [data-theme="light"] { --vp-msg-assistant-bg: var(--color-white); --vp-msg-assistant-border: var(--color-gray-03); --vp-msg-user-bg: linear-gradient(160deg, rgba(163, 233, 107, 0.10) 0%, rgba(255, 255, 255, 1) 100%); --vp-msg-user-border: var(--color-gray-03); --vp-msg-streaming-border: rgba(163, 233, 107, 0.45); --vp-msg-streaming-ring: rgba(163, 233, 107, 0.12); --vp-msg-shadow: 0 1px 4px rgba(34, 48, 41, 0.04); --vp-speaker-color: var(--color-green); --vp-msg-kind-color: var(--color-gray-01); --vp-msg-body-color: var(--color-midnight); --vp-composer-fade-from: rgba(247, 250, 248, 0); --vp-composer-fade-mid: rgba(247, 250, 248, 0.97); --vp-composer-fade-to: rgba(247, 250, 248, 1); --vp-suggestion-bg: var(--color-white); --vp-suggestion-border: var(--color-gray-03); --vp-suggestion-shadow: 0 1px 3px rgba(34, 48, 41, 0.04); --vp-step-chip-bg: var(--color-gray-04); --vp-step-chip-border: var(--color-gray-03); --vp-step-chip-text: var(--color-gray-01); --vp-step-chip-hover-bg: var(--color-gray-03); --vp-step-chip-hover-border:var(--color-gray-02); --vp-step-chip-hover-text: var(--color-midnight); --vp-step-shimmer: rgba(163, 233, 107, 0.20); --vp-step-list-border: var(--color-gray-03); --vp-step-row-hover: var(--color-gray-04); --vp-step-detail-bg: var(--color-gray-04); --vp-step-dot-color: var(--color-gray-02); --vp-citation-bg: var(--color-gray-04); --vp-citation-border: var(--color-gray-03); --vp-citation-num-bg: var(--color-midnight); --vp-citation-num-color: var(--color-bright-green); --vp-citation-link: var(--color-green); --vp-citation-hover-bg: color-mix(in srgb, var(--color-bright-green) 10%, var(--color-gray-04)); --vp-action-btn-color: var(--color-gray-01); --vp-action-btn-hover-bg: var(--color-gray-04); --vp-action-btn-hover-color:var(--color-midnight); --vp-typing-dot-color: var(--color-gray-02); --vp-cursor-color: var(--color-midnight); --vp-preview-bg: var(--color-gray-04); --vp-preview-caption-color: var(--color-gray-01); --vp-code-block-bg: #0f1713; --vp-code-block-fg: #e8f3ec; --vp-code-block-border: rgba(255, 255, 255, 0.05); --vp-code-inline-bg: var(--vp-code-bg); --vp-code-inline-fg: var(--color-midnight); --vp-fab-bg: var(--color-white); --vp-fab-border: var(--color-gray-02); --vp-fab-shadow: 0 2px 8px rgba(34, 48, 41, 0.12); --vp-fab-shadow-hover: 0 4px 12px rgba(34, 48, 41, 0.18); --vp-fab-color: var(--color-midnight); --vp-meta-chip-color: var(--color-gray-01); } /* ═══════════════════════════════════════════════════════════════════ /AI page redesign — additional tokens (mockup: conversation-redesign.html) Append-only; no existing tokens changed. ═══════════════════════════════════════════════════════════════════ */ :root { --color-midnight-40: rgba(34, 48, 41, 0.40); --color-midnight-60: rgba(34, 48, 41, 0.60); --color-midnight-80: rgba(34, 48, 41, 0.80); --vp-coral: #D97757; --vp-welcome-brand-color: var(--color-midnight); --vp-convo-header-color: var(--color-midnight); --vp-convo-header-meta-color: var(--color-gray-01); --vp-convo-header-border: var(--color-gray-03); --vp-token-meter-bg: var(--color-gray-04); --vp-token-meter-border: var(--color-gray-03); --vp-token-meter-count: var(--color-midnight); --vp-token-meter-total: var(--color-gray-01); --vp-token-meter-bar-bg: var(--color-gray-03); --vp-token-meter-fill: var(--color-midnight-80); --vp-token-meter-warn: #d48a3a; --vp-token-meter-warn-text: #a8651f; --vp-token-meter-danger: var(--color-red); --vp-shortcut-bg: var(--color-gray-04); --vp-shortcut-border: var(--color-gray-03); --vp-shortcut-color: var(--color-gray-01); --vp-attach-item-icon-bg: var(--color-gray-04); --vp-attach-item-icon-color:var(--color-midnight); --vp-attach-item-hover-bg: var(--color-gray-04); --vp-attach-header-color: var(--color-gray-01); --vp-attach-sep: var(--color-gray-03); --vp-attach-kbd-color: var(--color-gray-01); --vp-icon-btn-color: var(--color-gray-01); --vp-icon-btn-hover-bg: var(--color-gray-04); --vp-icon-btn-hover-color: var(--color-midnight); --vp-topbar-chip-bg: var(--color-gray-04); --vp-topbar-chip-color: var(--color-gray-01); --vp-topbar-chip-dot: var(--color-green); --vp-bubble-user-bg: var(--color-mint-50); --vp-bubble-user-border: var(--color-mint); --vp-bubble-user-color: var(--color-midnight); --vp-msg-assistant-color: var(--color-midnight); --vp-sug-icon-bg: var(--color-gray-04); --vp-sug-icon-color: var(--color-midnight); --vp-sug-icon-hover-bg: var(--color-midnight); --vp-sug-icon-hover-color: var(--color-bright-green); --vp-sug-mint-bg: rgba(163, 233, 107, 0.15); --vp-sug-mint-color: var(--color-green); --vp-sug-beige-bg: var(--color-beige-50); --vp-sug-beige-color: #8b6a3f; --vp-sug-lilac-bg: #f2edfe; --vp-sug-lilac-color: #7c5dc7; --vp-steps-panel-bg: var(--color-white); --vp-steps-panel-border: var(--color-gray-03); --vp-steps-trigger-color: var(--color-midnight); --vp-steps-trigger-icon: var(--color-green); --vp-steps-trigger-count: var(--color-gray-01); --vp-step-live-bg: rgba(163, 233, 107, 0.10); --vp-step-live-border: rgba(163, 233, 107, 0.40); --vp-step-live-color: var(--color-midnight); --vp-step-live-dot: var(--color-green); --vp-step-live-shimmer: rgba(255, 255, 255, 0.50); --vp-cite-ref-bg: var(--color-gray-04); --vp-cite-ref-color: var(--color-midnight); --vp-cite-ref-hover-bg: var(--color-bright-green); --vp-cite-ref-hover-color: var(--color-midnight); --vp-action-ghost-color: var(--color-gray-01); --vp-action-ghost-hover-bg: var(--color-gray-04); --vp-action-ghost-hover-color: var(--color-midnight); --vp-action-up-color: var(--color-green); --vp-action-down-color: var(--color-red); --vp-figure-bg: var(--color-white); --vp-figure-border: var(--color-gray-03); --vp-page-surface: var(--color-gray-04); --vp-topbar-bg: var(--color-white); --vp-topbar-border: var(--color-gray-03); } .dark, [data-theme="dark"] { --color-midnight-40: rgba(255, 255, 255, 0.20); --color-midnight-60: rgba(255, 255, 255, 0.40); --color-midnight-80: rgba(255, 255, 255, 0.70); --vp-welcome-brand-color: var(--color-white); --vp-convo-header-color: var(--color-white); --vp-convo-header-meta-color: rgba(255, 255, 255, 0.55); --vp-convo-header-border: rgba(255, 255, 255, 0.10); --vp-token-meter-bg: rgba(255, 255, 255, 0.04); --vp-token-meter-border: rgba(255, 255, 255, 0.10); --vp-token-meter-count: var(--color-white); --vp-token-meter-total: rgba(255, 255, 255, 0.55); --vp-token-meter-bar-bg: rgba(255, 255, 255, 0.10); --vp-token-meter-fill: rgba(255, 255, 255, 0.70); --vp-token-meter-warn: #e0a563; --vp-token-meter-warn-text: #f0c38e; --vp-shortcut-bg: rgba(255, 255, 255, 0.04); --vp-shortcut-border: rgba(255, 255, 255, 0.10); --vp-shortcut-color: rgba(255, 255, 255, 0.55); --vp-attach-item-icon-bg: rgba(255, 255, 255, 0.04); --vp-attach-item-icon-color:var(--color-white); --vp-attach-item-hover-bg: rgba(255, 255, 255, 0.06); --vp-attach-header-color: rgba(255, 255, 255, 0.55); --vp-attach-sep: rgba(255, 255, 255, 0.10); --vp-attach-kbd-color: rgba(255, 255, 255, 0.55); --vp-icon-btn-color: rgba(255, 255, 255, 0.55); --vp-icon-btn-hover-bg: rgba(255, 255, 255, 0.06); --vp-icon-btn-hover-color: var(--color-white); --vp-topbar-chip-bg: rgba(255, 255, 255, 0.05); --vp-topbar-chip-color: rgba(255, 255, 255, 0.65); --vp-bubble-user-bg: linear-gradient(160deg, rgba(163, 233, 107, 0.12) 0%, rgba(36, 59, 47, 0.98) 100%); --vp-bubble-user-border: rgba(163, 233, 107, 0.25); --vp-bubble-user-color: var(--color-white); --vp-msg-assistant-color: var(--color-white); --vp-sug-icon-bg: rgba(255, 255, 255, 0.04); --vp-sug-icon-color: rgba(255, 255, 255, 0.85); --vp-sug-icon-hover-bg: var(--color-bright-green); --vp-sug-icon-hover-color: var(--color-midnight); --vp-sug-mint-bg: rgba(163, 233, 107, 0.20); --vp-sug-mint-color: var(--color-bright-green); --vp-sug-beige-bg: rgba(241, 233, 226, 0.10); --vp-sug-beige-color: #d4b08a; --vp-sug-lilac-bg: rgba(188, 169, 241, 0.14); --vp-sug-lilac-color: #c9b6f4; --vp-steps-panel-bg: rgba(255, 255, 255, 0.03); --vp-steps-panel-border: rgba(255, 255, 255, 0.08); --vp-steps-trigger-color: var(--color-white); --vp-steps-trigger-icon: var(--color-bright-green); --vp-steps-trigger-count: rgba(255, 255, 255, 0.55); --vp-step-live-bg: rgba(163, 233, 107, 0.12); --vp-step-live-border: rgba(163, 233, 107, 0.40); --vp-step-live-color: var(--color-white); --vp-step-live-shimmer: rgba(255, 255, 255, 0.14); --vp-cite-ref-bg: rgba(255, 255, 255, 0.06); --vp-cite-ref-color: var(--color-white); --vp-action-ghost-color: rgba(255, 255, 255, 0.55); --vp-action-ghost-hover-bg: rgba(255, 255, 255, 0.06); --vp-action-ghost-hover-color: var(--color-white); --vp-action-up-color: var(--color-bright-green); --vp-figure-bg: rgba(255, 255, 255, 0.04); --vp-figure-border: rgba(255, 255, 255, 0.08); --vp-page-surface: #1a2922; --vp-topbar-bg: color-mix(in srgb, var(--color-midnight) 88%, #000 12%); --vp-topbar-border: rgba(255, 255, 255, 0.08); } /* ═══════════════════════════════════════════════════════════════════ Foundation scale tokens — radius / size / space / focus / z-index Per Frank's Verapath.Components UX/UI Audit (Lab #227, May 2026). Append-only; zero existing tokens changed beyond audit #14 placeholder fix above. PR 1 of 6 in the audit's engineering changelist. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Radius ramp ────────────────────────────────────────────── */ --radius-xs: 4px; /* checkbox */ --radius-sm: 8px; /* input, dropdown, badge */ --radius-md: 14px; /* modal, news card */ --radius-lg: 22px; /* card, tab, form */ --radius-pill: 999px; /* button, chip */ /* ── Height scale ───────────────────────────────────────────── */ --size-sm: 32px; --size-md: 40px; --size-lg: 48px; --size-xl: 56px; /* ── Space (4px grid) ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* ── Focus ring colors (state-specific) ─────────────────────── */ --vp-focus-ring-default: var(--color-bright-green); --vp-focus-ring-error: var(--color-red); --vp-focus-ring-success: var(--color-green); /* ── Z-index layer scale ────────────────────────────────────── */ --vp-z-tooltip: 800; --vp-z-dropdown: 900; --vp-z-drawer: 950; --vp-z-modal: 1000; --vp-z-toast: 1100; } /* ═══════════════════════════════════════════════════════════════════ Global keyboard focus visibility (WCAG 2.4.7) Many hand-authored interactive elements (news filter buttons, footer links, docs TOC links, page CTAs) defined :hover but no focus state, leaving keyboard users with no indication of position. --color-green (#0ea665) is used for the ring because it clears the 3:1 UI-component contrast threshold against BOTH the white/gray-04 light surfaces and the #223029 midnight footer/hero — so a single rule is safe on every surface. :focus-visible (not :focus) keeps the ring off mouse clicks. Form inputs manage their own focus border and are intentionally not overridden here. ═══════════════════════════════════════════════════════════════════ */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════ Reduced motion (WCAG 2.3.3) No reduced-motion handling existed anywhere, yet the Framer Home/About pages run 36+ scroll-reveal animations. This collapses animations and transitions to near-instant for users who request reduced motion. Reveal elements start at opacity:0 and are driven to opacity:1 by the Framer runtime regardless of CSS, so near-zero durations make them appear instantly rather than leaving them hidden. iteration-count:1 stops any looping/marquee effects (e.g. TrustedBadgeMarquee). ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════ Elevation ramp One shared set of card/panel shadows so raised surfaces read as one system instead of four ad-hoc recipes (NewsCard / Docs TOC / Contact sidebar / the older --vp-card-shadow). --vp-elevation-1 resting card --vp-elevation-2 raised / hover / prominent panel ═══════════════════════════════════════════════════════════════════ */ :root { --vp-elevation-1: 0 1px 4px rgba(34, 48, 41, 0.06), 0 4px 16px rgba(34, 48, 41, 0.07); --vp-elevation-2: 0 2px 8px rgba(34, 48, 41, 0.08), 0 10px 36px rgba(34, 48, 41, 0.11); } .dark, [data-theme="dark"] { --vp-elevation-1: 0 1px 4px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(0, 0, 0, 0.22); --vp-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 40px rgba(0, 0, 0, 0.32); }