/* ─── Levirge canonical design tokens ───────────────────────────────────────── Single source of truth for all 5 UIs: app, admin, command, brain, agent-search. See design/STYLE-GUIDE.md for the name map, collisions, and adoption steps. Derived from app/assets/css/_ui-theme.css (the richest set — only one with a light mode, type scale, and dual shadows), with neutrals warmed to hue 48–60 to match brain / command / agent-search. Values equal brain's hexes where the two families already agreed. Dark is default. Light via [data-theme="light"] on . ponytail: no build step — repos copy this file and @import it. */ :root { /* ─── Neutrals — 3 required tiers + sidebar/hover/inset ───────────── */ --bg-base: hsl(60 2% 12%); /* page canvas */ --bg-sidebar: hsl(60 3% 10%); /* nav rail — below the canvas */ --bg-surface: hsl(0 0% 15%); /* cards, panels */ --bg-raised: hsl(60 3% 17%); /* selected rows, dropdowns */ --bg-hover: hsl(60 3% 21%); /* one shade above resting */ --bg-inset: hsl(60 3% 6%); /* tables, inputs, code blocks */ /* ─── Borders — alpha overlays, so they work on any tier ──────────── */ --line-1: hsl(0 0% 100% / 0.06); /* hairline, same-tier division */ --line-2: hsl(0 0% 100% / 0.10); /* default border */ --line-3: hsl(0 0% 100% / 0.18); /* emphasis / focus ring base */ --top-highlight: hsl(0 0% 100% / 0.06); /* top edge of raised surfaces */ /* ─── Foreground — 4 steps ────────────────────────────────────────── */ --fg-0: hsl(48 12% 92%); /* headings */ --fg-1: hsl(43 7% 70%); /* body */ --fg-2: hsl(44 5% 52%); /* secondary / captions */ --fg-3: hsl(44 4% 36%); /* disabled */ /* ─── Brand accent — amber ────────────────────────────────────────── */ --accent: oklch(0.731 0.132 73.9); --accent-hi: oklch(0.8 0.132 73.9); /* hover */ --accent-soft: oklch(0.731 0.132 73.9 / 0.18); /* tinted fill */ --accent-line: oklch(0.731 0.132 73.9 / 0.42); /* tinted border */ /* Text/icon ON an accent fill. Tracks the canvas, so it stays readable in both modes: near-black on bright amber (dark), white on deep amber (light). */ --accent-fg: var(--bg-base); --link: oklch(0.72 0.13 250); /* ─── Semantic status ─────────────────────────────────────────────── */ --ok: oklch(0.74 0.13 150); /* was brain/command `--accent` */ --warn: oklch(0.78 0.14 75); --error: oklch(0.7 0.18 18); --idle: hsl(44 4% 38%); --status-online: var(--ok); --status-degraded: var(--warn); --status-error: var(--error); --status-offline: var(--idle); --status-unknown: transparent; /* ─── Environment palette — 6 assignable hues ─────────────────────── */ --env-slate: oklch(0.72 0.02 270); --env-cyan: oklch(0.72 0.13 220); --env-mint: oklch(0.78 0.14 160); --env-amber: oklch(0.8 0.14 78); --env-rose: oklch(0.7 0.18 18); --env-iris: oklch(0.74 0.13 290); --env-slate-soft: oklch(0.72 0.02 270 / 0.2); --env-cyan-soft: oklch(0.72 0.13 220 / 0.22); --env-mint-soft: oklch(0.78 0.14 160 / 0.22); --env-amber-soft: oklch(0.8 0.14 78 / 0.22); --env-rose-soft: oklch(0.7 0.18 18 / 0.22); --env-iris-soft: oklch(0.74 0.13 290 / 0.22); --env-slate-line: oklch(0.72 0.02 270 / 0.55); --env-cyan-line: oklch(0.72 0.13 220 / 0.6); --env-mint-line: oklch(0.78 0.14 160 / 0.6); --env-amber-line: oklch(0.8 0.14 78 / 0.6); --env-rose-line: oklch(0.7 0.18 18 / 0.6); --env-iris-line: oklch(0.74 0.13 290 / 0.6); /* ─── Syntax highlighting ─────────────────────────────────────────── */ --syn-keyword: oklch(0.78 0.13 290); --syn-string: oklch(0.78 0.1 145); --syn-number: oklch(0.8 0.13 75); --syn-ident: var(--fg-0); --syn-comment: hsl(44 5% 44%); --syn-fn: oklch(0.82 0.1 290); /* ─── Shadows — always two layers: contact + ambient ──────────────── */ --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4), 0 4px 12px hsl(0 0% 0% / 0.22); --shadow-md: 0 1px 3px hsl(0 0% 0% / 0.45), 0 8px 24px hsl(0 0% 0% / 0.28); --shadow-lg: 0 2px 4px hsl(0 0% 0% / 0.5), 0 16px 40px hsl(0 0% 0% / 0.34); --shadow-inset: inset 0 2px 4px hsl(0 0% 0% / 0.32), inset 0 -1px 1px hsl(0 0% 100% / 0.04); --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.06), inset 0 -1px 0 hsl(0 0% 0% / 0.18); /* ─── Typography ──────────────────────────────────────────────────── */ /* system-ui + "Segoe UI" are load-bearing on Windows — brain and agent-search both had them; app's stack did not. Superset of all three. */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Size scale — t-N = Npx / 16 rem */ --t-11: 0.6875rem; --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; /* default body */ --t-16: 1rem; --t-20: 1.25rem; --t-28: 1.75rem; /* ─── Radii ───────────────────────────────────────────────────────── */ --r-2: 0.125rem; --r-4: 0.25rem; --r-6: 0.375rem; --r-8: 0.5rem; --r-12: 0.75rem; /* dialogs and large cards — .ui-dialog, onboarding panels */ --r-pill: 624.9375rem; /* ─── Row heights — dense-UI rhythm ───────────────────────────────── */ --row-tight: 1.5rem; --row: 1.75rem; --row-loose: 2rem; } /* ─── LIGHT MODE — white canvas, warm grey chrome ──────────────────────── */ [data-theme="light"] { --bg-base: hsl(0 0% 100%); --bg-sidebar: hsl(36 12% 95%); --bg-surface: hsl(36 12% 97%); --bg-raised: hsl(0 0% 100%); --bg-hover: hsl(36 16% 93%); --bg-inset: hsl(36 12% 91%); --line-1: hsl(30 18% 16% / 0.07); --line-2: hsl(30 18% 16% / 0.13); --line-3: hsl(30 18% 16% / 0.22); --top-highlight: hsl(0 0% 100% / 0.85); --fg-0: hsl(30 18% 10%); --fg-1: hsl(30 12% 24%); --fg-2: hsl(30 8% 40%); --fg-3: hsl(30 6% 56%); --accent: oklch(0.56 0.132 73.9); --accent-hi: oklch(0.48 0.14 73.9); --accent-soft: oklch(0.56 0.132 73.9 / 0.14); --accent-line: oklch(0.56 0.132 73.9 / 0.42); --link: oklch(0.52 0.15 250); --ok: oklch(0.55 0.15 150); --warn: oklch(0.62 0.15 68); --error: oklch(0.55 0.2 18); --idle: hsl(30 6% 60%); --env-slate: oklch(0.5 0.02 270); --env-cyan: oklch(0.55 0.14 220); --env-mint: oklch(0.55 0.15 155); --env-amber: oklch(0.62 0.16 72); --env-rose: oklch(0.55 0.2 18); --env-iris: oklch(0.5 0.16 290); --env-slate-soft: oklch(0.5 0.02 270 / 0.14); --env-cyan-soft: oklch(0.55 0.14 220 / 0.14); --env-mint-soft: oklch(0.55 0.15 155 / 0.14); --env-amber-soft: oklch(0.62 0.16 72 / 0.16); --env-rose-soft: oklch(0.55 0.2 18 / 0.14); --env-iris-soft: oklch(0.5 0.16 290 / 0.14); --env-slate-line: oklch(0.5 0.02 270 / 0.55); --env-cyan-line: oklch(0.55 0.14 220 / 0.55); --env-mint-line: oklch(0.55 0.15 155 / 0.55); --env-amber-line: oklch(0.62 0.16 72 / 0.6); --env-rose-line: oklch(0.55 0.2 18 / 0.55); --env-iris-line: oklch(0.5 0.16 290 / 0.55); --syn-keyword: oklch(0.5 0.16 290); --syn-string: oklch(0.45 0.13 150); --syn-number: oklch(0.55 0.14 60); --syn-comment: hsl(30 6% 56%); --syn-fn: oklch(0.42 0.18 290); --shadow-sm: 0 1px 2px hsl(30 18% 16% / 0.06), 0 6px 18px hsl(30 18% 16% / 0.06); --shadow-md: 0 1px 3px hsl(30 18% 16% / 0.08), 0 12px 32px hsl(30 18% 16% / 0.08); --shadow-lg: 0 2px 6px hsl(30 18% 16% / 0.1), 0 20px 48px hsl(30 18% 16% / 0.1); --shadow-inset: inset 0 2px 4px hsl(30 18% 16% / 0.1), inset 0 -1px 1px hsl(0 0% 100% / 0.5); --shadow-selected: inset 0 1px 0 hsl(0 0% 100% / 0.6), inset 0 -1px 0 hsl(30 18% 16% / 0.06); } /* ─── Icon filters — theme-aware tint for -based SVG icons ────────── */ :root { --icon-filter-0: brightness(0) invert(1); --icon-filter-1: brightness(0) invert(1) opacity(0.74); --icon-filter-2: brightness(0) invert(1) opacity(0.51); --icon-filter-3: brightness(0) invert(1) opacity(0.34); } [data-theme="light"] { --icon-filter-0: brightness(0); --icon-filter-1: brightness(0) opacity(0.7); --icon-filter-2: brightness(0) opacity(0.48); --icon-filter-3: brightness(0) opacity(0.28); } /* ─── LEGACY ALIASES ────────────────────────────────────────────────────── Compatibility shims so an existing UI can adopt this file without a rewrite. MUST NOT be used in new code. Delete a block once its repo's CSS has been sed'd to canonical names. Two names could NOT be aliased — they mean different things in the two families and must be renamed at the call site on adoption: • `--accent` — amber in app/admin, GREEN in brain/command/agent-search. Green is now `--ok`. • `--line-2` — mid border in app, STRONG border in brain/command/ agent-search. Their `--line-2` is now `--line-3`. */ :root { /* app */ --bg-0: var(--bg-base); --bg-1: var(--bg-surface); --bg-2: var(--bg-raised); --bg-3: var(--bg-hover); --font-size-xs: var(--t-11); --font-size-sm: var(--t-12); --font-size-md: var(--t-14); --font-size-base: var(--t-16); --font-size-lg: var(--t-16); --font-size-xl: var(--t-20); --font-size-2xl: var(--t-28); --radius-xs: var(--r-2); --radius-sm: var(--r-4); --radius-md: var(--r-6); --radius-lg: var(--r-8); --radius-pill: var(--r-pill); --row-height-tight: var(--row-tight); --row-height: var(--row); --row-height-loose: var(--row-loose); --border-color: var(--line-2); --border-width: 0.0625rem; --border-radius: var(--r-8); --button-border-radius: var(--r-8); --icon-filter-primary: var(--icon-filter-0); --icon-filter-secondary: var(--icon-filter-1); --icon-filter-muted: var(--icon-filter-2); --icon-filter-disabled: var(--icon-filter-3); /* brain / command / agent-search */ --bg: var(--bg-base); --sidebar: var(--bg-sidebar); --panel: var(--bg-surface); --panel-2: var(--bg-raised); --raised: var(--bg-raised); --code-bg: var(--bg-inset); --line: var(--line-2); --text: var(--fg-0); --muted: var(--fg-1); --faint: var(--fg-2); --brand: var(--accent); --clay: var(--accent-hi); --clay-soft: var(--accent-soft); --stuck: var(--error); --question: var(--link); /* agent-search — already aliased onto canonical semantics */ --text-primary: var(--fg-0); --text-muted: var(--fg-1); --border: var(--line-2); --highlight: var(--accent); } /* NOT here, deliberately — product-specific semantic palettes stay in their own repo, because canonical cannot know how many values must stay mutually distinguishable: • command `--st-*` (issue statuses) — these render as ADJACENT kanban column borders and status buttons, so `planning` and `in_review` must not collapse to one hue. Canonical has a single violet (`--env-iris`); command needs two. • command `--agent`, brain `--km-*` (knowledge-map hues), admin `--topbar-h` / `--nav-w` (layout constants). Each lives in its own repo's CSS and may reference canonical tokens. */ /* Reset + page basics. Split out of _tokens.css when that file became a verbatim copy of the canonical design/tokens.css — keeping it verbatim is what lets it be diffed against the canonical set to prove it has not drifted. Layout is NOT here: each entry (ui.css, login.css) owns its own body grid. Inlined by scripts/build.ts at build time. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; } body { font: 1rem var(--font-sans); background: var(--bg-base); color: var(--fg-0); /* was var(--text) — --fg-0 is its exact canonical equivalent */ line-height: 1.5; -webkit-font-smoothing: antialiased; } html, body { height: 100dvh; padding: 0 1rem 0.2rem; margin: 0; display: grid; grid-template-rows: 1fr auto; background: var(--bg-base); } body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; a { color: var(--brand); text-decoration: underline dotted; &:hover { text-decoration: underline; } } & > main { align-self: center; justify-self: center; place-items: center; padding: 3rem 1.5rem; color: var(--text-muted); } & > footer { display: grid; grid-template-columns: 1fr auto; justify-items: space-between; align-items: center; font-size: 0.8rem; color: var(--text-muted); a { color: var(--text-muted); text-decoration: none; &:hover { color: var(--brand); } } } } .login-card { display: grid; justify-items: center; gap: 0.85rem; max-width: 26rem; padding: 2.5rem 2rem; background: var(--bg-surface); border-radius: 0.5rem; box-shadow: var(--shadow-md); text-align: center; } .login-logo { height: 3rem; margin-bottom: 0.35rem; } .login-title { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); } .login-detail { color: var(--text-muted); line-height: 1.5; } /* One row per identity provider (/auth/start?provider=…), full card width. */ .login-providers { display: grid; gap: 0.5rem; width: 100%; margin-top: 0.5rem; } .login-action { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0.6rem; padding: 0.6rem 1.6rem; border-radius: 0.375rem; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-primary); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm); } .login-action img { height: 1.125rem; width: auto; } /* Hover steps one shade lighter than resting (rules/ui-and-js.md). */ .login-action:hover { background: var(--line); } .login-action:focus-visible { outline: 0.125rem solid var(--highlight); outline-offset: 0.125rem; }