/* ============================================================ Agent Registry — Design Tokens Dark mode is the primary palette; [data-theme="light"] overrides. All color values use oklch so accent/status hues share lightness and chroma — only hue varies. ============================================================ */ :root { /* ---------- Surfaces (dark, primary) -------------------- */ --bg-app: oklch(0.180 0.005 250); --bg-surface: oklch(0.210 0.006 250); --bg-elevated: oklch(0.245 0.007 250); --bg-input: oklch(0.165 0.005 250); --bg-row-hover: oklch(0.235 0.007 250); --bg-row-selected: oklch(0.260 0.018 200); --bg-overlay: oklch(0.05 0 0 / 0.55); /* ---------- Borders ------------------------------------- */ --border-subtle: oklch(0.270 0.008 250); --border-default: oklch(0.320 0.009 250); --border-strong: oklch(0.420 0.011 250); --border-focus: oklch(0.72 0.11 200); /* ---------- Text ---------------------------------------- */ --text-primary: oklch(0.960 0.003 250); --text-secondary: oklch(0.720 0.006 250); --text-tertiary: oklch(0.560 0.008 250); --text-disabled: oklch(0.410 0.008 250); --text-inverse: oklch(0.160 0.005 250); /* ---------- Accent (single, muted cyan-teal) ------------ */ --accent-solid: oklch(0.72 0.11 200); --accent-solid-hover: oklch(0.77 0.11 200); --accent-solid-active: oklch(0.68 0.11 200); --accent-soft: oklch(0.32 0.08 200); --accent-soft-hover: oklch(0.36 0.08 200); --accent-on-solid: oklch(0.14 0.02 200); --accent-text: oklch(0.80 0.10 200); /* ---------- Status -------------------------------------- */ /* success — agents healthy, audit succeeded */ --success-solid: oklch(0.66 0.13 155); --success-soft: oklch(0.28 0.06 155); --success-text: oklch(0.80 0.11 155); /* warn — partial visibility, polling */ --warn-solid: oklch(0.78 0.13 75); --warn-soft: oklch(0.32 0.07 75); --warn-text: oklch(0.85 0.11 75); /* danger — destructive only (delete) */ --danger-solid: oklch(0.63 0.19 25); --danger-solid-hover: oklch(0.68 0.19 25); --danger-soft: oklch(0.30 0.09 25); --danger-text: oklch(0.76 0.14 25); --danger-on-solid: oklch(0.98 0 0); /* info — neutral notice */ --info-solid: oklch(0.66 0.12 240); --info-soft: oklch(0.30 0.08 240); --info-text: oklch(0.80 0.10 240); /* ---------- Source badges (3 sources × soft/text) ------- */ --src-teams-soft: oklch(0.30 0.08 285); --src-teams-text: oklch(0.82 0.12 285); --src-pplat-soft: oklch(0.30 0.07 150); --src-pplat-text: oklch(0.82 0.11 150); --src-foundry-soft: oklch(0.32 0.08 55); --src-foundry-text: oklch(0.85 0.12 55); --src-agentid-soft: oklch(0.31 0.09 310); --src-agentid-text: oklch(0.84 0.13 310); --src-securitycopilot-soft: oklch(0.32 0.10 20); --src-securitycopilot-text: oklch(0.85 0.13 20); /* ---------- Spacing — 4px grid -------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ---------- Type ---------------------------------------- */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --fs-display: 28px; /* page titles only */ --fs-h1: 22px; /* section headers */ --fs-h2: 17px; /* card / panel headers */ --fs-body: 13px; /* default body, table cells */ --fs-small: 12px; /* meta, helper text */ --fs-mono: 12px; /* code, IDs, JSON */ --lh-tight: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.06em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---------- Radius -------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; /* default — inputs, buttons */ --radius-lg: 8px; /* cards, side panel, dialog */ --radius-pill: 9999px; /* chips, source badges */ /* ---------- Elevation — at most 2 levels ---------------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.28); /* ---------- Motion -------------------------------------- */ --motion-fast: 120ms; /* hovers, color shifts */ --motion-base: 160ms; /* default */ --motion-panel: 220ms; /* side panel, dialog enter */ --ease-out: cubic-bezier(0.20, 0.70, 0.20, 1); --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1); /* ---------- Layout -------------------------------------- */ --sidebar-w: 232px; --sidebar-w-collapsed: 56px; --topbar-h: 48px; --row-h: 44px; --panel-w: 440px; --toolbar-h: 56px; } /* ============================================================ LIGHT MODE Keeps the same hue, lowers chroma on surfaces, lifts on text. BRAND MODE shares the light-theme structural palette and only overrides the accent family using the tenant's brand colour (JS sets --brand-accent from /api/branding's accentColor). ============================================================ */ [data-theme="light"], [data-theme="brand"] { --bg-app: oklch(0.985 0.002 250); --bg-surface: oklch(1.000 0 0 ); --bg-elevated: oklch(0.975 0.003 250); --bg-input: oklch(1.000 0 0 ); --bg-row-hover: oklch(0.970 0.004 250); --bg-row-selected: oklch(0.955 0.020 200); --bg-overlay: oklch(0.15 0 0 / 0.32); --border-subtle: oklch(0.935 0.004 250); --border-default: oklch(0.885 0.005 250); --border-strong: oklch(0.780 0.006 250); --border-focus: oklch(0.55 0.13 200); --text-primary: oklch(0.200 0.008 250); --text-secondary: oklch(0.420 0.008 250); --text-tertiary: oklch(0.560 0.008 250); --text-disabled: oklch(0.720 0.005 250); --text-inverse: oklch(0.985 0.002 250); --accent-solid: oklch(0.55 0.13 200); --accent-solid-hover: oklch(0.50 0.13 200); --accent-solid-active: oklch(0.46 0.13 200); --accent-soft: oklch(0.95 0.03 200); --accent-soft-hover: oklch(0.92 0.04 200); --accent-on-solid: oklch(0.99 0.003 200); --accent-text: oklch(0.46 0.13 200); --success-solid: oklch(0.55 0.13 155); --success-soft: oklch(0.95 0.04 155); --success-text: oklch(0.42 0.13 155); --warn-solid: oklch(0.70 0.14 75); --warn-soft: oklch(0.96 0.05 80); --warn-text: oklch(0.48 0.13 70); --danger-solid: oklch(0.58 0.19 25); --danger-solid-hover: oklch(0.54 0.19 25); --danger-soft: oklch(0.96 0.04 25); --danger-text: oklch(0.48 0.17 25); --danger-on-solid: oklch(0.99 0 0); --info-solid: oklch(0.55 0.13 240); --info-soft: oklch(0.95 0.04 240); --info-text: oklch(0.45 0.13 240); --src-teams-soft: oklch(0.95 0.04 285); --src-teams-text: oklch(0.45 0.16 285); --src-pplat-soft: oklch(0.95 0.05 150); --src-pplat-text: oklch(0.42 0.14 150); --src-foundry-soft: oklch(0.96 0.06 70); --src-foundry-text: oklch(0.48 0.14 55); --src-agentid-soft: oklch(0.96 0.05 310); --src-agentid-text: oklch(0.47 0.17 310); --src-securitycopilot-soft: oklch(0.96 0.05 20); --src-securitycopilot-text: oklch(0.46 0.16 20); --shadow-1: 0 1px 2px rgba(20, 25, 40, 0.06), 0 0 0 1px rgba(20, 25, 40, 0.06); --shadow-2: 0 12px 32px rgba(20, 25, 40, 0.10), 0 2px 6px rgba(20, 25, 40, 0.06); } /* ============================================================ BRAND MODE — accent overrides only. --brand-accent is set by JS to the tenant's organizationalBranding.backgroundColor (#RRGGBB). Hover / active / soft variants are derived via color-mix() so the JS only ever has to set the single base colour. ============================================================ */ [data-theme="brand"] { --accent-solid: var(--brand-accent, oklch(0.55 0.13 200)); --accent-solid-hover: color-mix(in oklch, var(--brand-accent, oklch(0.55 0.13 200)), black 12%); --accent-solid-active: color-mix(in oklch, var(--brand-accent, oklch(0.55 0.13 200)), black 22%); --accent-soft: color-mix(in oklch, var(--brand-accent, oklch(0.55 0.13 200)), white 88%); --accent-soft-hover: color-mix(in oklch, var(--brand-accent, oklch(0.55 0.13 200)), white 78%); --accent-text: color-mix(in oklch, var(--brand-accent, oklch(0.55 0.13 200)), black 10%); --accent-on-solid: var(--brand-accent-fg, #fff); --border-focus: var(--brand-accent, oklch(0.55 0.13 200)); } /* ============================================================ Base reset — minimal ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-app); color: var(--text-primary); font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; accent-color: var(--accent-solid); } ::selection { background: var(--accent-soft); color: var(--text-primary); } /* Focus ring — visible on keyboard nav only */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; }