/* ============================================================ simplechat-tokens.css — Claren Health design tokens Single source of truth for the patient-facing chat surface (chat_base.html) and the onboarding page (auth_base.html). Sourced from the design handoff at .context/attachments/simplified-ui-handoff/.../colors_and_type.css and chat-variation-a/colors_and_type.css. Values match precisely — this file just consolidates them so onboarding and chat share one declaration. ============================================================ */ :root { /* ── Brand palette — main scheme (greens) ───────────────────────────── */ --claren-hero-bg: #113c2a; --claren-charcoal: #113c2a; /* alias: legacy chat usage */ --claren-muted-green: #217c4d; --claren-olive: #217c4d; /* alias */ --claren-sage: #a4cab8; --claren-pale-green: #d4e5db; --claren-sage-tint: rgba(164, 202, 184, 0.15); /* WCAG AA 1.4.3: --claren-gray (#918c89) is ~3.1:1 on white — fails AA for body text. --claren-text-muted lifts to ~5.7:1 while keeping a muted feel. Use for any visible muted/secondary text. */ --claren-text-muted: #6c6c6c; /* ── Accents (treatment-options legend, etc.) ───────────────────────── */ --claren-teal: #2ec4b6; --claren-teal-deep: #1f6a63; --claren-teal-tint: #d5f3f0; --claren-coral: #ff8356; --claren-coral-deep: #ff632a; --claren-coral-tint: #ffd3c3; --claren-gold: #e3bf02; --claren-gold-deep: #957204; --claren-gold-tint: #f5edca; /* Blue accent pair (drawer V2 placeholder tint). Values match the SDR stylesheets' deep blue. */ --claren-ice: #ecf2ff; --claren-deep-blue: #123167; /* ── Neutrals ───────────────────────────────────────────────────────── */ --claren-cream: #fefefe; --claren-cream-warm: #faf7f2; --claren-ink: #121110; --claren-gray-dark: #47403a; --claren-gray: #918c89; --claren-gray-mid: #a7a7a7; --claren-gray-faint: #f4f9f6; /* Honest hairline neutral — the lightest named gray in the system. Backs --border-hairline; use it (or the alias) for 1px dividers, control borders, and inset rules. Not for text (fails AA). */ --claren-gray-light: #d9d9d9; /* ── Semantic ───────────────────────────────────────────────────────── */ --claren-error: #c26b5b; --claren-error-bg: #fce4ec; --claren-success: #217c4d; --claren-success-bg: #e8f5e9; /* ── Foreground / background semantics ──────────────────────────────── */ --fg1: var(--claren-hero-bg); /* primary text */ --fg2: var(--claren-gray-dark); /* secondary text */ --fg3: var(--claren-gray); /* muted / meta */ --fg-on-dark: var(--claren-cream); --bg1: var(--claren-cream); /* page surface */ --bg2: var(--claren-cream-warm); /* sidebar / inset */ --bg3: var(--claren-gray-faint); /* subtle panel */ --bg-dark: var(--claren-hero-bg); --border-soft: var(--claren-sage); --border-hairline: var(--claren-gray-light); /* ── On-dark surface ────────────────────────────────────────────────── */ /* The video-journey screens (1a, 1b, 1e, 1g) live on a near-black green rather than cream, so the light-surface semantics above invert. These are system tokens, not 1a's: four screens share them. The alpha values are FLOORS, measured over --claren-video-surface with the same maths axe uses. The design handoff's own on-dark scale goes lower — rgba(254,254,254,.32) measures 2.80:1 and rgba(164,202,184,.55) measures 3.53:1, both failing WCAG AA for the informational text they were specified for. Do not reintroduce those values here. --on-dark-muted 5.41:1 --on-dark-sage 5.28:1 Track and border tokens are non-text and are exempt from that floor. */ --claren-video-surface: #0d2e21; --on-dark-strong: var(--claren-cream); --on-dark-body: rgba(254, 254, 254, 0.78); --on-dark-muted: rgba(254, 254, 254, 0.55); --on-dark-sage: rgba(164, 202, 184, 0.75); --on-dark-border-interactive: rgba(164, 202, 184, 0.4); --on-dark-border-inert: rgba(164, 202, 184, 0.3); --on-dark-track: rgba(254, 254, 254, 0.2); --on-dark-track-sage: rgba(164, 202, 184, 0.2); /* ── The SAME scale, measured over --claren-hero-bg (CLA-509) ───────── The floors above were measured over --claren-video-surface only. The brand green is a different surface and a materially lighter one, so the ratios are NOT transferable and must not be assumed: #0d2e21 (L .0215) #113c2a (L .0352) --on-dark-muted 5.41:1 4.84:1 --on-dark-sage 5.28:1 4.59:1 --on-dark-body ~9.0:1 8.04:1 border-inert (sage .30) 1.99:1 1.91:1 border-interactive (.40) 2.46:1 2.36:1 sage .55 3.32:1 3.19:1 The text floors survive on the brand surface, but with about a tenth of a point of headroom — so nothing on #113c2a may go dimmer than --on-dark-muted / --on-dark-sage, and a caption there is 10px, not the handoff's 9.5px. The border tokens are exempt from the 3:1 floor where the border is decorative and something else carries the meaning — on 1a's chapter strip the fill and the adjacent label both do. Screen 1c's filmstrip is the case where that stops being true: its thumbnail cells are permanently empty (`thumbnail_bundle_filename: ''`), so the border is the whole component. Hence a token that clears 1.4.11 on the brand surface. */ --on-dark-border-brand: rgba(164, 202, 184, 0.55); /* --focus-ring-on-dark is a near-white ring, which is invisible on a LIGHT-FILL control sitting on a dark surface — 1c's Begin button is #FEFEFE, so the ring and the button are the same colour. Two layers: an inner band in the surface colour separates the button from the outer ring. 1a's .vj-button--light has the same latent problem inside its error overlay and picks this up for free. */ --focus-ring-on-light-fill: 0 0 0 2px var(--claren-hero-bg), 0 0 0 5px rgba(254, 254, 254, 0.9); /* Three named cases, three rings, three measurements — because the second one is a trap for the third. --focus-ring-on-light-fill solves a LIGHT FILL on a DARK SURROUND (1c's #FEFEFE Begin button on #113c2A), so its OUTER band is near-white and reads against the dark page. Screen 1b's survey sheet is #FEFEFE throughout, so on it that outer band disappears entirely and the ring silently degrades to its 2px inner green band — it would look "fine" while being half the designed indicator, and nothing would flag it. axe cannot detect focus indicators at all. This is the third case: a control on a LIGHT SURFACE. A dark ring, because the surface is the light thing. Measured over the sheet's #FEFEFE (L .9911), compositing the alpha against it first: alpha .55 → #7C9389 (L .2696) → 3.26:1 alpha .65 → #648074 (L .1941) → 4.27:1 ← used WCAG 2.4.11 wants 3:1, so .55 — the value the plan proposed — passes. It is taken to .65 anyway: .26 of a point is the same thin margin this file already flags on --on-dark-muted, and a focus ring is the one indicator axe cannot check, so nothing would catch it drifting under. Still reads as a ring rather than a second border, because the sheet's own option outline is 1px --claren-sage and this is 3px of near-brand green outside it. */ --focus-ring-on-light-surface: 0 0 0 3px rgba(17, 60, 42, 0.65); /* ── Type families ──────────────────────────────────────────────────── */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Lora", "Source Serif 4", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Legacy chat aliases — keep until existing references migrate */ --font-heading: var(--font-display); --font-body: var(--font-sans); --font-ui: var(--font-sans); /* ── Radii ──────────────────────────────────────────────────────────── */ /* DS scale: 4 / 6 / 8 / 12 / 20 / 28 / 999 */ --radius-xs: 4px; --radius-sm: 6px; /* small chips, alert badges, narrow controls */ --radius: 8px; /* default — buttons, inputs */ --radius-md: 12px; --radius-lg: 20px; /* cards, large panels */ --radius-xl: 28px; --radius-pill: 999px; /* ── Shadows ────────────────────────────────────────────────────────── */ /* Green-tinted per Claren DS — rgba(17, 60, 42, …) is --claren-hero-bg (#113c2a) expressed as rgb so the alpha works. Do not substitute back to var(--claren-hero-bg) inside the rgba. */ --shadow-sm: 0 1px 2px rgba(17, 60, 42, 0.06); --shadow: 0 4px 12px rgba(17, 60, 42, 0.10); /* default cards */ --shadow-md: 0 8px 24px rgba(17, 60, 42, 0.12); --shadow-lg: 0 18px 48px rgba(17, 60, 42, 0.16); --shadow-xl: 0 20px 60px rgba(17, 60, 42, 0.16); --shadow-focus: 0 0 0 3px rgba(33, 124, 77, 0.18); /* --shadow-focus measures 1.19:1 over --claren-video-surface — invisible, and axe cannot detect a missing focus indicator, so nothing would go red. WCAG 2.4.11 wants 3:1; this measures 12.02:1. Any control on an on-dark surface uses this instead. */ --focus-ring-on-dark: 0 0 0 3px rgba(254, 254, 254, 0.9); /* ── Overlays / scrims ──────────────────────────────────────────────── */ /* Green-tinted, never gray (same rule as shadows — rgb is --claren-hero-bg). Two grades: --overlay-scrim light dim for inline/transient surfaces (e.g. voice-mode soft scrim). --overlay-scrim-strong modal-grade backdrop behind a focused surface that traps interaction (mobile off-canvas sidebar, drawer bottom-sheet). */ --overlay-scrim: rgba(17, 60, 42, 0.10); --overlay-scrim-strong: rgba(17, 60, 42, 0.35); /* ── Motion ─────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms; /* Legacy shorthand transitions — kept for existing references */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; } /* ── Bot-lead italic accent (Phase 3 streaming) ─────────────────────── */ /* First sentence of a streaming bot reply renders in Lora italic. The stream-time DOM post-processor in chat.js wraps the first sentence in after sentence-boundary detection. */ .bot-lead { font-family: var(--font-display); font-style: italic; } /* ── DOB pill primitive ─────────────────────────────────────────────── */ /* Three-part date-of-birth input (MM / DD / YYYY). Markup lives in the shared partial `templates/llmchat/partials/_dob_pill.html`; paste parsing + auto-advance live in `static/js/dob.js`. Used by both the onboarding form and the chat composer's `structured` mode. */ .dob-input { display: flex; align-items: flex-end; gap: 8px; } .dob-input__part { display: flex; flex-direction: column; } .dob-input__sublabel { font-size: 0.75rem; font-weight: 500; color: var(--claren-text-muted); margin-bottom: 4px; } .dob-input__field { padding: 12px 12px; border: 1px solid var(--claren-sage); border-radius: var(--radius); font-family: var(--font-sans); font-size: 1rem; color: var(--claren-hero-bg); background: #ffffff; text-align: center; transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out; } .dob-input__field--mm, .dob-input__field--dd { width: 64px; } .dob-input__field--yyyy { width: 96px; } .dob-input__field:focus { outline: none; border-color: var(--claren-muted-green); box-shadow: var(--shadow-focus); } .dob-input__field::placeholder { color: var(--claren-gray); letter-spacing: 0.05em; } .dob-input__sep { color: var(--claren-gray); font-size: 1.25rem; padding-bottom: 10px; user-select: none; }