/* ── Sanolith design tokens (Phase 3.2) ────────────────────────────────── Extracted from app.css so the token system is easy to find and audit. Loaded BEFORE app.css in base.html so any cascade in app.css overrides resolve normally. Naming follows the layered scale: surfaces → meaning → type → primitives. Light values are the defaults; the @media (prefers-color-scheme: dark) block re-binds the surface + meaning-bg tokens for night-shift use. When adding a new token: 1. Light value goes in :root. 2. If it changes in dark mode, add the dark value in the @media block. 3. Use semantic names (--ok, --danger) not literal names (--green-500). */ :root { /* surfaces */ /* Warm Claude-style light palette. The user's reference palette is dark-first, so light mode maps it to paper/bone surfaces with dark ink and contrast-safe warm gold actions. */ --bone: #f3eee5; --bone-soft: #e7ddce; --paper: #fffaf2; --paper-deep: #f8f1e6; --ink: #1b1a16; --ink-soft: #5d574d; --muted: #655f54; --muted-2: #a79d8f; --muted-on-soft: #5d574d; --rule: #d7cbb9; --rule-soft: #e7dccb; /* accent, warm gold */ --accent: #9b642c; --accent-deep: #6f461d; --accent-tint: #f3dfc3; --accent-soft: #fbf0e1; /* meaning */ --redact: #1a1a1a; --good: #5fae6c; --bad: #e58062; --warning: #9b642c; /* warn, amber */ --warn: #9b642c; --warn-bg: #fbf0e1; --warn-border: #e2b87a; --warn-text-deep: #6f461d; /* role-pill tenant-admin */ --warn-orange: #9b642c; /* tool-chip running text */ --warn-orange-bg: #fbf0e1; --warn-orange-border: #e2b87a; /* danger, red */ --danger: #b65a43; --danger-bg: #fae5dd; --danger-border: #e8b9a7; --danger-deep: #8d3f2f; /* button hover, tool-chip failed text */ --danger-soft-bg: #fdf0ec; /* run-status-pill.fail, lineage-step.fail bg */ --danger-soft-border: #e8b9a7; /* lineage-step.fail border */ --danger-light: #e58062; /* phase-step border */ --on-danger: #ffffff; /* ok, green */ --ok: #497f52; --ok-bg: #e8f2e4; --ok-border: #b9d7b5; --ok-deep: #356b3e; /* darker green: run-status, phase-step text, text-ok */ --ok-deep-bg: #e4efe1; --ok-deep-border: #a8cfa5; --ok-strong-border: #5fae6c; /* phase-step, code-copy-btn.copied */ --ok-pill-bg: #e1eddc; /* tool-chip done bg */ --ok-pill-text: #356b3e; /* tool-chip done text */ /* info, blue */ --info: #1d4ed8; --info-bg: #eff6ff; --info-border: #bfdbfe; /* accent, used as soft border on pill-active */ --accent-soft-border: #d4a76a; --on-accent: #ffffff; /* queued, purple, used by pipeline status */ --queued: #6b21a8; --queued-bg: #faf5ff; --queued-border: #d8b4fe; --queued-strong: #c084fc; /* slate, neutral chip used by VEX UNTRIAGED and severity LOW */ --slate: #475569; --slate-bg: #f1f5f9; --slate-border: #cbd5e1; /* indigo, VEX FIXED chip color (separates a deployed-fix state from OK/green which already means "no risk left to triage") */ --indigo: #4338ca; --indigo-bg: #eef2ff; --indigo-border: #c7d2fe; /* stone, third-rail neutral for tertiary classification states where slate and bone already carry distinct semantics (e.g. an "unknown" speaker label on the live-transcript page that sits adjacent to slate=patient and indigo=provider). Warmer than slate, cooler than bone, so the three sit beside each other without color clash. */ --stone: #57534e; --stone-bg: #f5f5f4; --stone-border: #d6d3d1; /* diff fence colors (v44 — fenced `diff`/`patch` block per-line) — deliberately soft + dark-mode-tuned, distinct from --ok/--danger which are bold pill colors. These read on a dark code-block background without screaming. */ --diff-add-text: #b8e6c5; /* added line text */ --diff-del-text: #ffb3ad; /* removed line text */ --diff-hunk-text: #8ab4f8; /* `@@` hunk header text */ /* 2026-05-26 — data-upsampler worker family palette. Maps to the 4 pinned workers in the service (q_and_a / work_products / communications / references). Distinct hues so the run-list table is scannable at a glance even when only the pill is visible; subtle backgrounds keep the table calm. */ --worker-qa-bg: #f0f4ff; --worker-qa-text: #314ec9; --worker-qa-border: #c5d2ff; --worker-wp-bg: #fff3eb; --worker-wp-text: #9a3412; --worker-wp-border: #f5c4a0; --worker-comm-bg: #ecfdf5; --worker-comm-text: #14532d; --worker-comm-border: #b6e0c8; --worker-ref-bg: #f5ecff; --worker-ref-text: #5b21b6; --worker-ref-border: #d4baf3; /* Succeeded status-pill — distinct from --ok which is already used for tool-chip "done" + run-status "ready" elsewhere with a warmer palette. Upsample succeeded reads more "clinical-green" for visual variety in the run list. */ --status-succeeded-bg: #ecfdf5; --status-succeeded-border: #b6e0c8; --status-succeeded-text: #2e7e3a; /* Stream-card terminal palette — used by the SSE log on /admin/data-upsampler/runs/{id}. Dark background + light foreground reads as a terminal regardless of viewer's prefers- color-scheme. The level colors (info / warn / err / ok) match a standard terminal palette so they're immediately legible. */ --stream-bg: #0d100f; --stream-fg: #d6dad8; --stream-ts: #6b7c75; --stream-info: #93c5fd; --stream-warn: #fbbf24; --stream-err: #ff6b6b; --stream-ok: #4ade80; /* type */ --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* primitives */ --radius: 6px; --radius-lg: 10px; --shadow-1: 0 1px 0 rgb(10 14 13 / 0.04); --shadow-2: 0 6px 24px -12px rgb(10 14 13 / 0.10); /* App-wide ambient backdrop. Warm light mode gets the same broad page rhythm as Models Hub without keeping the old teal wash. */ --app-backdrop-base: var(--bone); --app-backdrop-top: color-mix(in srgb, var(--accent-soft) 72%, var(--bone)); --app-backdrop-glow-right: color-mix(in srgb, var(--accent) 16%, transparent); --app-backdrop-glow-left: color-mix(in srgb, var(--accent-deep) 10%, transparent); --app-backdrop-vignette: color-mix(in srgb, var(--ink) 5%, transparent); /* Shared portal surface system. Models Hub was already using these aliases in admin.css; defining them here makes every portal page resolve to the same bone/paper/teal palette instead of falling back to invalid CSS or one-off page colors. */ --surface-page: var(--bone); --surface-panel: var(--paper); --surface-raised: color-mix(in srgb, var(--paper) 90%, var(--bone-soft)); --surface-subtle: color-mix(in srgb, var(--paper) 78%, var(--bone-soft)); --surface-inset: color-mix(in srgb, var(--bone-soft) 82%, var(--paper)); --surface-accent: color-mix(in srgb, var(--accent-soft) 54%, var(--paper)); --surface-accent-hover: color-mix(in srgb, var(--accent-soft) 48%, var(--paper)); --surface-2: var(--surface-subtle); --line: var(--rule); --line-soft: var(--rule-soft); --border-subtle: var(--rule-soft); --radius-sm: var(--radius); --radius-md: var(--radius-lg); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; } /* Dark mode rebind. Auto-applies via OS preference. */ @media (prefers-color-scheme: dark) { :root { --bone: #0d100f; --bone-soft: #161a18; --paper: #1a1f1d; --ink: #ececec; --ink-soft: #b4bbb8; --muted: #828a86; /* Dark-mode rebind for the bone-soft-tuned muted (audit finding A3). On dark --bone-soft (#161a18, luminance ~0.008) #b4bbb8 yields ~9:1 — easily clear AA. We keep this brighter than --muted so the light-mode semantic (slightly stronger contrast on soft surface) stays intact under the dark theme too. */ --muted-on-soft: #b4bbb8; --rule: #2a2f2d; --rule-soft: #1f2422; --accent-tint: #0e3d38; --accent-soft: #082b27; --app-backdrop-base: #070b0a; --app-backdrop-top: color-mix(in srgb, var(--accent-soft) 38%, var(--bone)); --app-backdrop-glow-right: color-mix(in srgb, var(--accent) 22%, transparent); --app-backdrop-glow-left: color-mix(in srgb, var(--accent-deep) 18%, transparent); --app-backdrop-vignette: color-mix(in srgb, black 30%, transparent); /* meaning-fg: rebind to lighter shades that read on dark surfaces */ --warn: #fbbf24; --warn-text-deep: #fcd34d; --warn-orange: #fb923c; --danger: #f87171; --danger-deep: #fca5a5; --danger-light: #fca5a5; --ok: #34d399; --ok-deep: #6ee7b7; --ok-strong-border: #34d399; --ok-pill-text: #6ee7b7; --info: #60a5fa; --queued: #c084fc; --queued-strong: #d8b4fe; --slate: #cbd5e1; --slate-bg: #1f2937; --slate-border: #334155; --indigo: #a5b4fc; --indigo-bg: #1e1b4b; --indigo-border: #312e81; /* meaning-bg: dim tinted surfaces */ --warn-bg: #2a2007; --warn-orange-bg: #2a1a0a; --danger-bg: #2a0c0c; --danger-soft-bg: #1f0a0a; --ok-bg: #0a2515; --ok-deep-bg: #082018; --ok-pill-bg: #0a2515; --info-bg: #0a1a2c; --queued-bg: #1a0a2a; /* meaning-borders: lower alpha versions of fg colors */ --warn-border: rgba(251, 191, 36, 0.30); --warn-orange-border: rgba(251, 146, 60, 0.30); --danger-border: rgba(248, 113, 113, 0.30); --danger-soft-border: rgba(252, 165, 165, 0.30); --ok-border: rgba(52, 211, 153, 0.30); --ok-deep-border: rgba(110, 231, 183, 0.30); --info-border: rgba(96, 165, 250, 0.30); --queued-border: rgba(192, 132, 252, 0.30); --accent-soft-border: rgba(20, 184, 166, 0.30); /* on-X stays white on dark too, solid colored buttons keep white text */ } } /* ── Audit finding A3: WCAG AA contrast on bone-soft surfaces ── The default --muted (#6b7470) clears AA on --bone (4.5:1+) but drifts to ~3.84:1 on --bone-soft (#f1ede4). Two known surfaces: · `.kpi .label kbd` (statement-of-fact kbd hint inside the KPI label). · `.ops-nav-pill .ops-nav-count` (count chip inside the active pill — pill background is bone-soft when active). Both rules apply --muted-on-soft so the rendered text clears AA without breaking the existing --muted contract anywhere else. Owns the rule because tokens.css is the only stylesheet not claimed by another concurrent agent this wave. */ .kpi .label kbd, .ops-nav-pill .ops-nav-count, .status-filter[aria-selected="true"] { color: var(--muted-on-soft); } /* ── Wave 6 visual system (2026-06-10, operator-approved Modern Pass + motion language). New tokens only; nothing above is mutated, so the legacy (flag-off) shell keeps its exact look. app.css consumes these under .app-frame scope; motion.css owns the animation primitives. */ :root { /* motion */ --ez: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-1: 150ms; --dur-2: 220ms; /* elevation, two soft layers instead of hard borders */ --el-1: 0 1px 2px rgb(27 26 22 / 0.04), 0 4px 16px -8px rgb(27 26 22 / 0.08); --el-2: 0 2px 4px rgb(27 26 22 / 0.05), 0 12px 32px -12px rgb(27 26 22 / 0.16); --hairline: rgb(27 26 22 / 0.08); /* the one allowed gradient, gold only (rule 4 of the Modern Pass) */ --grad-gold: linear-gradient(135deg, #a86f33, #7d5022); --grad-gold-soft: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-tint) 65%, var(--accent-soft))); /* frosted chrome base colors (backdrop-filter pairs with these) */ --frost-side: color-mix(in srgb, var(--surface-inset) 74%, transparent); --frost-bar: color-mix(in srgb, var(--surface-page) 78%, transparent); --frost-panel: color-mix(in srgb, var(--surface-panel) 86%, transparent); } @media (prefers-color-scheme: dark) { :root { --el-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 6px 18px -8px rgb(0 0 0 / 0.45); --el-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 14px 34px -14px rgb(0 0 0 / 0.55); --hairline: rgb(255 255 255 / 0.07); --grad-gold: linear-gradient(135deg, #b07a3c, #8a5a26); --grad-gold-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent-deep) 16%, transparent)); } } /* ── Wave 10 polish (2026-06-10): accent-on-soft, the A3 pattern for gold. Light mode: identical to --accent-deep, so nothing shifts. Dark mode: --accent-soft/-tint rebind to deep teal but --accent-deep stayed dark brown, leaving the new shell's gold pills (sidebar badges, pinned threads, active encounter status, verify dots, citation kickers) at roughly 2:1 contrast. This token gives those surfaces a light gold that clears AA on the dark soft surfaces. */ :root { --accent-on-soft: #6f461d; } @media (prefers-color-scheme: dark) { :root { --accent-on-soft: #e0b072; } }