/* AgentMaps End-User UX — Design Tokens Canonical token sheet for the EndUser view. v3 (A1V3-SETUP-01): aligned to docs/a1-v3-mockups/00-theme-contract.html. - Theme is switched via a `data-theme` attribute on ("dark" | "light"). - The bare :root carries the DARK values so the existing A1 v2 surface (src/frontend/src/a1/*, which never sets data-theme) keeps rendering in dark exactly as before — nothing about v2 changes. - :root[data-theme="light"] supplies the light counterparts; the A1 v3 app (mounted at /a1?a1v3=1) toggles the attribute. Theme-independent tokens (motion, layout) live only in the bare :root. */ :root { /* Surfaces (dark default) */ --eu-bg: #0b0f17; --eu-panel: #131a26; --eu-panel-2: #1a2233; --eu-panel-3: #20293c; /* Borders */ --eu-border: #243046; --eu-border-strong: #324363; --eu-border-dashed: #324363; /* Text */ --eu-text: #e6ecf5; --eu-muted: #8a96ab; --eu-muted-2: #647186; /* Brand / accent */ --eu-accent: #6ea8fe; --eu-accent-2: #8ee0c1; --eu-accent-soft: rgba(110,168,254,0.10); --eu-accent-soft-2: rgba(110,168,254,0.18); --eu-accent-ring: rgba(110,168,254,0.40); /* Health */ --eu-good: #6cd49a; --eu-warn: #f5b76b; --eu-bad: #ef6b6b; --eu-neutral: #647186; /* Shadows */ --eu-shadow-pop: 0 8px 24px -6px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4); --eu-shadow-orb: 0 0 14px rgba(110,168,254,0.4); /* Brand badges (per-solution accent dots/chips) */ --badge-claude: #d97757; --badge-gemini: #8ab4f8; --badge-breeze: #ff7a59; --badge-openai: #1bbf91; --badge-perplexity: #20b8cd; /* Pathways "sand" */ --eu-sand: #e0cfa0; --eu-sand-shadow: #b89e6b; /* Code surfaces */ --code-bg: #0d121d; --code-border: #1c2538; /* Subtle row separator (HARMONIZATION-01) — fainter than --eu-border, for sibling-row separators vs full card outlines. */ --eu-border-2: #1c2738; /* ISpy Live palettes (HARMONIZATION-01) — workflow / AI-state / work-shape colors promoted from the ISpy dashboard inline tokens into the shared contract (the Live page lands in AgentMaps; one source, both consume). Dark values are the default here; light counterparts live in :root[data-theme="light"]. AgentMaps surfaces don't consume these yet (additive). */ --wf-q2c: #6ea8fe; --wf-c2r: #8ee0c1; --wf-h2r: #f5b76b; --wf-p2p: #20b8cd; --wf-cs: #d98ee0; --wf-r2r: #b692f7; --wf-dev: #8b85f5; --wf-pm: #fb7aa8; --wf-gen: #8a96ab; --st-auto: #b692f7; --st-assisted: #6ea8fe; --st-manual: #647186; --ws-think: #e0cfa0; --ws-search: #6ea8fe; --ws-read: #8a96ab; --ws-write: #f5b76b; --ws-tool: #8ee0c1; --ws-gen: #d97757; --ws-blocked: #ef6b6b; --ws-done: #6cd49a; /* Motion (theme-independent) */ --eu-ease-out: cubic-bezier(.2,.8,.2,1); --eu-d-fast: 120ms; --eu-d-med: 220ms; --eu-d-slow: 360ms; /* Layout (theme-independent) */ --eu-leftnav-w: 260px; --eu-header-h: 52px; --eu-overlay-h: 44px; --eu-appnav-w: 60px; --eu-leftpane-w: 280px; /* ═══════════════════════════════════════════════════════════════════════════ DESIGN-SYSTEM HARMONIZATION (AGENTMAPS-DESIGN-SYSTEM-HARMONIZATION-01) Four token clusters promoted from the refined ISpy Live styles (ispymyai/lib/live-home.css, ISPY-LIVE-01d ship) into the universal A1 token sheet, so AgentMaps card-style pages (Home/Pathways/Settings) and ISpy-density surfaces (Live) draw from one vocabulary. See docs/AgentMaps_Design_System_Harmonization_Audit.md. ─────────────────────────────────────────────────────────────────────────── */ /* (i) TYPOGRAPHY SCALE — theme-independent. Semantic intent (NOT a strict ladder; values match the shipped ISpy + A1 v3 literals they replace): --font-xs labels · chip text · sparse meta (live-home .r-surface / .fp-tile .lbl) --font-sm dense row text · secondary meta (live-home .ispy-sub / A1 sub-card meta) --font-md primary body · list rows (A1 v3 row text) --font-lg card titles (A1 v3 CardShell titles) --font-xl tile values (live-home .fp-tile .count) --font-headline page H1 (A1 v3 PageHeader serif H1) Density-aware components reach for xs/sm; aggregate cards reach for md/lg/xl. */ --font-xs: 10.5px; --font-sm: 11.5px; --font-md: 13px; --font-lg: 14.5px; --font-xl: 18px; --font-headline: 28px; /* (ii) CHIP BASELINE — a quiet capsule label. Geometry is theme-independent; the color tokens reference --eu-* surface vars, so a .chip flips with the active theme automatically. Synthesized from live-home .r-surface / .wf-tag / .amini — NOTE the promoted baseline is a 999px CAPSULE (vs ISpy .wf-tag's scoped 4px rect, which stays in .live-home). Consume via the .chip utility in v3.css. Use .chip for capsule labels that need visual quiet vs the heavier .badge. */ --chip-text: var(--font-xs); --chip-padding-y: 2px; --chip-padding-x: 7px; --chip-radius: 999px; /* capsule */ --chip-border-w: 1px; --chip-border-color: var(--eu-border); --chip-bg: var(--eu-panel-2); --chip-bg-active: var(--eu-accent-soft); --chip-text-active: var(--eu-accent); /* (iii) ROW SEPARATOR vs CARD OUTLINE — the ISpy "subtle row separator". Choice rule: use --row-separator inside lists of HOMOGENEOUS items (a stream, a feed). Use a card outline when content is a coherent UNIT (a metric tile, a dashboard widget). DO NOT mix outlines + separators in the same component. */ --row-separator: 1px solid var(--eu-border); --row-padding-y: 7px; --row-padding-x: 10px; /* (iv) SMALL-ICON CONVENTION — the live-home 14px stroke-current glyph, sanctioned as a size variant alongside the existing 18px NavIcon default. Use icon-sm for chips + dense row glyphs; icon-md for the nav rail; icon-lg for page-header chrome. (See primitives.tsx:NavIcon size prop.) */ --icon-sm: 14px; --icon-md: 18px; --icon-lg: 22px; } /* Explicit dark (equals the bare :root default; lets the v3 toggle flip back). */ :root[data-theme="dark"] { --eu-bg: #0b0f17; --eu-panel: #131a26; --eu-panel-2: #1a2233; --eu-panel-3: #20293c; --eu-border: #243046; --eu-border-strong: #324363; --eu-border-dashed: #324363; --eu-text: #e6ecf5; --eu-muted: #8a96ab; --eu-muted-2: #647186; --eu-accent: #6ea8fe; --eu-accent-2: #8ee0c1; --eu-accent-soft: rgba(110,168,254,0.10); --eu-accent-soft-2: rgba(110,168,254,0.18); --eu-accent-ring: rgba(110,168,254,0.40); --eu-good: #6cd49a; --eu-warn: #f5b76b; --eu-bad: #ef6b6b; --eu-neutral: #647186; --eu-shadow-pop: 0 8px 24px -6px rgba(0,0,0,0.6), 0 2px 6px -2px rgba(0,0,0,0.4); --eu-shadow-orb: 0 0 14px rgba(110,168,254,0.4); --badge-claude: #d97757; --badge-gemini: #8ab4f8; --badge-breeze: #ff7a59; --badge-openai: #1bbf91; --badge-perplexity: #20b8cd; --eu-sand: #e0cfa0; --eu-sand-shadow: #b89e6b; --code-bg: #0d121d; --code-border: #1c2538; } /* Light counterparts (v3 design work — locked in 00-theme-contract.html). */ :root[data-theme="light"] { --eu-bg: #ffffff; --eu-panel: #f6f8fc; --eu-panel-2: #eef2f8; --eu-panel-3: #e3eaf4; --eu-border: #d7dfeb; --eu-border-strong: #b4c0d3; --eu-border-dashed: #b4c0d3; --eu-text: #0b0f17; /* 21:1 on white — AAA */ --eu-muted: #4d5a72; /* ~7.5:1 — AA / AAA */ --eu-muted-2: #7c8aa3; /* ~3.7:1 — UI / decorative only */ --eu-accent: #2660d6; /* ~6.7:1 on white */ --eu-accent-2: #0f8a6c; /* ~4.6:1 on white */ --eu-accent-soft: rgba(38,96,214,0.08); --eu-accent-soft-2: rgba(38,96,214,0.14); --eu-accent-ring: rgba(38,96,214,0.30); --eu-good: #0c9466; /* ~4.7:1 */ --eu-warn: #b16a0c; /* ~4.6:1 */ --eu-bad: #c43030; /* ~5.0:1 */ --eu-neutral: #7c8aa3; --eu-shadow-pop: 0 8px 24px -6px rgba(15,23,42,0.10), 0 2px 6px -2px rgba(15,23,42,0.06); --eu-shadow-orb: 0 0 14px rgba(38,96,214,0.22); --badge-claude: #c2410c; --badge-gemini: #1a73e8; --badge-breeze: #d8523c; --badge-openai: #0a8462; --badge-perplexity: #0e7c8c; --eu-sand: #a08960; --eu-sand-shadow: #6d5a3a; --code-bg: #f3f5fa; --code-border: #d7dfeb; /* HARMONIZATION-01 light counterparts */ --eu-border-2: #e8edf5; --wf-q2c: #2660d6; --wf-c2r: #0f8a6c; --wf-h2r: #b16a0c; --wf-p2p: #0e7c8c; --wf-cs: #a21caf; --wf-r2r: #5b21b6; --wf-dev: #4f46e5; --wf-pm: #e11d6b; --wf-gen: #7c8aa3; --st-auto: #5b21b6; --st-assisted: #2660d6; --st-manual: #7c8aa3; --ws-think: #a08960; --ws-search: #2660d6; --ws-read: #4d5a72; --ws-write: #b16a0c; --ws-tool: #0f8a6c; --ws-gen: #c2410c; --ws-blocked: #c43030; --ws-done: #0c9466; } /* Native form controls / scrollbars follow the active theme. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }