/* ============================================================ AGORA — Design Tokens · contrast revision (2026-07-30) Source of visual truth. Implements design_handoff_contrast/ (which supersedes design_handoff_agora/tokens.css). WHAT CHANGED — lightness discipline only. The semantic mapping is unchanged: purple = Aris (the one non-human voice), cyan = the Engine (every computed value), blue = interactive. Three rules the token names now enforce: 1. Surface fills cannot carry hierarchy in a dark theme (two near-blacks are always ~1.0:1 apart). BORDERS carry it — which is why the old set felt flat: every surface sat inside 1.06:1 AND every border was under 3:1. 2. Every token used as TEXT passes 4.5:1 at 11px; every token used as a STRUCTURAL border passes 3:1. 3. No opacity on text, no text-shadow. Dim by choosing the next token down, so the ratio stays computable. Ratios in comments are measured against --ag-canvas unless stated otherwise, and were re-derived (not copied) before adoption. ============================================================ */ :root { /* ---- Surfaces ------------------------------------------------- The floor is lifted one stop off near-black. That is what gives the ladder room: chrome is 1.13:1 above the canvas and raised cards 1.26:1 — perceptible, where the old set was 1.04:1. ---------------------------------------------------------------- */ --ag-canvas: #14172e; /* conversation column, grid body, page bg */ --ag-chrome: #1c2140; /* top bar, left rail, right panel, composer, inputs */ --ag-raised: #232951; /* cards, panels-on-panels, spine track, scenario tabs */ --ag-engine-surface:#16303a; /* computed (ƒx) cells, NPV band, engine strip */ --ag-aris-surface: #241b47; /* Aris message bubble, Aris chips, gate warning */ --ag-select: #26306b; /* selected grid cell / active pill fill */ /* ---- Hairlines — split by JOB, and opaque -------------------- Alpha over five different fills gives five different ratios you cannot reason about. These are flat hex on purpose: contrast becomes computable, the same way the Engine makes numbers checkable rather than hoped-for. ---------------------------------------------------------------- */ --ag-line: #343a68; /* 1.64:1 — decorative dividers ONLY */ --ag-line-strong: #5f649a; /* 3.17:1 — anything carrying structure: gridlines, card + bubble edges, input borders, panel/rail edges, focus rings */ /* ---- Text ---------------------------------------------------- */ --ag-text: #eef0ff; /* 15.6:1 — headings, values, primary */ --ag-text-body: #dcdef5; /* 13.3:1 — prose */ --ag-text-muted: #a9adda; /* 8.1:1 — labels, secondary, placeholders */ --ag-text-meta: #8d92c4; /* 5.9:1 — mono meta, timestamps, gutters. HARD FLOOR: never render below 11px. */ /* ---- Brand / interactive (electric blue) --------------------- */ --ag-blue: #3550e8; /* fills only — white text on it = 6.1:1 */ --ag-blue-text: #9fb0ff; /* 8.5:1 — links, active tabs, blue labels */ --ag-blue-line: #6f86ff; /* 5.5:1 — blue borders, selected-cell ring */ --ag-blue-surface: #26306b; /* blue-tinted fill (chips, reply bar, hover) */ /* ---- Aris (purple) — the one non-human voice ----------------- */ --ag-aris: #8b3dd9; /* fills only — white text on it = 5.6:1 */ --ag-aris-text: #d3b0f7; /* 9.5:1 — "Aris", method tags, purple labels */ --ag-aris-spine: #a86fe8; /* 5.1:1 — the bubble spine, assumption dots */ --ag-aris-line: #7a53c0; /* 3.2:1 — bubble + card borders (was 1.24:1) */ --ag-aris-chip: #6e39b0; /* chip fill; use --ag-aris-emphasis text on it */ --ag-aris-emphasis: #f0dcff; /* 12.4:1 on --ag-aris-surface — bold text inside the bubble, gate warning. Tokenised rather than the handoff's two near-identical raw hexes, so the hex-literal guard stays meaningful. */ /* ---- The Engine (cyan) — every COMPUTED value ---------------- */ --ag-engine: #6ff0f0; /* 12.9:1 — computed values. NO text-shadow. */ --ag-engine-line: #2f9ea0; /* 5.5:1 — cyan borders (was 1.4:1) */ --ag-engine-chip: #1e5a5c; /* ƒx chip fill; use --ag-engine text on it */ --ag-engine-ink: #062a2a; /* dark ink ON a cyan fill (the ✓ in a done Spine step) */ /* ---- Signal colors — amber warns, red is destructive --------- Both were loose hex literals scattered through app.css; they are semantic (wall tensions, auditor faults, remove-member) and so belong here where their ratio is stated once. ---------------------------------------------------------------- */ --ag-amber: #f0b45a; /* 8.9:1 — tension, wall rejections, faults */ --ag-danger: #e08a8a; /* 7.5:1 — serious faults, destructive actions */ /* ---- Human participant avatars ------------------------------ White initials at 10–11px are SMALL text, so each fill must clear 4.5:1 against #fff. Re-measured at adoption; the handoff had a and b transposed: a #3d79f2 was 4.03:1 — FAILED, darkened here (the handoff left it alone as "passes") b #2a4bad is 7.75:1 — already passes, kept unchanged (the handoff proposed darkening it to 9.9:1; nothing to fix) c #2e97a8 was 3.44:1 — darkened as the handoff proposed ---------------------------------------------------------------- */ --ag-user-a: #366ad5; /* sky — white 5.0:1 (was #3d79f2, 4.0:1) */ --ag-user-b: #2a4bad; /* indigo — white 7.8:1, unchanged */ --ag-user-c: #2a7684; /* teal — white 5.2:1 (was #2e97a8, 3.4:1) */ --ag-online: #35c76a; /* presence dot */ /* ---- Status / lifecycle ------------------------------------- Every status has a text color that passes at 11px. "Parked" and "dropped" are differentiated by border + label, NEVER by opacity. ---------------------------------------------------------------- */ --ag-status-pending: var(--ag-aris-text); --ag-status-raised: var(--ag-blue-text); --ag-status-accepted: var(--ag-engine); --ag-status-parked: var(--ag-text-muted); --ag-status-dropped: var(--ag-text-muted); /* AG-19: meta was under the 11px/500 floor rule at pill size */ --ag-live: var(--ag-engine); /* ---- Value-Spectrum columns (mapping unchanged) -------------- */ --ag-save: var(--ag-engine); --ag-grow: var(--ag-blue-line); --ag-transform: var(--ag-aris-spine); /* ---- Feedback (system voice, NOT Aris) — deep audit §A ------- Errors and warnings stop borrowing Aris's purple (AG-10): the system's voice must be visually distinct from the facilitator's. Amber warns / recoverable; danger destroys. The TEXT tokens already existed above (--ag-amber 8.9:1, --ag-danger 7.5:1); these are their surfaces and borders. ---------------------------------------------------------------- */ --ag-warn-surface: #322818; /* amber-tinted fill for error/warn banners */ --ag-warn-line: #a5762e; /* 3.1:1 — warn border */ --ag-danger-surface: #391f22; --ag-danger-line: #a05050; /* 3.0:1 — destructive border */ /* ---- THE WALL — deep audit §A (AG-01, AG-06) ----------------- Mirrored as JS constants in wall.js (DARK_THEME) — keep in sync; tests/test_css_tokens.py compares them byte-for-byte. Rules: node fill = chrome; strokes ≥3:1; text ≥4.5:1 at ≥10 SVG units. The export plate is the canvas color, never the retired #080a1c. ---------------------------------------------------------------- */ --ag-wall-node: #1c2140; --ag-wall-text: #eef0ff; --ag-wall-muted: #a9adda; --ag-wall-meta: #8d92c4; --ag-wall-edge: #7d82b8; /* 4.8:1 */ --ag-wall-hull: #5f649a; /* 3.17:1 — the audit's #565b8e computed 2.75:1; this is --ag-line-strong, whose whole job is structure-on-canvas ≥3:1 */ --ag-wall-stroke-neutral: #7d82b8; --ag-wall-stroke-idea: #6f86ff; /* 5.5:1 */ --ag-wall-stroke-metric: #2f9ea0; /* 5.5:1 */ --ag-wall-stroke-risk: #f0b45a; /* 5.86:1 (was fine; now opaque) */ --ag-wall-plate: #14172e; /* ---- Radii (unchanged) -------------------------------------- */ --ag-r-sm: 6px; --ag-r-md: 9px; --ag-r-lg: 12px; --ag-r-xl: 14px; /* ---- Type (families unchanged) ------------------------------ The enforceable part is the floor: nothing renders below 11px except chip labels on a tinted fill (10px). Raising the sizes is a separate, layout-moving step — see design_handoff_contrast step 3; it is NOT applied yet. ---------------------------------------------------------------- */ --ag-font-ui: 'Schibsted Grotesk', system-ui, sans-serif; --ag-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ---- Elevation ---------------------------------------------- Glow survives ONLY as box-shadow on fills, never behind text. --ag-engine-glow is neutralised because its single use was a text-shadow on the NPV/engine numbers (it bloomed exactly the glyphs that matter most). --ag-coach-glow and --ag-blue-glow stay REAL: they are box-shadows on fills, and neutralising --ag-coach-glow to `none` would produce `box-shadow: 0 0 0 3px rgba(...), none` — invalid, so the whole declaration (including Aris's avatar ring) would be dropped. ---------------------------------------------------------------- */ --ag-shadow-window: 0 30px 70px -28px rgba(0,0,0,.75); --ag-shadow-pop: 0 8px 26px -8px rgba(0,0,0,.6); --ag-focus-ring: 0 0 0 3px rgba(53,80,232,.35); --ag-blue-glow: 0 0 18px -2px rgba(53,80,232,.55); --ag-coach-glow: 0 0 16px -2px rgba(139,61,217,.55); --ag-engine-glow: none; /* was a text-shadow; deliberately dead */ /* ============================================================ LEGACY ALIASES — so the rollout can proceed screen by screen. Delete each once no selector references it. ============================================================ */ --ag-bg: var(--ag-canvas); --ag-surface: var(--ag-chrome); --ag-surface-2: var(--ag-raised); --ag-surface-deep: var(--ag-chrome); --ag-derived-cell: var(--ag-engine-surface); --ag-accent-navy: #1b2450; --ag-accent-steel: #1e4a85; --ag-text-faint: var(--ag-text-meta); --ag-blue-2: var(--ag-blue); --ag-blue-light: var(--ag-blue-text); --ag-coach: var(--ag-aris); --ag-coach-light: var(--ag-aris-text); --ag-coach-tint: var(--ag-aris-surface); --ag-coach-border: var(--ag-aris-line); --ag-engine-tint: var(--ag-engine-surface); /* AG-12: collapsed height of the Room's mobile bottom sheet (readiness strip + tabs). This is the safe fallback; the room script measures the real height and overrides it on the .panel element. */ --ag-sheet-head: 86px; }