/* ============================================================================
Open1031 mockup token sheet — the SAME token contract the app ships.
Link this from every mockup:
...and never write a raw hex in a mockup again. What you style here is what
the coding agent styles in packages/web-app/src/index.css.
── Provenance ──────────────────────────────────────────────────────────────
Tokens marked [APP] already exist in packages/web-app/src/index.css with
these exact names and values, in :root and .dark. Copy them; do not drift.
Tokens marked [PROPOSED] do NOT exist in the app yet. They are named here the
way they should be added. When these mockups become code, add them to
index.css :root/.dark first — do not inline the hex at the call site.
── Theme resolution ────────────────────────────────────────────────────────
Three states, matching the app's .dark class plus an explicit user override:
no attribute → follow the OS (prefers-color-scheme)
[data-theme="light"] → force light, even on a dark OS
[data-theme="dark"] → force dark, even on a light OS
========================================================================== */
:root {
/* ── shadcn base [APP] — HSL triplets, consumed as hsl(var(--token)) ── */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 210 40% 99%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 175 77% 26%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 43%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 28% 89%;
--input: 214.3 28% 89%;
--ring: 175 77% 26%;
/* ── surfaces & ink [APP] ── */
--surface: #ffffff;
--surface-2: #f8fafc;
--page-bg: #f1f5f9;
--ink: #0f172a;
--ink-2: #475569;
/* [RESOLVED 2026-08-29, #2720 W0.3] index.css previously shipped --ink-3: #64748b,
which failed WCAG AA on four of the six surfaces it is used on. Both sheets now
carry #5b6b80 (AA on all six, 4.62-5.44) and the parity gate
(designTokens.parity.test.ts) enforces the agreement. */
--ink-3: #5b6b80;
--line: #e8edf2;
--line-2: #e2e8f0;
/* [APP] a 4th ink step for icons, rules and disabled glyphs ONLY (declared in index.css :root and .dark, #3344).
Never body text: #94a3b8 is 3.0:1 on white and fails WCAG AA. */
--ink-4: #94a3b8;
/* [APP] recessed surface for nav rails and toolbars (declared in index.css :root and .dark, #3344; product register
asks for a second neutral layer behind the content surface). */
--surface-sunk: #eef2f7;
/* ── radius, motion, shadow [APP] ── */
--radius: 0.5rem;
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--duration-instant: 120ms;
--duration-fast: 180ms;
--duration-base: 280ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--app-shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
--app-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 12px 28px rgba(15,23,42,0.08);
--app-shadow-lg: 0 8px 24px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.10);
/* ── QI console chrome [APP] ── */
--qi-nav-active-bg: rgba(79,70,229,0.10);
--qi-nav-hover-bg: rgba(79,70,229,0.06);
--qi-badge-indigo-bg: rgba(99,102,241,0.12);
--qi-badge-green-bg: rgba(22,163,74,0.12);
--qi-badge-green-text: #15803d;
--badge-danger-bg: #dc2626;
--badge-danger-text: #ffffff;
/* ── KYC status [APP] ── */
--kyc-success-text: #15803d;
--kyc-success-bg: #ecfdf5;
--kyc-success-line: #bbf7d0;
--kyc-warn-text: #b45309;
--kyc-warn-bg: #fffbeb;
--kyc-warn-line: #fde68a;
/* ── hub wayfinding [APP] ── */
--phase-sale-solid: #16a34a;
--phase-sale-band: #16a34a;
--phase-sale-on-solid: #ffffff;
--phase-sale-ink: #15803d;
--phase-sale-wash: #f0fdf4;
--phase-sale-line: #bbf7d0;
--phase-identification-solid: #2563eb;
--phase-identification-band: #2563eb;
--phase-identification-on-solid: #ffffff;
--phase-identification-ink: #1d4ed8;
--phase-identification-wash: #eff6ff;
--phase-identification-line: #bfdbfe;
--phase-purchase-solid: #9333ea;
--phase-purchase-band: #9333ea;
--phase-purchase-on-solid: #ffffff;
--phase-purchase-ink: #7e22ce;
--phase-purchase-wash: #faf5ff;
--phase-purchase-line: #e9d5ff;
--phase-close-solid: #0f766e;
--phase-close-band: #0f766e;
--phase-close-on-solid: #ffffff;
--phase-close-ink: #0f766e;
--phase-close-wash: #f0fdfa;
--phase-close-line: #99f6e4;
--phase-parking-solid: #15803d;
--phase-parking-on-solid: #ffffff;
--phase-parking-ink: #15803d;
--phase-parking-wash: #f0fdf4;
--phase-parking-line: #bbf7d0;
--phase-construction-solid: #0e7490;
--phase-construction-on-solid: #ffffff;
--phase-construction-ink: #0e7490;
--phase-construction-wash: #ecfeff;
--phase-construction-line: #a5f3fc;
--hub-id: var(--phase-identification-solid);
--hub-sales: var(--phase-sale-solid);
--hub-escrow: #0891b2;
--hub-purchase: var(--phase-purchase-solid);
/* ══ [PROPOSED] admin accent ══
DESIGN.md names admin-indigo #4f46e5 but the app has no scalar token for
it — only the rgba() nav/badge washes above. The console needs the full
role set. `--admin-on` is the foreground ON a filled admin surface; it
flips in dark, where the fill lightens. */
--admin: #4f46e5;
--admin-ink: #3730a3;
--admin-wash: #eef2ff;
--admin-line: #c7d2fe;
--admin-on: #ffffff;
/* ══ [PROPOSED] status triad ══
DESIGN.md names status-good/warn/bad; the app only has the KYC-scoped
variants. Generalise them: `-ink` is text-on-surface, `-wash`/`-line` are
the pill/callout pair, `-on` is text on a filled button. */
--good: #16a34a;
/* #15803d (the app's --kyc-success-text) is only 4.46:1 on --surface-sunk and
4.79:1 on its own wash — it fails or scrapes AA exactly where success text
is most used. #166534 gives 6.34 / 6.81 / 7.13. Apply to index.css too. */
--good-ink: #166534;
--good-wash: #f0fdf4;
--good-line: #bbf7d0;
--good-on: #ffffff;
--warn: #d97706;
--warn-ink: #b45309;
--warn-wash: #fffbeb;
--warn-line: #fde68a;
--bad: #dc2626;
--bad-ink: #b91c1c;
--bad-wash: #fef2f2;
--bad-line: #fecaca;
--teal-ink: #0f766e;
--teal-wash: #f0fdfa;
--teal-line: #99f6e4;
/* ── z-index scale [APP] — semantic, never arbitrary 999 (all six steps landed with #3669) ── */
--z-dropdown: 100;
--z-sticky: 200;
--z-backdrop: 300;
--z-modal: 400;
--z-toast: 500;
--z-tooltip: 600;
}
:root[data-light='subtle'] {
--background: 214 26% 95%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--muted: 214 32% 93%;
--muted-foreground: 215 19% 35%;
--border: 214 24% 82%;
--surface: #ffffff;
--surface-2: #f6f8fb;
--surface-sunk: #e8edf3;
--page-bg: #eef1f5;
--canvas: #eef1f5;
--ink-2: #334155;
--ink-3: #475569;
--line: #d7dee8;
--line-2: #cbd5e1;
--app-shadow-sm: 0 1px 2px rgba(15,23,42,0.07), 0 5px 14px -8px rgba(15,23,42,0.16);
--app-shadow: 0 2px 5px rgba(15,23,42,0.07), 0 12px 28px -10px rgba(15,23,42,0.18);
--app-shadow-lg: 0 8px 20px rgba(15,23,42,0.10), 0 24px 44px -14px rgba(15,23,42,0.20);
--teal: hsl(190 45% 50%);
--teal-tint: #e8f6f8;
--page-wash: rgba(15,118,110,0.07);
--select-wash: rgba(15,118,110,0.10);
--glass-bg: rgba(248,251,255,0.78);
--glass-bg-strong: rgba(255,255,255,0.90);
--glass-border: rgba(71,85,105,0.20);
--glass-chrome-tint: rgba(248,251,255,0.74);
--glass-chrome-blur: 16px;
--glass-chrome-edge: rgba(71,85,105,0.16);
--glass-float-tint: rgba(255,255,255,0.82);
--glass-panel-tint: rgba(248,251,255,0.78);
--glass-panel-blur: 18px;
--glass-panel-edge: rgba(71,85,105,0.16);
--glass-float-edge: rgba(71,85,105,0.18);
--glass-nav-tint: rgba(248,251,255,0.76);
--glass-nav-blur: 16px;
--glass-nav-edge: rgba(71,85,105,0.16);
--qi-bar-tint: rgba(248,251,255,0.82);
--glass-control-edge: rgba(71,85,105,0.18);
}
:root[data-light='bold'] {
--background: 214 37% 93%;
--foreground: 220 49% 8%;
--card: 0 0% 100%;
--card-foreground: 220 49% 8%;
--popover: 0 0% 100%;
--popover-foreground: 220 49% 8%;
--secondary: 214 32% 90%;
--secondary-foreground: 220 49% 8%;
--muted: 214 32% 90%;
--muted-foreground: 216 23% 34%;
--accent: 214 45% 88%;
--accent-foreground: 220 49% 8%;
--border: 216 25% 76%;
--primary: 175 84% 22%;
--surface: #ffffff;
--surface-2: #f1f5f9;
--surface-sunk: #dce4ee;
--page-bg: #e5ebf3;
--canvas: #e5ebf3;
--ink: #0b1220;
--ink-2: #27364a;
--ink-3: #42526a;
--line: #c5cfdd;
--line-2: #b8c5d6;
--app-shadow-sm: 0 2px 4px rgba(15,23,42,0.10), 0 8px 18px -9px rgba(15,23,42,0.24);
--app-shadow: 0 3px 7px rgba(15,23,42,0.10), 0 16px 34px -11px rgba(15,23,42,0.28);
--app-shadow-lg: 0 10px 24px rgba(15,23,42,0.13), 0 30px 54px -16px rgba(15,23,42,0.32);
--phase-sale-solid: #15803d;
--phase-sale-band: #15803d;
--phase-sale-wash: #dcfce7;
--phase-sale-line: #86efac;
--phase-identification-solid: #1d4ed8;
--phase-identification-band: #1d4ed8;
--phase-identification-wash: #dbeafe;
--phase-identification-line: #93c5fd;
--phase-purchase-solid: #7e22ce;
--phase-purchase-band: #7e22ce;
--phase-purchase-wash: #f3e8ff;
--phase-purchase-line: #d8b4fe;
--phase-close-solid: #0f766e;
--phase-close-band: #0f766e;
--phase-close-wash: #ccfbf1;
--phase-close-line: #5eead4;
--hub-escrow: #0e7490;
--hub-escrow-wash: #cffafe;
--hub-escrow-line: #67e8f9;
--admin: #4338ca;
--admin-wash: #e0e7ff;
--admin-line: #a5b4fc;
--good-wash: #dcfce7;
--good-line: #86efac;
--warn-wash: #fef3c7;
--warn-line: #fcd34d;
--bad-wash: #fee2e2;
--bad-line: #fca5a5;
--teal-wash: #ccfbf1;
--teal-line: #5eead4;
--accent-indigo: #4338ca;
--qi-nav-active-bg: rgba(67,56,202,0.20);
--qi-nav-hover-bg: rgba(67,56,202,0.10);
--qi-badge-indigo-bg: rgba(67,56,202,0.20);
--qi-badge-green-bg: rgba(21,128,61,0.20);
--teal: hsl(190 52% 44%);
--teal-tint: #dff3f6;
--page-wash: rgba(15,118,110,0.10);
--select-wash: rgba(15,118,110,0.14);
--glass-bg: rgba(243,248,253,0.84);
--glass-bg-strong: rgba(255,255,255,0.94);
--glass-border: rgba(51,65,85,0.24);
--glass-chrome-tint: rgba(241,246,252,0.82);
--glass-chrome-blur: 18px;
--glass-chrome-edge: rgba(51,65,85,0.20);
--glass-float-tint: rgba(255,255,255,0.88);
--glass-panel-tint: rgba(243,248,253,0.84);
--glass-panel-blur: 20px;
--glass-panel-edge: rgba(51,65,85,0.20);
--glass-float-edge: rgba(51,65,85,0.22);
--glass-nav-tint: rgba(241,246,252,0.84);
--glass-nav-blur: 18px;
--glass-nav-edge: rgba(51,65,85,0.20);
--qi-bar-tint: rgba(241,246,252,0.88);
--glass-control-edge: rgba(51,65,85,0.22);
}
/* ============================================================================
DARK — values mirror .dark in packages/web-app/src/index.css.
Declared twice: once for "OS is dark and the user hasn't forced light",
once for "the user explicitly chose dark".
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 220 40% 7.5%;
--card-foreground: 210 40% 98%;
--popover: 220 40% 9%;
--popover-foreground: 210 40% 98%;
--primary: 180 72% 52%;
--primary-foreground: 180 50% 8%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 62%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 28% 20%;
--input: 217.2 28% 20%;
--ring: 180 72% 52%;
--surface: hsl(222.2 84% 6.5%);
--surface-2: hsl(217.2 32.6% 12%);
--page-bg: hsl(222.2 84% 4.9%);
--ink: #f1f5f9;
--ink-2: #cbd5e1;
--ink-3: #94a3b8;
--line: hsl(217.2 28% 20%);
--line-2: hsl(217.2 28% 24%);
--ink-4: #64748b;
--surface-sunk: hsl(222.2 84% 3.5%);
--app-shadow-sm: 0 1px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
--app-shadow: 0 4px 12px rgba(0,0,0,0.20), 0 12px 28px rgba(0,0,0,0.24);
--app-shadow-lg: 0 8px 24px rgba(0,0,0,0.28), 0 24px 48px rgba(0,0,0,0.32);
--qi-nav-active-bg: rgba(79,70,229,0.18);
--qi-nav-hover-bg: rgba(79,70,229,0.10);
--qi-badge-indigo-bg: rgba(79,70,229,0.22);
--qi-badge-green-bg: rgba(22,163,74,0.22);
--qi-badge-green-text: #4ade80;
--kyc-success-text: #4ade80;
--kyc-success-bg: rgba(22,163,74,0.16);
--kyc-success-line: rgba(74,222,128,0.35);
--kyc-warn-text: #fcd34d;
--kyc-warn-bg: rgba(217,119,6,0.18);
--kyc-warn-line: rgba(252,211,77,0.35);
--phase-sale-solid: #16a34a;
--phase-sale-band: #4ade80;
--phase-sale-on-solid: #ffffff;
--phase-sale-ink: #4ade80;
--phase-sale-wash: rgba(22,163,74,0.20);
--phase-sale-line: rgba(74,222,128,0.35);
--phase-identification-solid: #2563eb;
--phase-identification-band: #60a5fa;
--phase-identification-on-solid: #ffffff;
--phase-identification-ink: #60a5fa;
--phase-identification-wash: rgba(37,99,235,0.20);
--phase-identification-line: rgba(96,165,250,0.38);
--phase-purchase-solid: #9333ea;
--phase-purchase-band: #c084fc;
--phase-purchase-on-solid: #ffffff;
--phase-purchase-ink: #c084fc;
--phase-purchase-wash: rgba(147,51,234,0.22);
--phase-purchase-line: rgba(192,132,252,0.35);
--phase-close-solid: #0f766e;
--phase-close-band: #5eead4;
--phase-close-on-solid: #ffffff;
--phase-close-ink: #2dd4bf;
--phase-close-wash: rgba(15,118,110,0.26);
--phase-close-line: rgba(94,234,212,0.32);
--phase-parking-solid: #15803d;
--phase-parking-on-solid: #ffffff;
--phase-parking-ink: #86efac;
--phase-parking-wash: rgba(22,163,74,0.20);
--phase-parking-line: rgba(74,222,128,0.35);
--phase-construction-solid: #0e7490;
--phase-construction-on-solid: #ffffff;
--phase-construction-ink: #67e8f9;
--phase-construction-wash: rgba(8,145,178,0.22);
--phase-construction-line: rgba(34,211,238,0.35);
--hub-escrow: #22d3ee;
--admin: #818cf8;
--admin-ink: #c7d2fe;
--admin-wash: rgba(99,102,241,0.16);
--admin-line: rgba(129,140,248,0.38);
--admin-on: #14103a;
--good: #4ade80;
--good-ink: #86efac;
--good-wash: rgba(22,163,74,0.16);
--good-line: rgba(74,222,128,0.35);
--good-on: #05230f;
--warn: #fbbf24;
--warn-ink: #fcd34d;
--warn-wash: rgba(217,119,6,0.18);
--warn-line: rgba(252,211,77,0.35);
--bad: #f87171;
--bad-ink: #fca5a5;
--bad-wash: rgba(220,38,38,0.16);
--bad-line: rgba(248,113,113,0.35);
--teal-ink: #5eead4;
--teal-wash: rgba(20,184,166,0.14);
--teal-line: rgba(94,234,212,0.32);
}
}
:root[data-theme="dark"] {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 220 40% 7.5%;
--card-foreground: 210 40% 98%;
--popover: 220 40% 9%;
--popover-foreground: 210 40% 98%;
--primary: 180 72% 52%;
--primary-foreground: 180 50% 8%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 62%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 28% 20%;
--input: 217.2 28% 20%;
--ring: 180 72% 52%;
--surface: hsl(222.2 84% 6.5%);
--surface-2: hsl(217.2 32.6% 12%);
--page-bg: hsl(222.2 84% 4.9%);
--ink: #f1f5f9;
--ink-2: #cbd5e1;
--ink-3: #94a3b8;
--line: hsl(217.2 28% 20%);
--line-2: hsl(217.2 28% 24%);
--ink-4: #64748b;
--surface-sunk: hsl(222.2 84% 3.5%);
--app-shadow-sm: 0 1px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
--app-shadow: 0 4px 12px rgba(0,0,0,0.20), 0 12px 28px rgba(0,0,0,0.24);
--app-shadow-lg: 0 8px 24px rgba(0,0,0,0.28), 0 24px 48px rgba(0,0,0,0.32);
--qi-nav-active-bg: rgba(79,70,229,0.18);
--qi-nav-hover-bg: rgba(79,70,229,0.10);
--qi-badge-indigo-bg: rgba(79,70,229,0.22);
--qi-badge-green-bg: rgba(22,163,74,0.22);
--qi-badge-green-text: #4ade80;
--kyc-success-text: #4ade80;
--kyc-success-bg: rgba(22,163,74,0.16);
--kyc-success-line: rgba(74,222,128,0.35);
--kyc-warn-text: #fcd34d;
--kyc-warn-bg: rgba(217,119,6,0.18);
--kyc-warn-line: rgba(252,211,77,0.35);
--phase-sale-solid: #16a34a;
--phase-sale-band: #4ade80;
--phase-sale-on-solid: #ffffff;
--phase-sale-ink: #4ade80;
--phase-sale-wash: rgba(22,163,74,0.20);
--phase-sale-line: rgba(74,222,128,0.35);
--phase-identification-solid: #2563eb;
--phase-identification-band: #60a5fa;
--phase-identification-on-solid: #ffffff;
--phase-identification-ink: #60a5fa;
--phase-identification-wash: rgba(37,99,235,0.20);
--phase-identification-line: rgba(96,165,250,0.38);
--phase-purchase-solid: #9333ea;
--phase-purchase-band: #c084fc;
--phase-purchase-on-solid: #ffffff;
--phase-purchase-ink: #c084fc;
--phase-purchase-wash: rgba(147,51,234,0.22);
--phase-purchase-line: rgba(192,132,252,0.35);
--phase-close-solid: #0f766e;
--phase-close-band: #5eead4;
--phase-close-on-solid: #ffffff;
--phase-close-ink: #2dd4bf;
--phase-close-wash: rgba(15,118,110,0.26);
--phase-close-line: rgba(94,234,212,0.32);
--phase-parking-solid: #15803d;
--phase-parking-on-solid: #ffffff;
--phase-parking-ink: #86efac;
--phase-parking-wash: rgba(22,163,74,0.20);
--phase-parking-line: rgba(74,222,128,0.35);
--phase-construction-solid: #0e7490;
--phase-construction-on-solid: #ffffff;
--phase-construction-ink: #67e8f9;
--phase-construction-wash: rgba(8,145,178,0.22);
--phase-construction-line: rgba(34,211,238,0.35);
--hub-escrow: #22d3ee;
--admin: #818cf8;
--admin-ink: #c7d2fe;
--admin-wash: rgba(99,102,241,0.16);
--admin-line: rgba(129,140,248,0.38);
--admin-on: #14103a;
--good: #4ade80;
--good-ink: #86efac;
--good-wash: rgba(22,163,74,0.16);
--good-line: rgba(74,222,128,0.35);
--good-on: #05230f;
--warn: #fbbf24;
--warn-ink: #fcd34d;
--warn-wash: rgba(217,119,6,0.18);
--warn-line: rgba(252,211,77,0.35);
--bad: #f87171;
--bad-ink: #fca5a5;
--bad-wash: rgba(220,38,38,0.16);
--bad-line: rgba(248,113,113,0.35);
--teal-ink: #5eead4;
--teal-wash: rgba(20,184,166,0.14);
--teal-line: rgba(94,234,212,0.32);
}
/* ── Shared mockup chrome ─────────────────────────────────────────────────── */
html { color-scheme: light dark; }
:focus-visible {
outline: 2px solid var(--admin);
outline-offset: 2px;
border-radius: 4px;
}
/* Theme switcher — drop this markup into any mockup header:
...and include theme-toggle.js. */
.theme-switch {
display: inline-flex;
border: 1px solid var(--line-2);
border-radius: var(--radius-md);
background: var(--surface);
overflow: hidden;
}
.theme-switch button {
font: inherit;
padding: 5px 11px;
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
background: transparent;
border: none;
border-right: 1px solid var(--line-2);
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
transition: background var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.theme-switch button:last-child { border-right: none; }
.theme-switch button:hover { background: var(--surface-2); color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--admin); color: var(--admin-on); }
.theme-switch svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
}
}
/* ══ [PROPOSED] --bad-on — appended ═══════════════════════════════════════════
The status triad above defines `-on` (the foreground ON a filled surface) for
good and admin, but not for bad. A filled destructive button — "block and
escalate" on an SDN true match — needs one: --bad-ink is dark in light theme
and light in dark theme, so a hardcoded white label fails AA in dark.
Declared in all three theme states, same pattern as the triad. */
:root { --bad-on: #ffffff; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bad-on: #2b0505; }
}
:root[data-theme="dark"] { --bad-on: #2b0505; }
/* ============================================================================
[PROPOSED] enterprise-tier accent — appended for surfaces/qi-hub-tier.html
WHY A NEW ROLE, not a reuse of --admin: the console set now has three
distinct scopes that can be on screen at the same moment (an enterprise
roll-up that drills into a QI-office console), and the user must be able to
tell which boundary they are inside at a glance. `--admin` (indigo) is spoken
for by the QI-office console chrome; `--primary` (teal) is the consumer app;
the hub colors are exchange-stage wayfinding and must never be borrowed for
chrome. `--tier` is violet: adjacent to admin-indigo, clearly not it, and it
appears ONLY in enterprise-tier chrome — never inside an office console.
`--tier-on` is the foreground ON a filled tier surface; it flips in dark,
where the fill lightens.
========================================================================== */
:root {
--tier: #6d28d9;
--tier-ink: #5b21b6;
--tier-wash: #f5f3ff;
--tier-line: #ddd6fe;
--tier-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--tier: #a78bfa;
--tier-ink: #c4b5fd;
--tier-wash: rgba(139,92,246,0.16);
--tier-line: rgba(167,139,250,0.38);
--tier-on: #1b1038;
}
}
:root[data-theme="dark"] {
--tier: #a78bfa;
--tier-ink: #c4b5fd;
--tier-wash: rgba(139,92,246,0.16);
--tier-line: rgba(167,139,250,0.38);
--tier-on: #1b1038;
}
/* ============================================================================
[PROPOSED] SUPPORT-SESSION ("view as tenant") MODE — platform tier 0
A dedicated hue for "an Open1031 platform operator is acting inside a tenant
account". Deliberately OUTSIDE the good/warn/bad triad: a support session is
neither an error nor a deadline warning, and borrowing --bad would dilute the
one meaning red must keep on this product (overdue / compliance failure).
It is also distinct from --admin (QI office console) and --tier (enterprise
tier) so a view-as band can never be mistaken for ordinary console chrome.
Reserved for view-as chrome ONLY — the session banner, session rows, and mode
chips on surfaces/platform-admin.html. Never a status, never a nav accent.
`--impersonate-on` is the foreground ON the filled band; it flips in dark,
where the fill lightens.
========================================================================== */
:root {
--impersonate: #a21caf;
--impersonate-ink: #86198f;
--impersonate-wash: #fdf4ff;
--impersonate-line: #f5d0fe;
--impersonate-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--impersonate: #e879f9;
--impersonate-ink: #f0abfc;
--impersonate-wash: rgba(192,38,211,0.18);
--impersonate-line: rgba(232,121,249,0.38);
--impersonate-on: #2b0733;
}
}
:root[data-theme="dark"] {
--impersonate: #e879f9;
--impersonate-ink: #f0abfc;
--impersonate-wash: rgba(192,38,211,0.18);
--impersonate-line: rgba(232,121,249,0.38);
--impersonate-on: #2b0733;
}
/* ============================================================================
[PROPOSED] QI CONSOLE NAV RAIL — appended for the QI console shell
(surfaces/qi-crm-sync-settings.html, qi-report-builder.html,
qi-dashboard-builder.html, and comparison/redesign/qi-ops.html)
WHY A SEPARATE SCOPE, not --surface/--ink: the QI console ships a persistent
dark-navy nav rail that is BRAND CHROME, not a themed surface. It is dark in
the light theme by design, so its foregrounds cannot be drawn from the --ink
ramp (which inverts). Everything painted ON the rail needs its own ramp that
is measured against the rail fill, never against --surface.
CONSTANT ACROSS THEMES BY DESIGN. The values are identical in :root, in the
prefers-color-scheme:dark block, and in [data-theme="dark"] — declared three
times on purpose so a later reader sees the constancy is intentional and not
a forgotten dark override. In dark the rail sits slightly above --page-bg,
which keeps it legible as its own layer.
CONTRAST, measured against --console-rail (#0c1526):
--console-rail-ink 14.8:1 rail titles (user name)
--console-rail-ink-2 12.2:1 rail item hover
--console-rail-ink-3 7.1:1 rail item rest
--console-rail-ink-4 4.7:1 rail section labels and meta — the quietest
step that still clears WCAG AA body text.
The pre-token markup used #334155 (1.8:1)
and #64748b (3.7:1) here; both failed.
========================================================================== */
:root {
--console-rail: #0c1526;
--console-rail-edge: rgba(255,255,255,0.06);
--console-rail-edge-soft: rgba(255,255,255,0.04);
--console-rail-hover: rgba(255,255,255,0.05);
--console-rail-ink: #e2e8f0;
--console-rail-ink-2: #cbd5e1;
--console-rail-ink-3: #94a3b8;
--console-rail-ink-4: #74839a;
--console-rail-accent: #a5b4fc;
--console-rail-accent-bg: rgba(79,70,229,0.18);
--console-rail-accent-bar: #6366f1;
--console-rail-badge-bg: rgba(79,70,229,0.25);
--console-rail-badge-line: rgba(79,70,229,0.40);
--console-rail-indigo-bg: rgba(99,102,241,0.20);
--console-rail-bad: #f87171;
--console-rail-bad-bg: rgba(239,68,68,0.20);
--console-rail-teal: #69adba;
--console-rail-teal-bg: rgba(105,173,186,0.20);
--console-rail-avatar-from: #4f46e5;
--console-rail-avatar-to: #5a55ea;
--console-rail-avatar-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--console-rail: #0c1526;
--console-rail-edge: rgba(255,255,255,0.06);
--console-rail-edge-soft: rgba(255,255,255,0.04);
--console-rail-hover: rgba(255,255,255,0.05);
--console-rail-ink: #e2e8f0;
--console-rail-ink-2: #cbd5e1;
--console-rail-ink-3: #94a3b8;
--console-rail-ink-4: #74839a;
--console-rail-accent: #a5b4fc;
--console-rail-accent-bg: rgba(79,70,229,0.18);
--console-rail-accent-bar: #6366f1;
--console-rail-badge-bg: rgba(79,70,229,0.25);
--console-rail-badge-line: rgba(79,70,229,0.40);
--console-rail-indigo-bg: rgba(99,102,241,0.20);
--console-rail-bad: #f87171;
--console-rail-bad-bg: rgba(239,68,68,0.20);
--console-rail-teal: #69adba;
--console-rail-teal-bg: rgba(105,173,186,0.20);
--console-rail-avatar-from: #4f46e5;
--console-rail-avatar-to: #5a55ea;
--console-rail-avatar-on: #ffffff;
}
}
:root[data-theme="dark"] {
--console-rail: #0c1526;
--console-rail-edge: rgba(255,255,255,0.06);
--console-rail-edge-soft: rgba(255,255,255,0.04);
--console-rail-hover: rgba(255,255,255,0.05);
--console-rail-ink: #e2e8f0;
--console-rail-ink-2: #cbd5e1;
--console-rail-ink-3: #94a3b8;
--console-rail-ink-4: #74839a;
--console-rail-accent: #a5b4fc;
--console-rail-accent-bg: rgba(79,70,229,0.18);
--console-rail-accent-bar: #6366f1;
--console-rail-badge-bg: rgba(79,70,229,0.25);
--console-rail-badge-line: rgba(79,70,229,0.40);
--console-rail-indigo-bg: rgba(99,102,241,0.20);
--console-rail-bad: #f87171;
--console-rail-bad-bg: rgba(239,68,68,0.20);
--console-rail-teal: #69adba;
--console-rail-teal-bg: rgba(105,173,186,0.20);
--console-rail-avatar-from: #4f46e5;
--console-rail-avatar-to: #5a55ea;
--console-rail-avatar-on: #ffffff;
}
/* ============================================================================
[PROPOSED] COMPLETE HUB WAYFINDING SET — appended for the consumer-facing
surfaces (surfaces/consumer.html, surfaces/kyc-flow.html,
surfaces/participants.html)
WHY: the block above ships four hub hues (id / sales / escrow / purchase),
but an exchange has seven legs and the consumer surfaces render all of
them — the journey stepper, the touchpoint map and the party roster all
name Disbursement, IRS filing (Form 8824) and Reverse. Without tokens for
those three, the surfaces fall back to raw hex and lose dark theme.
WHY EACH ROLE, not one scalar per hub: the four shipped hues are used as
marks only (dots, rules, icon glyphs). The consumer surfaces additionally
put *text* in a hub hue on a hub-tinted chip (party avatars, role pills,
accent cards), which needs an ink that clears 4.5:1 in BOTH themes —
#16a34a is only 3.0:1 on white, so the mark hue cannot double as the ink.
--hub-X mark: dot, rule, icon glyph, filled-button background
--hub-X-ink text in the hub hue, on --surface or on --hub-X-wash
--hub-X-wash tinted chip / accent-card background
--hub-X-line border for that chip / accent card
--hub-on foreground ON a filled hub button. White is right on the
light fills but 2.4:1 on the dark-theme --hub-id, so it
flips dark — same contract as --admin-on / --good-on.
Hub color is wayfinding, never status: it says WHICH leg of the exchange,
never whether that leg is healthy. Status stays on good/warn/bad.
========================================================================== */
:root {
--hub-disbursement: #ea580c;
--hub-irs: var(--phase-close-solid);
--hub-reverse: #4338ca;
--hub-id-ink: var(--phase-identification-ink);
--hub-sales-ink: var(--phase-sale-ink);
--hub-escrow-ink: #0e7490;
--hub-purchase-ink: var(--phase-purchase-ink);
--hub-disbursement-ink: #c2410c;
--hub-irs-ink: var(--phase-close-ink);
--hub-reverse-ink: #3730a3;
--hub-id-wash: var(--phase-identification-wash);
--hub-sales-wash: var(--phase-sale-wash);
--hub-escrow-wash: #ecfeff;
--hub-purchase-wash: var(--phase-purchase-wash);
--hub-disbursement-wash: #fff7ed;
--hub-irs-wash: var(--phase-close-wash);
--hub-reverse-wash: #eef2ff;
--hub-id-line: var(--phase-identification-line);
--hub-sales-line: var(--phase-sale-line);
--hub-escrow-line: #a5f3fc;
--hub-purchase-line: var(--phase-purchase-line);
--hub-disbursement-line: #fed7aa;
--hub-irs-line: var(--phase-close-line);
--hub-reverse-line: #c7d2fe;
--hub-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--hub-disbursement: #fb923c;
--hub-reverse: #a5b4fc;
--hub-id-ink: var(--phase-identification-ink);
--hub-sales-ink: var(--phase-sale-ink);
--hub-escrow-ink: #67e8f9;
--hub-purchase-ink: var(--phase-purchase-ink);
--hub-disbursement-ink: #fdba74;
--hub-irs-ink: var(--phase-close-ink);
--hub-reverse-ink: #c7d2fe;
--hub-id-wash: var(--phase-identification-wash);
--hub-sales-wash: var(--phase-sale-wash);
--hub-escrow-wash: rgba(8,145,178,0.22);
--hub-purchase-wash: var(--phase-purchase-wash);
--hub-disbursement-wash: rgba(234,88,12,0.22);
--hub-irs-wash: var(--phase-close-wash);
--hub-reverse-wash: rgba(99,102,241,0.20);
--hub-id-line: var(--phase-identification-line);
--hub-sales-line: var(--phase-sale-line);
--hub-escrow-line: rgba(34,211,238,0.35);
--hub-purchase-line: var(--phase-purchase-line);
--hub-disbursement-line: rgba(251,146,60,0.35);
--hub-irs-line: var(--phase-close-line);
--hub-reverse-line: rgba(165,180,252,0.35);
--hub-on: #050d19;
}
}
:root[data-theme="dark"] {
--hub-disbursement: #fb923c;
--hub-reverse: #a5b4fc;
--hub-id-ink: var(--phase-identification-ink);
--hub-sales-ink: var(--phase-sale-ink);
--hub-escrow-ink: #67e8f9;
--hub-purchase-ink: var(--phase-purchase-ink);
--hub-disbursement-ink: #fdba74;
--hub-irs-ink: var(--phase-close-ink);
--hub-reverse-ink: #c7d2fe;
--hub-id-wash: var(--phase-identification-wash);
--hub-sales-wash: var(--phase-sale-wash);
--hub-escrow-wash: rgba(8,145,178,0.22);
--hub-purchase-wash: var(--phase-purchase-wash);
--hub-disbursement-wash: rgba(234,88,12,0.22);
--hub-irs-wash: var(--phase-close-wash);
--hub-reverse-wash: rgba(99,102,241,0.20);
--hub-id-line: var(--phase-identification-line);
--hub-sales-line: var(--phase-sale-line);
--hub-escrow-line: rgba(34,211,238,0.35);
--hub-purchase-line: var(--phase-purchase-line);
--hub-disbursement-line: rgba(251,146,60,0.35);
--hub-irs-line: var(--phase-close-line);
--hub-reverse-line: rgba(165,180,252,0.35);
--hub-on: #050d19;
}
/* ── [PROPOSED] Neela identity — the AI guide is a named character, not a
status. She reads as the product's own voice, so her mark and her briefing
card sit on the teal/admin boundary rather than on any hub or status hue.
Used by the consumer surfaces' .neela-tip / .neela-avatar. ── */
:root {
--neela-wash: #f5f7ff;
--neela-line: #d7dcfb;
--neela-ink: #3730a3;
--neela-mark: #4f46e5;
--neela-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--neela-wash: rgba(99,102,241,0.13);
--neela-line: rgba(129,140,248,0.34);
--neela-ink: #c7d2fe;
--neela-mark: #818cf8;
--neela-on: #14103a;
}
}
:root[data-theme="dark"] {
--neela-wash: rgba(99,102,241,0.13);
--neela-line: rgba(129,140,248,0.34);
--neela-ink: #c7d2fe;
--neela-mark: #818cf8;
--neela-on: #14103a;
}
/* ── [APP] NeelaMark — the faithful mark, now real CSS custom properties in
packages/web-app/src/index.css. --neela-eye/--neela-moon-a/--neela-moon-b/
--neela-orbit are theme-invariant in components/ui/NeelaMark.tsx, so
index.css declares them once in :root and lets .dark inherit by cascade;
only --neela-disc-a/b/c/-ring get a distinct .dark override there, same as
here.
Neela is ALWAYS rendered as this mark on its avatar disc — mint radial in
light, sapphire in dark, NEVER on teal, never a letter glyph, never a
generic sparkle puck. Same values the mobile set ships in _mobile.css. ── */
:root {
--neela-spark-1: #14b8a6;
--neela-spark-2: #0f766e;
--neela-spark-3: #4f46a5;
--neela-glow: #8298d7;
--neela-eye: #08312f;
--neela-moon-a: #fbbf24;
--neela-moon-b: #5eead4;
--neela-orbit: rgba(51,65,85,0.53);
--neela-disc-a: #ffffff;
--neela-disc-b: #f7fffb;
--neela-disc-c: #e6f8ef;
--neela-disc-ring: rgba(15,122,102,0.18);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--neela-spark-1: #7ff0e0;
--neela-spark-2: #2dd4bf;
--neela-spark-3: #6366f1;
--neela-glow: #2dd4bf;
--neela-orbit: rgba(51,65,85,0.53);
--neela-disc-a: #15294a;
--neela-disc-b: #102040;
--neela-disc-c: #0b1424;
--neela-disc-ring: rgba(255,255,255,0.12);
}
}
:root[data-theme="dark"] {
--neela-spark-1: #7ff0e0;
--neela-spark-2: #2dd4bf;
--neela-spark-3: #6366f1;
--neela-glow: #2dd4bf;
--neela-orbit: rgba(51,65,85,0.53);
--neela-disc-a: #15294a;
--neela-disc-b: #102040;
--neela-disc-c: #0b1424;
--neela-disc-ring: rgba(255,255,255,0.12);
}
/* ============================================================================
[APP] --scrim — appended for the modal backdrops on (landed in index.css with #3669)
surfaces/disbursement-approval.html.
WHY ITS OWN TOKEN: a dialog backdrop has to darken the page in BOTH themes.
Keying it off --ink inverts in dark (--ink is near-white there) and washes the
page out instead of dimming it, and keying it off --page-bg gives a scrim with
no contrast against the page it is covering.
NOTE ON HUB ROLES: the disbursement and reverse hues this surface set needs are
already carried by the COMPLETE HUB WAYFINDING SET above
(--hub-disbursement / --hub-reverse, each with -ink / -wash / -line, plus the
shared --hub-on foreground). Nothing is redeclared here.
========================================================================== */
:root { --scrim: rgba(15,23,42,0.55); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --scrim: rgba(2,6,23,0.72); }
}
:root[data-theme="dark"] { --scrim: rgba(2,6,23,0.72); }
/* ============================================================================
[PROPOSED] AUDIENCE BANDS — appended for surfaces/hybrid-bidirectional-exchange.html
WHY A NEW ROLE, not --admin / --primary: that surface puts the QI column and
the exchanger column side by side under two deep, filled header bands. A band
is a saturated dark fill carrying light text — the inverse of every other
token pair in this sheet, all of which are light fills carrying dark text in
the light theme. Keying the bands off --admin / --primary would invert them
in dark (a light band with light text) and destroy the column identity that
the whole surface depends on.
CONSTANT ACROSS THEMES, for the same reason --console-rail is: a band is
chrome that states "you are reading the QI side" / "you are reading the
customer side". It is dark in both themes, sits above --page-bg in dark, and
its ink is measured against the band fill, never against --surface.
Contrast, measured against the band fill:
--band-admin-ink on --band-admin 9.9:1
--band-consumer-ink on --band-consumer 11.6:1
========================================================================== */
:root {
--band-admin: #1e1b4b;
--band-admin-ink: #c7d2fe;
--band-consumer: #042f2e;
--band-consumer-ink: #99f6e4;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--band-admin: #1e1b4b;
--band-admin-ink: #c7d2fe;
--band-consumer: #042f2e;
--band-consumer-ink: #99f6e4;
}
}
:root[data-theme="dark"] {
--band-admin: #1e1b4b;
--band-admin-ink: #c7d2fe;
--band-consumer: #042f2e;
--band-consumer-ink: #99f6e4;
}
/* ============================================================================
[PROPOSED] CHART SERIES RAMP + TIER SECOND STEP — appended for
surfaces/qi-hub-dashboard-builder.html
--series-muted — the SECONDARY series in a two-series chart (the grey
"Closed" bars beside the violet "Opened" bars, the grey "Disbursements
released" bars beside "Incoming wires confirmed"). Deliberately NOT --line-2
(a border role: at hsl(217.2 28% 24%) in dark it is 1.2:1 against the card
and the comparison bars disappear) and NOT --ink-4 (an icon role, which in
light would darken a deliberately quiet series into competing with the
primary one). A data mark has to stay readable against the card in both
themes while never out-shouting the series it is compared against, and that
is a third role. Light keeps the shipped #cbd5e1 exactly; dark lifts to
#64748b, which is 4.1:1 on the dark card.
--tier-2 — the MIDDLE step of the tier ramp, needed wherever three violet
steps have to stay apart at a glance: the intake-source split bar
(CRM API / direct / referral) and the "in review" pipeline stage. The ramp
is --tier → --tier-2 → --tier-line. Fills only; --tier-2 never carries text,
because no single foreground clears 4.5:1 on it in both themes.
========================================================================== */
:root {
--series-muted: #cbd5e1;
--tier-2: #a78bfa;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--series-muted: #64748b;
--tier-2: #8b5cf6;
}
}
:root[data-theme="dark"] {
--series-muted: #64748b;
--tier-2: #8b5cf6;
}
/* ============================================================================
[PROPOSED] TIER ACCENT ON THE CONSOLE RAIL — appended for
surfaces/qi-hub-dashboard-builder.html
The --console-rail-* family above is the QI-office console rail and its
accent is indigo. The QI Hub tier runs the same dark-navy rail with the
violet tier accent, and it cannot reach for --tier / --tier-ink to get it:
those flip with the theme, and the rail does not. --tier-ink is #5b21b6 in
light, which is 1.4:1 on #0c1526 — unreadable on the very surface it would
be painted on.
CONSTANT ACROSS THEMES, like the rest of the rail family; declared three
times on purpose. Contrast measured against --console-rail (#0c1526):
--console-rail-tier 9.9:1 active nav item, tier badge label
--console-rail-tier 8.4:1 measured over --console-rail-tier-bg
--console-rail-tier-mark 4.3:1 rail-note glyph (icon bar is 3:1)
--console-rail-avatar-on 7.1:1 initials on --console-rail-tier-fill
========================================================================== */
:root {
--console-rail-tier: #c4b5fd;
--console-rail-tier-bg: rgba(124,58,237,0.20);
--console-rail-tier-badge-bg: rgba(124,58,237,0.25);
--console-rail-tier-line: rgba(124,58,237,0.45);
--console-rail-tier-mark: #8b5cf6;
--console-rail-tier-fill: #6d28d9;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--console-rail-tier: #c4b5fd;
--console-rail-tier-bg: rgba(124,58,237,0.20);
--console-rail-tier-badge-bg: rgba(124,58,237,0.25);
--console-rail-tier-line: rgba(124,58,237,0.45);
--console-rail-tier-mark: #8b5cf6;
--console-rail-tier-fill: #6d28d9;
}
}
:root[data-theme="dark"] {
--console-rail-tier: #c4b5fd;
--console-rail-tier-bg: rgba(124,58,237,0.20);
--console-rail-tier-badge-bg: rgba(124,58,237,0.25);
--console-rail-tier-line: rgba(124,58,237,0.45);
--console-rail-tier-mark: #8b5cf6;
--console-rail-tier-fill: #6d28d9;
}
/* ============================================================================
[PROPOSED] EXCHANGE-WORKSPACE ROLES — appended for
surfaces/qi-exchange-workspace.html
Four roles that the sets above genuinely do not cover. Each is declared in
all three theme states, and each says why it is not a reuse.
========================================================================== */
:root {
/* 1 · --console-rail-warn — the rail already has --console-rail-bad for the
"3 pending disbursements" dot; the deadlines-at-risk dot is amber and had
no rail-scoped equivalent. Status hues from the content scale are measured
against --surface, not against the always-dark rail, so the rail needs its
own amber exactly as it needed its own red. */
--console-rail-warn: #fbbf24;
/* 2 · The "Ask Neela" action button is the TEAL consumer-brand affordance in
the console top bar. --neela-mark / --neela-wash above are the indigo
briefing-card identity used on the consumer surfaces; they are a different
component, so reusing them here would repaint this button indigo. `-on` is
the foreground ON the filled gradient. */
--neela-action: #0f766e;
--neela-action-2: #0d9488;
--neela-action-on: #ffffff;
--neela-action-glow: rgba(15,118,110,0.35);
/* 3 · Person-identity gradients. A person is neither a status nor a hub, so
avatars must not borrow either scale — a green avatar would read as
"healthy" and a blue one as "identification leg". Four stable hues, held
constant across themes because an avatar is an identity, not a surface.
--ident-on is the initials colour; the initials are decorative (the
person's name is always rendered adjacent and is the accessible name), so
they are aria-hidden in the markup. */
--ident-on: #ffffff;
--ident-teal-a: #0891b2;
--ident-teal-b: #0e7490;
--ident-violet-a: #7c3aed;
--ident-violet-b: #6d28d9;
--ident-blue-a: #2563eb;
--ident-blue-b: #1d4ed8;
--ident-slate-a: #64748b;
--ident-slate-b: #475569;
/* 4 · Communication-channel identification is its own axis (portal / email /
SMS / call / internal). Portal maps to teal, email to --admin, call to
--warn and internal to the neutral ramp; only SMS has no home. It cannot
take --impersonate (reserved for view-as chrome) or --tier (reserved for
the enterprise tier), so it gets one scoped pair. */
--channel-sms-wash: #fae8ff;
--channel-sms-ink: #86198f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--console-rail-warn: #fbbf24;
--neela-action: #0f766e;
--neela-action-2: #0d9488;
--neela-action-on: #ffffff;
--neela-action-glow: rgba(0,0,0,0.45);
--ident-on: #ffffff;
--ident-teal-a: #0891b2;
--ident-teal-b: #0e7490;
--ident-violet-a: #7c3aed;
--ident-violet-b: #6d28d9;
--ident-blue-a: #2563eb;
--ident-blue-b: #1d4ed8;
--ident-slate-a: #64748b;
--ident-slate-b: #475569;
--channel-sms-wash: rgba(192,38,211,0.20);
--channel-sms-ink: #f0abfc;
}
}
:root[data-theme="dark"] {
--console-rail-warn: #fbbf24;
--neela-action: #0f766e;
--neela-action-2: #0d9488;
--neela-action-on: #ffffff;
--neela-action-glow: rgba(0,0,0,0.45);
--ident-on: #ffffff;
--ident-teal-a: #0891b2;
--ident-teal-b: #0e7490;
--ident-violet-a: #7c3aed;
--ident-violet-b: #6d28d9;
--ident-blue-a: #2563eb;
--ident-blue-b: #1d4ed8;
--ident-slate-a: #64748b;
--ident-slate-b: #475569;
--channel-sms-wash: rgba(192,38,211,0.20);
--channel-sms-ink: #f0abfc;
}
/* ============================================================================
[APP] DAILY FLOW V5 — appended for surfaces/daily-v5-fable/ (#3669) and
shipped in packages/web-app/src/index.css :root / .dark in the same slice.
Chrome rule: the app rail is docked and solid. The queue top bar and the file
bar are docked, sticky, light glass (a high tint over a soft blur) so the
clocks and the money sentence read at full contrast while the page keeps its
depth. Only transient layers float on the deeper float glass: the command
palette and the queue peek. Under reduced transparency, a missing
backdrop-filter, forced colors or increased contrast, every glass falls back
to --surface with a --line-2 edge (see the v5.css fallbacks).
--action / --action-hover / --action-on: light keeps --primary so white label
flows through; dark steps down from the bright cyan so a primary never
outshouts a money hold.
--select-wash / --select-bar: the cursor row. A quieter teal than --teal-wash
so forty rows can carry it without reading as status, plus a 3 px bar that
survives dark mode.
--page-wash: a faint brand presence at the top of the page under the chrome.
--type-*: a fixed scale from 11 to 34 with tighter tracking above 17 px.
--density-*: comfortable values; the compact set is applied by
[data-density="compact"] in the component sheet and never changes what is
shown, only spacing.
========================================================================== */
:root {
--scrim-blur: 3px;
--action: hsl(var(--primary));
--action-hover: #115e59;
--action-on: hsl(var(--primary-foreground));
--glass-chrome-tint: rgba(255,255,255,0.84);
--glass-chrome-blur: 18px;
--glass-chrome-edge: rgba(15,23,42,0.08);
--glass-float-tint: rgba(255,255,255,0.86);
--glass-float-blur: 28px;
--glass-float-edge: rgba(15,23,42,0.10);
--glass-float-highlight: inset 0 1px 0 rgba(255,255,255,0.9);
--glass-float-shadow: 0 2px 6px rgba(15,23,42,0.06), 0 24px 60px rgba(15,23,42,0.18);
--page-wash: rgba(15,118,110,0.05);
--select-wash: rgba(15,118,110,0.07);
--select-bar: hsl(var(--primary));
--duration-settle: 900ms;
--radius-card: 12px;
--radius-tile: 14px;
--radius-float: 14px;
--radius-row: 9px;
--radius-dialog: 16px;
--rail-w: 72px;
--type-11: 11px;
--type-12: 12px;
--type-12-5: 12.5px;
--type-13: 13px;
--type-13-5: 13.5px;
--type-14: 14px;
--type-15: 15px;
--type-16: 16px;
--type-17: 17px;
--type-20: 20px;
--type-24: 24px;
--type-34: 34px;
--tracking-tight: -0.014em;
--tracking-tighter: -0.022em;
--tracking-tightest: -0.035em;
--density-pad: 16px;
--density-row-y: 11px;
--density-row-min: 60px;
--density-fs: 14px;
--density-fs-sm: 13px;
--density-fs-xs: 12px;
--density-btn-h: 32px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--action: #14b8a6;
--action-hover: #2dd4bf;
--action-on: #042f2e;
--glass-chrome-tint: rgba(8,13,26,0.80);
--glass-chrome-edge: rgba(255,255,255,0.08);
--glass-float-tint: rgba(13,21,38,0.82);
--glass-float-edge: rgba(255,255,255,0.10);
--glass-float-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
--glass-float-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.45);
--page-wash: rgba(20,184,166,0.06);
--select-wash: rgba(20,184,166,0.10);
--select-bar: #2dd4bf;
}
}
:root[data-theme="dark"] {
--action: #14b8a6;
--action-hover: #2dd4bf;
--action-on: #042f2e;
--glass-chrome-tint: rgba(8,13,26,0.80);
--glass-chrome-edge: rgba(255,255,255,0.08);
--glass-float-tint: rgba(13,21,38,0.82);
--glass-float-edge: rgba(255,255,255,0.10);
--glass-float-highlight: inset 0 1px 0 rgba(255,255,255,0.06);
--glass-float-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 24px 60px rgba(0,0,0,0.45);
--page-wash: rgba(20,184,166,0.06);
--select-wash: rgba(20,184,166,0.10);
--select-bar: #2dd4bf;
}
/* [PROPOSED] Thick glass for dialogs and sheets (#4181), per the materials page: dialogs and sheets
sit on a more opaque tint and a deeper blur than menus and the palette, which keep the float glass.
Mirrors packages/web-app/src/index.css :root and .dark; .material-thick falls back to --surface. */
:root {
--glass-thick-tint: rgba(255,255,255,0.92);
--glass-thick-blur: 32px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--glass-thick-tint: rgba(13,21,38,0.90);
}
}
:root[data-theme="dark"] {
--glass-thick-tint: rgba(13,21,38,0.90);
}
/* [PROPOSED] Neela option F (#4182 pass 11) promoted to the app default: the brand teal header band, stage
coloured prompts and actions through the hub tokens, and general prompts neutral. Mirrors
packages/web-app/src/index.css. */
:root {
--neela-f-band: var(--teal-ink);
--neela-f-band-hover: #115e59;
--neela-f-text: var(--teal-ink);
--neela-f-wash: var(--teal-wash);
--neela-f-line: var(--teal-line);
--neela-f-tint: #ccfbf1;
--neela-f-disc-on: #ffffff;
--neela-panel-tint: #ffffff;
--neela-panel-solid: #ffffff;
--neela-panel-edge: var(--teal-line);
--neela-header-field: var(--neela-f-band);
--neela-header-line: 0 1px 0 var(--neela-f-band-hover);
--neela-header-edge: var(--neela-f-band-hover);
--neela-title: #ffffff;
--neela-head-on: #ffffff;
--neela-head-disc-ring: rgba(255,255,255,0.9);
--neela-head-disc-shadow: inset 0 1px 0 #ffffff, 0 0 0 3px rgba(255,255,255,0.35), 0 0 18px rgba(255,255,255,0.45);
--neela-context-bg: var(--neela-f-wash);
--neela-card: #ffffff;
--neela-card-edge: #d9e8e4;
--neela-card-shadow: 0 2px 4px rgba(15,60,56,0.04), 0 6px 16px -8px rgba(15,60,56,0.14);
--neela-control: #ffffff;
--neela-control-hover: var(--neela-f-wash);
--neela-control-edge: #5b857e;
--neela-accent: var(--teal-ink);
--neela-muted: #4b6b66;
--neela-inline: var(--neela-f-wash);
--neela-inline-edge: var(--neela-f-tint);
--neela-disc-shadow: inset 0 1px 0 #ffffff, 0 2px 8px rgba(15,118,110,0.14);
--neela-chip-bg: var(--surface-2);
--neela-chip-text: var(--ink);
--neela-chip-edge: var(--line-2);
--neela-chip-hover-bg: var(--line-2);
--neela-chip-hover-edge: var(--ink-4);
--neela-chip-disc: var(--ink-3);
--neela-chip-disc-on: var(--neela-f-disc-on);
--neela-cite-bg: var(--neela-f-wash);
--neela-cite-text: var(--teal-ink);
--neela-cite-edge: var(--neela-f-tint);
--neela-button-bg: var(--neela-f-band);
--neela-button-fg: #ffffff;
--neela-button-hover: var(--neela-f-band-hover);
--neela-button-ring: var(--neela-f-band);
--neela-button-wash: var(--neela-f-wash);
--neela-send-bg: var(--neela-button-bg);
--neela-send-on: var(--neela-button-fg);
--neela-send-hover: var(--neela-button-hover);
--neela-act-bg: var(--neela-button-bg);
--neela-act-edge: var(--neela-button-bg);
--neela-act-text: var(--neela-button-fg);
--neela-act-hover-bg: var(--neela-button-hover);
--neela-ask-edge: var(--neela-f-band);
--neela-ask-bg: #ffffff;
--neela-ask-focus: var(--neela-f-tint);
--neela-q-bg: var(--surface-2);
--neela-line-bar: var(--neela-f-band);
--neela-brief-bg: var(--neela-f-wash);
--neela-brief-edge: var(--neela-f-tint);
--neela-brief-top: var(--neela-f-band);
--neela-log-mark: var(--teal-ink);
--neela-panel-rim: inset 1px 0 0 var(--neela-card);
--neela-panel-shadow: -8px 0 28px -16px rgba(15,60,56,0.14);
}
:root[data-theme="dark"] {
--neela-f-band: #115e59;
--neela-f-band-hover: #134e4a;
--neela-f-text: var(--teal-ink);
--neela-f-wash: var(--teal-wash);
--neela-f-line: var(--teal-line);
--neela-f-tint: rgba(20,184,166,0.22);
--neela-f-disc-on: #0a1320;
--neela-panel-tint: var(--glass-panel-tint);
--neela-panel-solid: var(--surface);
--neela-panel-edge: var(--teal-line);
--neela-panel-rim: inset 0 0 0 0 transparent;
--neela-panel-shadow: 0 0 0 0 transparent;
--neela-header-field: var(--neela-card);
--neela-header-line: 0 1px 0 var(--neela-card-edge);
--neela-header-edge: var(--neela-card-edge);
--neela-title: #ffffff;
--neela-head-on: #ffffff;
--neela-head-disc-ring: rgba(255,255,255,0.35);
--neela-head-disc-shadow: 0 0 0 3px rgba(255,255,255,0.14);
--neela-context-bg: var(--neela-f-wash);
--neela-card: rgba(30,41,66,0.92);
--neela-card-edge: rgba(255,255,255,0.10);
--neela-card-shadow: 0 0 0 0 transparent;
--neela-control: rgba(30,41,66,0.92);
--neela-control-hover: rgba(255,255,255,0.06);
--neela-control-edge: rgba(255,255,255,0.10);
--neela-accent: var(--teal-ink);
--neela-muted: var(--ink-3);
--neela-inline: var(--surface-2);
--neela-inline-edge: var(--neela-f-line);
--neela-disc-shadow: 0 0 0 0 transparent;
--neela-chip-bg: var(--neela-control);
--neela-chip-text: var(--ink);
--neela-chip-edge: var(--neela-card-edge);
--neela-chip-hover-bg: var(--neela-control-hover);
--neela-chip-hover-edge: var(--ink-4);
--neela-chip-disc: var(--ink-3);
--neela-chip-disc-on: var(--neela-f-disc-on);
--neela-cite-bg: var(--neela-f-wash);
--neela-cite-text: var(--teal-ink);
--neela-cite-edge: transparent;
--neela-button-bg: #5eead4;
--neela-button-fg: #0a1320;
--neela-button-hover: #99f6e4;
--neela-button-ring: #5eead4;
--neela-button-wash: rgba(94,234,212,0.12);
--neela-send-bg: var(--neela-button-bg);
--neela-send-on: var(--neela-button-fg);
--neela-send-hover: var(--neela-button-hover);
--neela-act-bg: var(--neela-button-bg);
--neela-act-edge: var(--neela-button-bg);
--neela-act-text: var(--neela-button-fg);
--neela-act-hover-bg: var(--neela-button-hover);
--neela-ask-edge: var(--teal-ink);
--neela-ask-bg: var(--neela-card);
--neela-ask-focus: var(--neela-f-tint);
--neela-q-bg: var(--neela-f-tint);
--neela-line-bar: var(--teal-ink);
--neela-brief-bg: var(--neela-card);
--neela-brief-edge: var(--neela-f-line);
--neela-brief-top: var(--teal-ink);
--neela-log-mark: var(--teal-ink);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--neela-f-band: #115e59;
--neela-f-band-hover: #134e4a;
--neela-f-text: var(--teal-ink);
--neela-f-wash: var(--teal-wash);
--neela-f-line: var(--teal-line);
--neela-f-tint: rgba(20,184,166,0.22);
--neela-f-disc-on: #0a1320;
--neela-panel-tint: var(--glass-panel-tint);
--neela-panel-solid: var(--surface);
--neela-panel-edge: var(--teal-line);
--neela-panel-rim: inset 0 0 0 0 transparent;
--neela-panel-shadow: 0 0 0 0 transparent;
--neela-header-field: var(--neela-card);
--neela-header-line: 0 1px 0 var(--neela-card-edge);
--neela-header-edge: var(--neela-card-edge);
--neela-title: #ffffff;
--neela-head-on: #ffffff;
--neela-head-disc-ring: rgba(255,255,255,0.35);
--neela-head-disc-shadow: 0 0 0 3px rgba(255,255,255,0.14);
--neela-context-bg: var(--neela-f-wash);
--neela-card: rgba(30,41,66,0.92);
--neela-card-edge: rgba(255,255,255,0.10);
--neela-card-shadow: 0 0 0 0 transparent;
--neela-control: rgba(30,41,66,0.92);
--neela-control-hover: rgba(255,255,255,0.06);
--neela-control-edge: rgba(255,255,255,0.10);
--neela-accent: var(--teal-ink);
--neela-muted: var(--ink-3);
--neela-inline: var(--surface-2);
--neela-inline-edge: var(--neela-f-line);
--neela-disc-shadow: 0 0 0 0 transparent;
--neela-chip-bg: var(--neela-control);
--neela-chip-text: var(--ink);
--neela-chip-edge: var(--neela-card-edge);
--neela-chip-hover-bg: var(--neela-control-hover);
--neela-chip-hover-edge: var(--ink-4);
--neela-chip-disc: var(--ink-3);
--neela-chip-disc-on: var(--neela-f-disc-on);
--neela-cite-bg: var(--neela-f-wash);
--neela-cite-text: var(--teal-ink);
--neela-cite-edge: transparent;
--neela-button-bg: #5eead4;
--neela-button-fg: #0a1320;
--neela-button-hover: #99f6e4;
--neela-button-ring: #5eead4;
--neela-button-wash: rgba(94,234,212,0.12);
--neela-send-bg: var(--neela-button-bg);
--neela-send-on: var(--neela-button-fg);
--neela-send-hover: var(--neela-button-hover);
--neela-act-bg: var(--neela-button-bg);
--neela-act-edge: var(--neela-button-bg);
--neela-act-text: var(--neela-button-fg);
--neela-act-hover-bg: var(--neela-button-hover);
--neela-ask-edge: var(--teal-ink);
--neela-ask-bg: var(--neela-card);
--neela-ask-focus: var(--neela-f-tint);
--neela-q-bg: var(--neela-f-tint);
--neela-line-bar: var(--teal-ink);
--neela-brief-bg: var(--neela-card);
--neela-brief-edge: var(--neela-f-line);
--neela-brief-top: var(--teal-ink);
--neela-log-mark: var(--teal-ink);
}
}
/* [PROPOSED] Navy accent (#4181 pass 13) promoted to the app: the rail stays navy and every accent on it takes the
platform teal, never the firm colour. Icons, the selected bar and the focus ring take the accent ink (teal 500 on
navy in light, teal 300 in dark); the product badge and the selected count take the fill with white on top; the
selected row takes the wash. The platform action trio is the Open1031 action colour that Neela keeps when a firm
colour drives --action. Mirrors packages/web-app/src/index.css. */
:root {
--console-rail-accent-ink: #14b8a6;
--console-rail-accent-fill: #0f766e;
--console-rail-accent-fill-on: #ffffff;
--console-rail-accent-wash: rgba(20,184,166,0.16);
--platform-action: #0f766e;
--platform-action-hover: #115e59;
--platform-action-on: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--console-rail-accent-ink: #5eead4;
--console-rail-accent-fill: #115e59;
--console-rail-accent-fill-on: #ffffff;
--console-rail-accent-wash: rgba(20,184,166,0.14);
--platform-action: #14b8a6;
--platform-action-hover: #2dd4bf;
--platform-action-on: #042f2e;
}
}
:root[data-theme="dark"] {
--console-rail-accent-ink: #5eead4;
--console-rail-accent-fill: #115e59;
--console-rail-accent-fill-on: #ffffff;
--console-rail-accent-wash: rgba(20,184,166,0.14);
--platform-action: #14b8a6;
--platform-action-hover: #2dd4bf;
--platform-action-on: #042f2e;
}
/* [PROPOSED] Party avatars (#4181 pass 13) promoted to the app: the exchanger side (the exchanger, their CPA and
attorney) is navy from the logo, the firm the platform teal, counterparties violet. Mirrors
packages/web-app/src/index.css. */
:root {
--ident-navy-a: #1e3a8a;
--ident-navy-b: #172e6e;
}
:root[data-theme="dark"] {
--ident-navy-a: #3b5bb5;
--ident-navy-b: #2b478f;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ident-navy-a: #3b5bb5;
--ident-navy-b: #2b478f;
}
}
/* [APP] Concept colours (#4329, cohesion slice 1a). Messages and Calculator each own a token so they never borrow a
phase or exchange-type hue. Every concept is set through a data-concept attribute that maps to --c, --c-ink,
--c-wash and --c-line (packages/web-app/src/index.css; the map is src/lib/conceptColors.ts). Mirrors index.css.
Dark Messages ink is #a78bfa (violet 400): #c4b5fd read pale on the phone bar; #a78bfa measures 6.3:1 on the
dark --surface-2 and 7.2:1 on --surface. */
:root {
--concept-messages: #7c3aed;
--concept-messages-ink: #6d28d9;
--concept-messages-wash: #f5f3ff;
--concept-messages-line: #ddd6fe;
--concept-calculator: #d97706;
--concept-calculator-ink: #b45309;
--concept-calculator-wash: #fffbeb;
--concept-calculator-line: #fde68a;
}
:root[data-theme="dark"] {
--concept-messages: #a78bfa;
--concept-messages-ink: #a78bfa;
--concept-messages-wash: rgba(124,58,237,0.18);
--concept-messages-line: rgba(167,139,250,0.4);
--concept-calculator: #fbbf24;
--concept-calculator-ink: #fcd34d;
--concept-calculator-wash: rgba(217,119,6,0.18);
--concept-calculator-line: rgba(251,191,36,0.4);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--concept-messages: #a78bfa;
--concept-messages-ink: #a78bfa;
--concept-messages-wash: rgba(124,58,237,0.18);
--concept-messages-line: rgba(167,139,250,0.4);
--concept-calculator: #fbbf24;
--concept-calculator-ink: #fcd34d;
--concept-calculator-wash: rgba(217,119,6,0.18);
--concept-calculator-line: rgba(251,191,36,0.4);
}
}
[data-concept="sale"] { --c: var(--hub-sales); --c-ink: var(--hub-sales-ink); --c-wash: var(--hub-sales-wash); --c-line: var(--hub-sales-line); }
[data-concept="identification"] { --c: var(--hub-id); --c-ink: var(--hub-id-ink); --c-wash: var(--hub-id-wash); --c-line: var(--hub-id-line); }
[data-concept="purchase"] { --c: var(--hub-purchase); --c-ink: var(--hub-purchase-ink); --c-wash: var(--hub-purchase-wash); --c-line: var(--hub-purchase-line); }
[data-concept="close"] { --c: var(--hub-irs); --c-ink: var(--hub-irs-ink); --c-wash: var(--hub-irs-wash); --c-line: var(--hub-irs-line); }
[data-concept="escrow"] { --c: var(--hub-escrow); --c-ink: var(--hub-escrow-ink); --c-wash: var(--hub-escrow-wash); --c-line: var(--hub-escrow-line); }
[data-concept="disbursement"] { --c: var(--hub-disbursement); --c-ink: var(--hub-disbursement-ink); --c-wash: var(--hub-disbursement-wash); --c-line: var(--hub-disbursement-line); }
[data-concept="compliance"] { --c: var(--compliance); --c-ink: var(--compliance-ink); --c-wash: var(--compliance-wash); --c-line: var(--compliance-line); }
[data-concept="messages"] { --c: var(--concept-messages); --c-ink: var(--concept-messages-ink); --c-wash: var(--concept-messages-wash); --c-line: var(--concept-messages-line); }
[data-concept="calculator"] { --c: var(--concept-calculator); --c-ink: var(--concept-calculator-ink); --c-wash: var(--concept-calculator-wash); --c-line: var(--concept-calculator-line); }
[data-concept="log"] { --c: var(--ink-2); --c-ink: var(--ink-2); --c-wash: var(--surface-2); --c-line: var(--line-2); }
[data-concept="documents"] { --c: var(--ink-2); --c-ink: var(--ink); --c-wash: var(--surface-2); --c-line: var(--line-2); }
[data-concept="neela"] { --c: var(--teal); --c-ink: var(--teal-ink); --c-wash: var(--teal-wash); --c-line: var(--teal-line); }