/* ============================================================ Blueprint Component Kit — tokens/contract.css The kit's semantic tokens. Components reference THESE names only. A client theme (themes/*.css) re-points them to the client's brand. Values here are neutral defaults, so the kit renders sanely with no theme applied. Same idea as the OL design system's two-layer tokens, but plain CSS and re-skinned per client instead of baked to OL brand. ============================================================ */ :root { /* --- Brand — overridden by the client theme --- */ --bp-accent: #4b5563; /* client brand / primary */ --bp-accent-strong: #374151; /* darker brand: hover, press */ --bp-accent-tint: #eef2f6; /* light brand wash: highlights */ --bp-accent-foreground: #ffffff; /* text / icon on accent */ /* --- Agent message surface (the dark popover / tooltip) --- */ --bp-agent-bg: #1f2430; --bp-agent-foreground: #f7f8fa; --bp-agent-muted: #9aa1ad; /* the agent name, secondary text */ /* --- Light card surface (assistant cards, checklists) --- */ --bp-surface: #ffffff; --bp-surface-foreground:#111827; --bp-surface-muted: #6b7280; --bp-border: rgba(17, 24, 39, .08); /* --- Chat (conversation bubbles + fields) --- */ --bp-bubble-bg: #fafafa; /* the bot output bubble */ --bp-bubble-border: #e4e4e7; --bp-error: #dc6803; /* field error (semantic, not brand) */ /* --- Overlay / spotlight (soft focus, two layers) --- The background between the screenshot and the agent is built from a light tint + blur outside a sharp cutout, plus a radial shade. Much softer than a flat scrim. See kit/overlay.css for the three modes. */ --bp-overlay-tint: rgba(16, 20, 28, .04); /* 4% darkening outside the cutout */ --bp-overlay-blur: 4px; /* uniform blur outside the cutout */ --bp-shade: rgba(11, 15, 23, .50); /* the dark end of every radial shade */ --bp-spotlight-pad: 8px; /* halo around the highlighted target */ --bp-spotlight-radius: 14px; --bp-spotlight-feather: 22px; /* soft cutout edge, forgiving of a few px */ --bp-spotlight-scrim: rgba(16, 20, 28, .45); /* legacy slice-01 spotlight only */ --bp-scrim: var(--bp-overlay-tint); /* back-compat alias */ /* --- Checklist + progress (Pattern 5) --- */ --bp-on-accent-muted: rgba(255, 255, 255, .64); /* secondary text on the accent header (the role line) */ --bp-progress-track: rgba(0, 0, 0, .16); /* unfilled progress, sits on the accent header */ --bp-progress-fill: #ffffff; /* filled progress; the count chip text uses --bp-accent */ --bp-done-foreground: #a4a7ae; /* completed item label, struck through */ --bp-dash: #c8c4c0; /* the dashed ring on an unchecked item */ --bp-border-strong: rgba(17, 24, 39, .14); /* panel outline + input borders (crisper than --bp-border) */ /* --- Shape + type (themeable) --- */ --bp-radius-lg: 24px; /* the card / header / overall component */ --bp-radius: 12px; --bp-radius-sm: 8px; --bp-font: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; /* --- Elevation --- Soft card shadow matched to the Figma effect stack (three layers, 0A0D12 at low alpha). Much gentler than a single hard drop. */ --bp-shadow: 0 12px 16px -4px rgba(10, 13, 18, .08), 0 4px 6px -2px rgba(10, 13, 18, .03), 0 2px 2px -1px rgba(10, 13, 18, .04); /* Hairline divider under a plain (white) header, separating it from body */ --bp-header-divider: rgba(17, 24, 39, .06); /* ============================================================ NAMED KNOBS — the dials we point at instead of describing. Added 2026-06-23. Append-only: nothing currently rendered references these yet, so adding them changes no pixels. Migrate components onto them incrementally (start with whatever's in flight). Once a property reads from a knob, a tweak is "one step up" instead of a sentence. Optical one-offs are allowed; the scale is the default, not a law. See SCALE-AND-VOCAB.md. ============================================================ */ /* --- Radius: fill out the existing scale --- */ --bp-radius-btn: 16px; /* buttons + things sized like a button (dropdown trigger, open menu) */ --bp-radius-pill: 9999px; /* fully round: pills, avatars-as-square, count chips */ /* --- Spacing: 4px base. Dominant real values are 8 and 12. --- Reach for a step before a raw px value. 14/13/11/6/5px in the kit are optical exceptions, not scale members; leave those as-is. */ --bp-space-1: 4px; --bp-space-2: 8px; /* the kit's default gap */ --bp-space-3: 12px; --bp-space-4: 16px; --bp-space-5: 20px; --bp-space-6: 24px; --bp-space-8: 32px; /* --- Elevation scale: --bp-shadow above is the card (raised). --- These name the other depths already used ad hoc across the kit. */ --bp-shadow-press: 0 1px 2px rgba(10, 13, 18, .08); /* pressed / active, sits flatter */ --bp-shadow-control: 0 2px 4px -1px rgba(10, 13, 18, .08); /* buttons (was --btn-shadow) */ --bp-shadow-pop: 0 2px 8px rgba(10, 13, 18, .22), 0 0 0 1px rgba(10, 13, 18, .04); /* popover / floating menu, harder edge */ /* --- Motion: three durations, three easings. --- The kit currently spreads across ~11 durations and 5 beziers; this collapses them to a named set so "feel" is a knob. */ --bp-dur-fast: .12s; /* state flips: hover bg, press */ --bp-dur-base: .18s; /* default transition */ --bp-dur-slow: .28s; /* enters / fades of larger surfaces */ --bp-dur-reveal: .38s; /* width reveals (icon/label expand) */ --bp-ease-standard: cubic-bezier(.2, .8, .2, 1); /* the kit's house ease-out */ --bp-ease-emphasized: cubic-bezier(.22, 1, .36, 1); /* a touch more snap on enters */ --bp-ease-spring: cubic-bezier(.68, -0.55, .27, 1.55); /* overshoot, sparingly (motifs) */ /* Snappy build-out for conversational entrances (chat rows, bubbles, dividers, answer widgets). One quick 0.3s move on an ease-in-out-back curve, so it anticipates on the way in and overshoots on the way out — a little bounce at both ends. */ --bp-dur-snap: .3s; --bp-ease-back: cubic-bezier(.68, -0.6, .32, 1.6); /* ease-in-out-back: bounce in + out */ }