/* Alebex monitor UI — shared design tokens. Single source of truth for palette, type, spacing and base primitives across the status, docs, monitor and tools surfaces. Load this BEFORE each page's own stylesheet, and load the fonts once in the page : Aesthetic: functionalist "control room" — Inter for labels/names (a neutral, tight neo-grotesque kept to 400–600 weights so the UI reads clean rather than heavy), IBM Plex Mono for telemetry, a single blue used only for structure, and green/amber/red used strictly as status information. */ :root { /* surfaces */ --bg: #f6f7f9; --grid: rgba(20, 28, 46, .04); --surface: #ffffff; --chip: #f1f3f7; --line: #e7eaef; /* default hairline / control border */ --line-2: #eef0f3; /* faintest dividers (table rows, list separators) */ --line-strong: #d6dbe3; /* heavier border (inputs, pressed edges) */ /* ink — text scale, dark → light */ --ink: #1a1d24; /* primary text + numbers */ --ink-2: #3b414d; /* secondary body text */ --muted: #69707d; /* labels, captions, muted text */ --muted-2: #98a0ad; /* faint text, timestamps, empty states */ --faint: #c2c8d0; /* placeholder, disabled, decorative ticks */ /* structure accent (NOT status) — one blue used only for structure/affordance */ --accent: #2f5bea; --accent-strong: #1e40af; /* darker accent for hovers / pressed */ --accent-soft: #e9eefc; /* tinted accent background (active rows, info chips) */ --accent-line: #c2d2fb; /* accent-tinted border */ --accent-ring: rgba(47,91,234,.18); /* focus ring */ --accent-glow: rgba(47,91,234,.5); /* pulse start */ --accent-glow-0: rgba(47,91,234,0); /* pulse fade target */ /* status = information (green/amber/red ONLY signal state, never category) */ --green: #15a34a; --amber: #d97706; --red: #dc2626; --idle: #9aa3b0; --green-soft: rgba(21,163,74,.12); --amber-soft: rgba(217,119,6,.12); --red-soft: rgba(220,38,38,.12); --red-glow: rgba(220,38,38,.18); /* violet — a 4th informational hue for the "finalizing"/"debug" state and the Lead party (kept distinct from the blue structure accent). */ --violet: #7c3aed; --violet-soft: rgba(124,58,237,.12); --violet-line: #d9c7f6; --lead: var(--violet); /* Lead speaker in dual timeline / waveforms */ --lead-soft: var(--violet-soft); /* categorical palette — for cost breakdown (LLM/STT/TTS) and log categories. Deliberately NOT the status colours: these label *kind*, not health. */ --c-llm: #6366f1; /* indigo */ --c-stt: #0d9488; /* teal */ --c-tts: #db2777; /* magenta */ --c-tool: #9333ea; /* purple — skill fetch calls (get_skill_*) */ --c-localtool: #64748b; /* slate — built-in local tools (end_call, transfer, calendar…) */ --shadow: 0 10px 30px rgba(20,28,46,.06); /* type */ --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* spacing scale (4px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1318; --grid: rgba(255,255,255,.035); --surface: #161b22; --chip: #1f2630; --line: #262d38; --line-2: #20262f; --line-strong: #323a47; --ink: #e6e8ec; --ink-2: #c2c7d0; --muted: #8b93a1; --muted-2: #6b7280; --faint: #4a525f; --accent: #6b8aff; --accent-strong: #9bb4ff; --accent-soft: rgba(107,138,255,.14); --accent-line: #3a4a6b; --accent-ring: rgba(107,138,255,.3); --accent-glow: rgba(107,138,255,.5); --accent-glow-0: rgba(107,138,255,0); --green: #34d27e; --amber: #f0a93c; --red: #f87171; --idle: #5b6472; --green-soft: rgba(52,210,126,.14); --amber-soft: rgba(240,169,60,.14); --red-soft: rgba(248,113,113,.16); --red-glow: rgba(248,113,113,.22); --violet: #a78bfa; --violet-soft: rgba(167,139,250,.16); --violet-line: #4a3d6b; --c-llm: #818cf8; --c-stt: #2dd4bf; --c-tts: #f472b6; --c-tool: #c084fc; --c-localtool: #94a3b8; --shadow: 0 12px 34px rgba(0,0,0,.5); } } [data-theme="dark"] { --bg: #0f1318; --grid: rgba(255,255,255,.035); --surface: #161b22; --chip: #1f2630; --line: #262d38; --line-2: #20262f; --line-strong: #323a47; --ink: #e6e8ec; --ink-2: #c2c7d0; --muted: #8b93a1; --muted-2: #6b7280; --faint: #4a525f; --accent: #6b8aff; --accent-strong: #9bb4ff; --accent-soft: rgba(107,138,255,.14); --accent-line: #3a4a6b; --accent-ring: rgba(107,138,255,.3); --accent-glow: rgba(107,138,255,.5); --accent-glow-0: rgba(107,138,255,0); --green: #34d27e; --amber: #f0a93c; --red: #f87171; --idle: #5b6472; --green-soft: rgba(52,210,126,.14); --amber-soft: rgba(240,169,60,.14); --red-soft: rgba(248,113,113,.16); --red-glow: rgba(248,113,113,.22); --violet: #a78bfa; --violet-soft: rgba(167,139,250,.16); --violet-line: #4a3d6b; --c-llm: #818cf8; --c-stt: #2dd4bf; --c-tts: #f472b6; --c-tool: #c084fc; --c-localtool: #94a3b8; --shadow: 0 12px 34px rgba(0,0,0,.5); } /* ── Shared primitives (opt-in classes) ─────────────────── */ .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .chip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--chip); border: 1px solid var(--line); padding: 2px 7px; border-radius: var(--r-sm); white-space: nowrap; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); } /* status dot — add .is-healthy / .is-degraded / .is-down */ .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--idle); flex: none; } .is-healthy > .dot, .dot.is-healthy { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); } .is-degraded > .dot, .dot.is-degraded { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } .is-down > .dot, .dot.is-down { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); } /* button */ .btn { font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--line); padding: 8px 14px; border-radius: var(--r-sm); transition: border-color .2s, background .2s; } .btn:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.05); }