/** * FishAI × Keystone — Style pillar (tokens only) * ========================================================================= * [#1037 / web:keystone-adopt] Step 1 — shared state (--good/--warn/--bad) * [#1362 / audit:token_fragmentation] Step 2 — shared surface/text/border * [#1465 / web:ux_match_mobile] Step 2b — recommend chrome = iOS/Sonar boat * [#1796 / gfx:token-fragmentation] Step 2c — one WC chrome block; no surface re-hex * * Shared semantic vocabulary for the 4 WEB :root token sets that used to * diverge independently: * 1) recommend shell (web.py PAGE) * 2) admin ops (web.py _admin_page) * 3) sciences ledger (web.py _sciences_page) * 4) marketing Sonar (marketing/marketing.html) * Native iOS shares the Water Column confidence ramp via named Color assets * (#1759). Recommend chrome tracks marketing Water Column (deep/surface/signal/warm/mist). * * Brand mark SoT (#1797 / gfx:brand-mark): * vector → fishai/static/brand-mark.svg (served /brand-mark.svg) * raster → fishai/static/brand-mark.png (512²; /brand-mark.png) * PWA → icon-180/192/512.png (exports of native AppIcon fish) * native → fishai-mobile AppIcon.appiconset/AppIcon.png * Marketing nav + login use the shared asset — no CSS-only competing glyph. * * Source of truth for numbers: Keystone Style pillar v1.3.0 * https://ui.aheliotech.app/keystone.css (internal Aheliotech asset) * This file is a VENDORED SUBSET of state + semantic aliases only — * zero CDN dependency, zero build step, additive, low-risk. * * ADOPT PATH (smallest incremental — do NOT full-rewrite): * Step 1: state semantics (--good/--warn/--bad) once, all webs. [#1037] * Step 2: surface/text/border tokens + chrome themes (THIS FILE). [#1362] * Step 3: opt-in .ks-* components + Behavior pillar (ARIA) per page. * Never drop full keystone.css on recommend until chrome is re-themed * deliberately. * * Canonical roles (ONE name per role across surfaces): * --bg page canvas * --surface raised card / panel * --border default chrome border * --text primary ink * --text-muted secondary / dim text * --accent interactive / link accent * --hot danger / brand-hot accent * * Back-compat aliases (surfaces keep existing var() usage): * --panel / --card → --surface * --line / --trim → --border * --ink / --txt → --text * --dim / --mut → --text-muted * --ac → --accent * * Mapping (FishAI state alias → Keystone state): * --good → --ks-success-* * --warn → --ks-warning-* * --bad → --ks-error-* * --info → --ks-info-* * * Per-surface chrome is selected via data-fishai-chrome on or : * recommend | admin | sciences | marketing * Surfaces MUST NOT re-declare --good/--warn/--bad or the canonical surface * tokens with independent hex literals (that was the fragmentation). * #1796: recommend/admin/sciences/marketing share one WC chrome block; * marketing.html no longer ships a private hex :root for deep/surface/signal. */ :root { /* ---- Keystone state primitives (light defaults) ---- */ --ks-success-default: #10B981; --ks-success-hover: #059669; --ks-success-surface: rgba(16, 185, 129, 0.12); --ks-success-text: var(--ks-teal-400); --ks-success-border: #6EE7B7; --ks-warning-default: #F59E0B; --ks-warning-hover: #D97706; --ks-warning-surface: rgba(245, 158, 11, 0.12); --ks-warning-text: #FCD34D; --ks-warning-border: #FCD34D; --ks-error-default: #D9564F; --ks-error-hover: #C44840; --ks-error-surface: rgba(217, 86, 79, 0.14); --ks-error-text: #F87171; --ks-error-border: #FECACA; --ks-info-default: #3B82F6; --ks-info-hover: #2563EB; --ks-info-surface: rgba(59, 130, 246, 0.12); --ks-info-text: #93C5FD; --ks-info-border: #BFDBFE; /* Teal-400 used by Keystone dark success-text */ --ks-teal-400: #34D399; /* ---- FishAI semantic state aliases (ONE set across web surfaces) ---- */ --good: var(--ks-success-text); --warn: var(--ks-warning-text); --bad: var(--ks-error-text); --info: var(--ks-info-default); --good-text: var(--ks-success-text); --warn-text: var(--ks-warning-text); --bad-text: var(--ks-error-text); --info-text: var(--ks-info-text); --good-surface: var(--ks-success-surface); --warn-surface: var(--ks-warning-surface); --bad-surface: var(--ks-error-surface); --info-surface: var(--ks-info-surface); /* ---- Step 2: shared surface / text / border (#1362) ---- DARK product defaults (John: never flash light chrome). ALL FishAI web surfaces are always dark. Light mode is not offered. */ --bg: #0A141D; --surface: #0F1E2A; --border: #1D3140; --text: #DFEAF2; --text-muted: #8BA6BA; --accent: #8FD3FF; --hot: #722F37; color-scheme: dark; /* Pin confidence ramp (#1759 Water Column) — Strong=warm, Good=signal, try=mist */ --pin-hi: #E0A15A; /* Strong */ --pin-gd: #2BB3A8; /* Good */ --pin-fr: #9BB0B8; /* Worth a try */ --pin-lo: #6E858E; /* low try */ /* Chrome helpers (bars, chips, elevated cards) */ --chrome: rgba(7, 11, 18, 0.88); --elevated: #121C2C; --chip: #162033; --on-accent: #001225; /* Back-compat aliases — do not re-hex these on surfaces */ --panel: var(--surface); --card: var(--surface); --line: var(--border); --trim: var(--border); --ink: var(--text); --txt: var(--text); --dim: var(--text-muted); --mut: var(--text-muted); --ac: var(--accent); } /** * Dark state semantics: recommend (default), admin ops, sciences ops, marketing "Sonar Dark". * Apply via class on or , or data-theme="dark" (Keystone convention). * Admin + sciences are ALWAYS dark (John: never light on those surfaces). */ html.ks-fishai-dark, body.ks-fishai-dark, [data-theme="dark"] { --ks-success-surface: rgba(16, 185, 129, 0.12); --ks-success-text: var(--ks-teal-400); --ks-warning-surface: rgba(245, 158, 11, 0.12); --ks-warning-text: #FCD34D; --ks-error-surface: rgba(217, 86, 79, 0.14); --ks-error-text: #F87171; --ks-info-surface: rgba(59, 130, 246, 0.12); --ks-info-text: #93C5FD; /* On dark chrome, prefer the lighter text-role values for --good/--warn/--bad so the same alias reads as status TEXT and as a soft fill accent. */ --good: var(--ks-success-text); --warn: var(--ks-warning-text); --bad: var(--ks-error-text); --info: var(--ks-info-default); --good-text: var(--ks-success-text); --warn-text: var(--ks-warning-text); --bad-text: var(--ks-error-text); --info-text: var(--ks-info-text); --good-surface: var(--ks-success-surface); --warn-surface: var(--ks-warning-surface); --bad-surface: var(--ks-error-surface); --info-surface: var(--ks-info-surface); } /* ========================================================================= * Chrome themes — set CANONICAL roles only; aliases follow automatically. * Selected via data-fishai-chrome on and/or . * * #1796: ONE Water Column base for recommend/admin/sciences/marketing * (was four near-identical hex blocks + marketing private :root). * Surfaces MUST NOT re-declare these with independent hex literals. * ========================================================================= */ /* Shared Water Column palette (marketing SoT #1759): deep #0B1214 · surface #152026 · signal #2BB3A8 · warm #E0A15A · mist #9BB0B8 */ html[data-fishai-chrome="recommend"], body[data-fishai-chrome="recommend"], html[data-fishai-chrome="admin"], body[data-fishai-chrome="admin"], html[data-fishai-chrome="sciences"], body[data-fishai-chrome="sciences"], html[data-fishai-chrome="marketing"], body[data-fishai-chrome="marketing"] { color-scheme: dark; --deep: #0B1214; --deep-2: #0F181C; --bg: #0B1214; --surface: #152026; --surface-2: #1C2A31; --border: rgba(232, 240, 242, 0.10); --line: rgba(232, 240, 242, 0.08); --text: #E8F0F2; --text-muted: #9BB0B8; /* mist — AA on deep+surface */ --mist: #9BB0B8; --mist-2: #6E858E; --accent: #2BB3A8; /* signal */ --signal: #2BB3A8; --warm: #E0A15A; --hot: #C94F63; --chrome: rgba(11, 18, 20, 0.92); --elevated: #1C2A31; --chip: #1C2A31; --on-accent: #06201e; --pin-hi: #E0A15A; /* Strong */ --pin-gd: #2BB3A8; /* Good */ --pin-fr: #9BB0B8; /* Worth a try */ --pin-lo: #6E858E; /* WC-aligned state (pass=signal, attention=warm) — one set for product chrome */ --ks-success-surface: rgba(43, 179, 168, 0.14); --ks-success-text: #2BB3A8; --ks-warning-surface: rgba(224, 161, 90, 0.14); --ks-warning-text: #E0A15A; --ks-error-surface: rgba(201, 79, 99, 0.14); --ks-error-text: #F87171; --ks-info-surface: rgba(43, 179, 168, 0.12); --ks-info-text: #9BB0B8; --good: var(--ks-success-text); --warn: var(--ks-warning-text); --bad: var(--ks-error-text); --info: #2BB3A8; --good-text: var(--ks-success-text); --warn-text: var(--ks-warning-text); --bad-text: var(--ks-error-text); --info-text: var(--ks-info-text); --good-surface: var(--ks-success-surface); --warn-surface: var(--ks-warning-surface); --bad-surface: var(--ks-error-surface); --info-surface: var(--ks-info-surface); } /* light theme REMOVED — John: never turn off dark mode */ /* admin + sciences — denser ops rhythm only (#1764); palette from shared WC above */ html[data-fishai-chrome="admin"], body[data-fishai-chrome="admin"], html[data-fishai-chrome="sciences"], body[data-fishai-chrome="sciences"] { --ops-pad: 10px; --ops-gap: 8px; --ops-radius: 10px; } /* marketing brand: warm doubles as hot accent on the dream site */ html[data-fishai-chrome="marketing"], body[data-fishai-chrome="marketing"] { --hot: #E0A15A; }