/* ============================================================ BASE TOKENS (theme-agnostic) ------------------------------------------------------------ Semantic aliases, state colors, effect tokens, type and radius scale. These are shared across ALL themes and resolve against the active theme's primitives (themes.css) at use-time via var(). Visual language is selected by [data-visual] on , set centrally in head.html from visualKey. elevated is the default; glass is the frosted language (paired with themeKey glass). Components must consume SEMANTIC / EFFECT / STATE tokens (--fg-*, --bg-*, --border-*, --bb-surface-*, shadows, --bb-r*) — never raw brand primitives, so a theme or visual switch cascades. Load order: themes.css -> tokens-base.css -> company-ui.css ============================================================ */ :root, [data-visual="elevated"] { /* Semantic foreground / background / border aliases */ --fg-1: var(--bb-black); --fg-2: var(--bb-ink-80); --fg-3: var(--bb-ink-60); --fg-inverse: var(--bb-white); --fg-accent: var(--bb-blue); --fg-action: var(--bb-accent); --fg-highlight: var(--bb-yellow); --bg-1: var(--bb-white); --bg-2: var(--bb-paper); --bg-3: var(--bb-lightblue-25); --bg-dark: var(--bb-blue); --bg-darker: var(--bb-black); --border-1: var(--bb-ink-10); --border-2: var(--bb-ink-20); --border-strong: var(--bb-ink-60); /* Legacy aliases — all resolve to semantic tokens so they follow a theme */ --bb-bg: var(--bg-2); --bb-line: var(--border-1); --bb-text: var(--fg-1); --bb-text-2: var(--fg-2); --bb-text-3: var(--fg-3); --bb-muted: var(--fg-3); --bb-surface: var(--bg-1); --bb-surface-2: color-mix(in srgb, var(--border-1) 40%, var(--bg-1)); --bb-bg-2: var(--bb-surface-2); --bb-bg-subtle: var(--bb-surface-2); --bb-border: var(--bb-line); --bb-text-1: var(--bb-text); --bb-hint: var(--fg-2); --bb-input-readonly-bg: var(--bb-surface-2); /* Semantic states (not brand primitives — hex is allowed here) */ --bb-danger-bg: #fef2f2; --bb-danger-text: #dc2626; --bb-danger-border: #fecaca; --bb-success-bg: #f0fdf4; --bb-success-text: #16a34a; --bb-success-text-strong: #166534; --bb-success-border: #bbf7d0; /* Battery/buffer discharge (energy out) — data colour, matches the GUI demo (#e8704a). */ --bb-discharge-text: #e8704a; --bb-green: var(--bb-success-text); --bb-danger: var(--bb-danger-text); /* Schedule timeline lane palette (indexed by asset discovery order) */ --bb-lane-0: var(--bb-success-text); --bb-lane-1: var(--bb-accent); --bb-lane-2: #8b5cf6; --bb-lane-3: #d97706; --bb-lane-4: #0891b2; --bb-lane-5: #be185d; /* Battery / buffer flow direction — the prototype's --bat-charge / --bat-discharge. Charging (energy in) green, discharging (energy out) the functional heat hue. */ --bb-series-charge: #1f8a5e; --bb-series-discharge: var(--bb-heat); /* Semantic per-asset dispatch colours (keyed by asset type/identity, not stack index) — matches the prototype's ELECTRICAL-POWER legend: heat pump dark navy, battery light blue, CHP green, base load neutral grey. The cost-of-heat / Sankey charts use their own --bb-series-* set below: the prototype deliberately colours CHP differently in the two families (green in the electrical stack, lightblue as a heat source), so they cannot share one token. */ --bb-asset-heatpump: var(--bb-blue); --bb-asset-chp: var(--bb-series-charge); --bb-asset-boiler: var(--bb-heat); --bb-asset-battery: var(--bb-lightblue); --bb-asset-baseload: var(--bb-ink-40); /* production the grid meter sees that no metered asset explains — hatched-looking warm tint, distinct from CHP green */ --bb-asset-unmetered: #d9b26f; /* Heat-source data series (cost-of-heat lines, supply->demand Sankey ribbons) — the prototype's --asset-hp / --asset-chp / --asset-boiler. */ --bb-series-hp: var(--bb-blue); --bb-series-chp: var(--bb-lightblue); --bb-series-boiler: var(--bb-heat); --bb-warn-bg: #fef3c7; --bb-warn-bg-2: #fffbeb; --bb-warn-text: #92400e; --bb-warn-border: #fcd34d; --bb-warn-border-2: #fed7aa; --bb-info-bg: #ede9fe; --bb-info-bg-2: #f3e8ff; --bb-info-text: #5b21b6; /* Categorical / chart colours (not brand — hex is allowed here) */ --bb-chart-teal: #0d9488; --bb-chart-teal-bright: #2dd4bf; --bb-chart-orange: #ea580c; --bb-chart-orange-bright: #f97316; --bb-chart-orange-soft: #fb923c; --bb-chart-orange-text: #c2410c; --bb-chart-purple: #7c3aed; --bb-chart-indigo: #6366f1; --bb-chart-indigo-text: #4f46e5; --bb-chart-indigo-strong: #4338ca; --bb-chart-indigo-focus: #818cf8; --bb-chart-indigo-bg: #e0e7ff; --bb-chart-sky: #38bdf8; --bb-chart-sky-bright: #7dd3fc; --bb-chart-sky-text: #0369a1; --bb-chart-sky-bg: #e0f2fe; --bb-chart-amber: #ca8a04; --bb-chart-pink: #9d174d; --bb-chart-green: #10b981; --bb-chart-green-text: #059669; --bb-chart-green-strong: #047857; --bb-chart-green-border: #6ee7b7; --bb-chart-green-bg-2: #ecfdf5; --bb-chart-green-bg-3: #d1fae5; --bb-chart-green-bg-4: #dcfce7; --bb-neutral-disabled: var(--bb-ink-40); /* Effect tokens — visual-language slots (elevated = today's look). Page fill matches the source HTML demo: body and card are the SAME white (var(--bg-1), same token --bb-surface-fill below uses) — cards are separated from the page by their hairline border + shadow alone, not by a background-color contrast. --bb-bg / --bb-paper stay defined and available for surfaces that deliberately want the warmer tone (e.g. .cl-chat-body); only the page shell's own fill moved off of it. */ --bb-page-fill: var(--bg-1); --bb-surface-fill: var(--bg-1); --bb-surface-blur: none; --bb-control-fill: var(--bg-1); --bb-focus-ring: 0 0 0 4px color-mix(in srgb, var(--bb-accent) 15%, transparent); /* Shadows — cool brand-blue tint (never warm black) */ --bb-shadow-sm: 0 1px 2px color-mix(in srgb, var(--bb-blue) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--bb-black) 4%, transparent); --bb-shadow-md: 0 4px 12px color-mix(in srgb, var(--bb-blue) 10%, transparent), 0 2px 4px color-mix(in srgb, var(--bb-black) 4%, transparent); --bb-shadow-lg: 0 12px 32px color-mix(in srgb, var(--bb-blue) 14%, transparent), 0 4px 10px color-mix(in srgb, var(--bb-black) 6%, transparent); --bb-shadow-inset: inset 0 0 0 1px color-mix(in srgb, var(--bb-blue) 10%, transparent); /* Radius scale */ --bb-r: 16px; --bb-r-sm: 12px; --bb-r-xs: 10px; /* Typography weights */ --bb-weight-light: 300; --bb-weight-regular: 400; --bb-weight-medium: 500; --bb-weight-bold: 700; /* Letter-spacing scale */ --bb-track-tight-1: -0.01em; --bb-track-tight-2: -0.005em; --bb-track-loose-1: 0.02em; --bb-track-loose-2: 0.04em; --bb-track-caps: 0.08em; /* Font families */ --bb-font-sans: "Montserrat", sans-serif; --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Radius scale additions (cl-v2 migration) */ --bb-r-2xs: 8px; --bb-r-field: 4px; --bb-r-pill: 999px; /* Hexagon basisvorm — the brand shape, used for small "led" marks */ --bb-hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Motion */ --bb-ease: cubic-bezier(0.2, 0, 0, 1); --bb-dur-fast: 120ms; --bb-dur-base: 200ms; /* Signature floating-tile elevation — deeper / more lifted than --bb-shadow-lg */ --bb-shadow-tile: 0 12px 32px -10px color-mix(in srgb, var(--bb-blue) 26%, transparent), 0 3px 10px color-mix(in srgb, var(--bb-black) 7%, transparent); /* Scrims (modal backdrops) */ --bb-scrim: color-mix(in srgb, var(--bb-blue) 42%, transparent); --bb-scrim-soft: color-mix(in srgb, var(--bb-blue) 28%, transparent); --bb-scrim-strong: color-mix(in srgb, var(--bb-blue) 30%, transparent); /* Asset-health scheme — 3-state (ok/warn/crit), distinct from the --bb-success-*, --bb-warn-*, --bb-danger-* message-banner trio above. -tint = fill behind a badge; -hatch = same hue at the opacity a 45° stripe needs to stay visible over a coloured bar. */ --bb-status-ok: #1f8a5e; --bb-status-ok-tint: color-mix(in srgb, var(--bb-status-ok) 12%, transparent); --bb-status-ok-hatch: color-mix(in srgb, var(--bb-status-ok) 45%, transparent); --bb-status-warn: #c2502c; --bb-status-warn-tint: color-mix(in srgb, var(--bb-heat, #e8704a) 14%, transparent); --bb-status-crit: #b23b1e; --bb-status-crit-tint: color-mix(in srgb, var(--bb-heat, #e8704a) 16%, transparent); --bb-status-crit-hatch: color-mix(in srgb, var(--bb-status-crit) 45%, transparent); --bb-alarm-dot: #e23b1e; /* Alarm severity ladder — 4 graded steps, ordered blue -> gold -> orange -> red */ --bb-sev-notice: #2f6690; --bb-sev-notice-tint: color-mix(in srgb, var(--bb-sev-notice) 12%, transparent); --bb-sev-warning: #b07d12; --bb-sev-warning-tint: color-mix(in srgb, var(--bb-sev-warning) 14%, transparent); --bb-sev-serious: #c2502c; --bb-sev-serious-tint: color-mix(in srgb, var(--bb-sev-serious) 14%, transparent); --bb-sev-critical: #b23b1e; --bb-sev-critical-tint: color-mix(in srgb, var(--bb-sev-critical) 14%, transparent); /* Chart chassis — shared geometry every lock-step chart tile reads */ --bb-hour-w: 38px; --bb-chart-gutter-l: 116px; --bb-chart-gutter-r: 26px; --bb-chart-pad-b: 26px; --bb-chart-fs: 12px; /* Component knobs */ --bb-chat-w: 380px; --bb-set-tile-ratio: 1.16; --bb-set-rail-gap: 12px; --bb-hdr-shift: 48px; --bb-subnav-bg: linear-gradient(135deg, var(--bb-white), var(--bb-lightblue-50)); --bb-subnav-fg: var(--bb-blue); } @media (max-width: 720px) { :root { --bb-chart-gutter-l: 100px; } } @media (max-width: 440px) { :root { --bb-chat-w: 100vw; } } /* Frosted language. Same semantic aliases as elevated; only effects (and the page wash) change so widgets frost without new CSS classes. Match both axes: HTMX must not be required to set data-visual for glass. */ [data-visual="glass"], [data-theme="glass"] { --bb-page-fill: radial-gradient(900px 520px at 0% -10%, color-mix(in srgb, var(--fg-action) 70%, transparent), transparent 58%), radial-gradient(800px 480px at 100% 0%, color-mix(in srgb, var(--fg-accent) 55%, transparent), transparent 52%), linear-gradient(165deg, var(--bg-3) 0%, var(--bg-2) 38%, color-mix(in srgb, var(--fg-action) 22%, var(--bg-2)) 100%); --bb-surface-fill: color-mix(in srgb, var(--bg-1) 38%, transparent); --bb-surface-blur: blur(22px) saturate(1.8); --bb-control-fill: color-mix(in srgb, var(--bg-1) 55%, transparent); --bb-surface: var(--bb-surface-fill); --bb-surface-2: color-mix(in srgb, var(--bg-1) 58%, transparent); --bb-bg-2: var(--bb-surface-2); --bb-bg-subtle: var(--bb-surface-2); --border-1: color-mix(in srgb, var(--fg-inverse) 62%, transparent); --bb-line: var(--border-1); --bb-shadow-sm: 0 8px 32px color-mix(in srgb, var(--fg-accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg-inverse) 65%, transparent); --bb-shadow-md: 0 16px 48px color-mix(in srgb, var(--fg-accent) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg-inverse) 55%, transparent); --bb-shadow-lg: 0 24px 64px color-mix(in srgb, var(--fg-accent) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg-inverse) 50%, transparent); --bb-r: 20px; --bb-r-sm: 14px; --bb-r-xs: 12px; --bb-r-2xs: 10px; --bb-r-field: 6px; /* Deeper counterpart to --bb-shadow-lg's glass treatment — same bigger-blur / inset-highlight shape as the sm/md/lg trio above, scaled up to match --bb-shadow-tile's "more lifted than lg" role in elevated mode. Any surface using --bb-shadow-tile picks this up automatically. */ --bb-shadow-tile: 0 32px 80px color-mix(in srgb, var(--fg-accent) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--fg-inverse) 45%, transparent); } /* Warm wash for ember — solid elevated cards on a dusk gradient, no frost. */ [data-theme="ember"] { --bb-page-fill: radial-gradient(820px 480px at 0% -8%, color-mix(in srgb, var(--fg-action) 42%, transparent), transparent 55%), radial-gradient(700px 420px at 100% 8%, color-mix(in srgb, var(--fg-highlight) 38%, transparent), transparent 50%), linear-gradient(168deg, var(--bg-3) 0%, var(--bg-2) 48%, color-mix(in srgb, var(--fg-accent) 18%, var(--bg-2)) 100%); } /* cl-v2 — per-asset dispatch colours only. No --bb-page-fill override: the source HTML demo is explicitly flat/no-gradient, so cl-v2 inherits the shared default. Everything else this block used to set now lives in the base :root (the prototype's own values), so only the one deliberate difference remains: cl-v2 paints CHP as a heat source (lightblue) rather than with the electrical stack's green. */ [data-theme="cl-v2"] { --bb-asset-chp: var(--bb-series-chp); }