/* Design tokens — v0.3, restyled to match docs/specs/Taji_Prototype_v2.jsx's warmer indigo/violet palette (was a Material Design 3-inspired palette from design/v2/* mockups). Every Taji component reads these vars; none hardcode a hex directly. See docs/specs/Taji_QI_Module_Web_Design_Spec.md §1 for the narrative spec this file implements. */ [data-theme="taji"] { /* §1.1 color — core roles, values from Taji_Prototype_v2.jsx's `const C` */ --brand-primary: #4b39ef; --brand-primary-container: #eceafe; --on-primary-container: #3629b5; --brand-secondary: #8174f3; --brand-secondary-container: #f3f1ff; --on-secondary-container: #6d5ee0; /* Violet is Taji's AI/agent identity accent (Taji Insights panel, chat bubbles, "Draft with Taji" affordances) — distinct from a plain surface so AI-authored content is always visually distinguishable from physician-authored content, per design spec §3.9. Was a separate teal family; the prototype's own AI-identity color is this violet tint, drawn from the same primary/secondary hue as var(--ai-gradient). */ --tertiary: #6d5ee0; --tertiary-container: #f0eefe; --on-tertiary: #ffffff; --on-tertiary-container: #4534d8; --ink: #140e38; --bg-canvas: #f1f0fa; --bg-card: #ffffff; --surface-container: #f1f5f9; --surface-container-low: #f8fafc; --surface-container-high: #e9ecf3; --surface-container-highest: #e2e8f0; --tint-1: rgba(75, 57, 239, 0.1); --tint-2: rgba(109, 94, 224, 0.08); --border-subtle: rgba(226, 232, 240, 0.6); --border-strong: #e2e8f0; --border-tint: #ded9fc; --border-tint-2: #cfc8fa; --text-primary: #0f172a; --text-body: #475569; --text-body-strong: #334155; --text-secondary: #64748b; --success: #22c55e; --success-text: #15803d; --warning: #f59e0b; --warning-text: #b45309; --critical: #ef4444; --critical-text: #b91c1c; --accent-fuchsia: #c026d3; --on-brand: #ffffff; /* Soft-badge tints (§3.8/§3.9 "light-tint-bg/saturated-text" pattern) — not in the core token table but still named, never inlined in Go. */ --success-tint: #f0fdf4; --warning-tint: #fffbeb; --critical-tint: #fef2f2; --warning-border: #fcd34d; --tab-track: var(--surface-container); /* Surfaces/text used across tabs added during Phases 6-8 — added here retroactively during the final QA pass after a hex-literal audit found them inlined directly in .templ files instead. */ --surface-subtle: var(--surface-container-low); --muted: #64748b; /* §3.3 True North secondary selected-chip text; §3.4 PDSA prediction block text — both read against the violet --tint-2 fill above. */ --tint-2-text: #4534d8; /* §3.2 rigor-banner text (design spec's method-fidelity callout) — reads against the primary --tint-1 fill. */ --rigor-text: #4b39ef; /* Chart-only per §1.1: retired as a text color (fails AA); it survives only as chart gridline/dot fills. */ --chart-gridline: #e2e8f0; /* Sidebar (--ink) foreground — inverse-surface/inverse-on-surface pair. */ --inverse-on-surface: #ffffff; /* AI-identity gradient (Taji_Prototype_v2.jsx's AI_GRAD) — logo tile, AI avatar fills, ChatBubble icon circle. */ --ai-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); /* §1.3 space / radius / elevation */ --space-1: 4px; --radius-card: 12px; --radius-inner: 8px; --radius-pill: 999px; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1); --hero-gradient: linear-gradient(120deg, #140e38 0%, #4b39ef 62%, #8174f3 100%); --hero-shadow: 0 8px 24px rgba(20, 14, 56, 0.22); } /* §4 focus state — visible everywhere, never `outline: none` without a replacement. Scoped to :focus-visible so mouse clicks don't show it. */ [data-theme="taji"] :focus-visible { outline: 2px solid #4b39ef; outline-offset: 2px; } /* Plain-CSS tooltip (shared.Tooltip) — replaces the DaisyUI `tooltip` class dependency with the same data-tip/::before hover-reveal mechanism DaisyUI itself used, restyled dark to match design/v2's inverse-surface palette. */ .tt { position: relative; } .tt::before { content: attr(data-tip); position: absolute; z-index: 50; padding: 4px 8px; border-radius: var(--radius-inner); background: var(--ink); color: var(--inverse-on-surface); font-size: 11px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); } .tt:hover::before, .tt:focus-within::before { opacity: 1; } .tt-bottom::before { bottom: auto; top: calc(100% + 6px); } .tt-left::before { left: auto; right: calc(100% + 6px); bottom: 50%; top: auto; transform: translateY(50%); } .tt-right::before { left: calc(100% + 6px); bottom: 50%; top: auto; transform: translateY(50%); } /* shared.ProgressBar re-skin — native , styled to match design/v2's track/fill look. --progress-color is set per-instance via inline style, read by both vendor pseudo-elements. */ progress { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-container-highest); border: none; } progress::-webkit-progress-bar { background: var(--surface-container-highest); border-radius: var(--radius-pill); } progress::-webkit-progress-value { background: var(--progress-color, var(--brand-primary)); border-radius: var(--radius-pill); } progress::-moz-progress-bar { background: var(--progress-color, var(--brand-primary)); border-radius: var(--radius-pill); } /* Styles the raw HTML goldmark renders from docs/user-guide.md (views/help) — plain element selectors, not utility classes, since the markdown converter has no notion of Tailwind and just emits bare

/

/