/* VitroVault Trust Centre — design tokens (single source of truth). ============================================================================ Reconciliation (see SQR-interop-decisions-jul26.md "Design-system skew" and DEV-HANDOVER.md §2). Three source rules, resolved: 1. COLOUR + SHAPE tokens are re-issued from the CANONICAL SQR "Meridian" system (compliance-tool/web/static/css/hifi.css, 2026-07-04): accent #EB5200 (NOT the pre-Meridian #FF5500 in the stale hifi.css copied into this folder), the ink scale, and the go/warn/stop semantics. This keeps one shared brand-colour source. 2. FONTS are the Trust-specific stack (Space Grotesk / Albert Sans / Spline Sans Mono / Caveat) per DEV-HANDOVER §2, which deliberately supersedes both the brief's Bricolage and Meridian's Archivo, and matches the delivered W1 mock. The interop "re-issue from Meridian" note is about colour, not type. 3. PAPER is context-split, a deliberate Trust brand-separation choice (DEV-HANDOVER §2), NOT inherited from Meridian's warm paper: - buyer-facing trust surfaces -> WHITE (#FFFFFF) + neutral-grey lines, so the page blends into the supplier's own site. - our own surfaces (console, marketing, emails, component library) -> cool indigo-tinted paper (#EFF1F6), so they read as distinct from SQR. Applied via a surface scope (body.surface-trust / body.surface-app) below. ============================================================================ */ @import "fonts.css"; :root { /* ---- Ink scale (Meridian canonical) ---- */ --ink: #161511; /* primary text */ --ink-2: #6C6960; /* secondary text */ --ink-3: #98948A; /* tertiary / uncovered checklist rows (neutral, never red) */ /* ---- Accent (Meridian canonical; INKASEC orange) ---- */ --accent: #EB5200; --accent-ink: #C24000; /* text-safe on light paper (>= AA) */ --accent-tint: #FCF4EC; /* ---- Brand midnight indigo (console sidebar; design §2) ---- */ --brand: #1A1A2E; --brand-2: #2A2A44; /* sidebar hover / active ground */ --brand-3: #9C9CB4; /* muted sidebar text */ /* ---- Semantics (Meridian canonical). Trust mapping: go = current / granted / verified email warn = due soon / pending approval stop = overdue / revoked / expired Uncovered checklist areas are NEVER stop-red — they use --ink-3 (see design §2). */ --go: #146B47; --go-tint: #EAF3EE; --warn: #8F6A14; --warn-tint: #F7F0DD; --stop: #A44432; --stop-tint: #F6E9E5; /* ---- Shape (Meridian canonical) ---- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px; --sh-card: 0 30px 60px -40px rgba(22,21,17,.30); --sh-soft: 0 14px 34px -24px rgba(22,21,17,.22); --maxw: 1120px; /* ---- Type (Trust stack, self-hosted) ---- */ --display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --sans: "Albert Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace; --sign: "Caveat", "Segoe Script", cursive; /* ---- Supplier accent (trust pages only; links + CTAs only). --sa / --sa-ink are OVERRIDDEN per space at publish time, AA-darkened by the build step (web/build.py:aa_accent). Default = the VitroVault accent. ---- */ --sa: var(--accent); --sa-ink: var(--accent-ink); } /* ============================================================================ Surface scopes — the two paper contexts. Set on . ============================================================================ */ /* Buyer-facing trust pages: white, neutral-grey lines (blend into supplier's site). Element-scoped (usable on or any container, so previews can show both). */ .surface-trust { --paper: #FFFFFF; --card: #FFFFFF; --wash: #F7F7F8; --line: #E6E6EA; --line-2:#D8D8DE; background: var(--paper); color: var(--ink); } /* Our own surfaces (console / marketing / emails / component library): cool indigo. */ .surface-app { --paper: #EFF1F6; --card: #FFFFFF; --wash: #E7EAF1; --line: #DCE0EA; --line-2:#C9CEDC; background: var(--paper); color: var(--ink); } /* ---- Base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper, #FFFFFF); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; } a { color: var(--sa-ink); text-decoration: none; } a:hover { text-decoration: underline; } /* Mono is reserved for audit/event data, timestamps, hashes, dates, code paths. */ .mono, time, .event, .stamp { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Eyebrow label (SECURITY OVERVIEW / CERTIFICATIONS / COVERAGE ...) as in the W1 mock. */ .eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* Visible focus — WCAG 2.1 AA, on every interactive element (no colour-only meaning). */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; border-radius: 4px; } /* Respect reduced-motion; nothing on trust surfaces animates coverage/state anyway. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }