/* ==========================================================================
agentView Design System — Editorial Light Theme
Source of truth: landing.css + Ideas/agentView.de Dashboard/Dashboard.html.
Aesthetic: editorial calm (Linear / Vercel / Resend tier) — warm off-white
canvas, near-black ink, sparse blue-purple accent, hairline borders, mono
eyebrow labels, Inter Tight display + Inter body + JetBrains Mono code.
Token strategy: NEW landing tokens are canonical (--ink, --bg, --line,
--accent, --font-display, --r-md). Legacy product tokens (--bg-primary,
--text-primary, --bg-card, --accent-primary, --radius-md, --space-md,
--font-base) are kept as backwards-compatible aliases that resolve to the
new editorial values, so 15k+ lines of component CSS that reference them
re-theme automatically without a rename sweep.
========================================================================== */
/* --- Fonts ---------------------------------------------------------------- */
/* Inter family already loaded via /css/inter.css (preserved). Inter Tight
(display) and JetBrains Mono (code/labels) ship variable so we get the
full weight ramp from a single woff2 each. */
@import url('/assets/fonts/inter-tight/inter-tight.css');
@import url('/assets/fonts/jetbrains-mono/jetbrains-mono.css');
/* --- 1. Color Tokens ----------------------------------------------------- */
:root {
/* ===== Canonical landing tokens (use these in new component CSS). ===== */
/* Ink / ground — warm off-white canvas, near-black ink. */
--ink: oklch(0.18 0.012 255);
--ink-2: oklch(0.28 0.010 255);
--muted: oklch(0.48 0.008 255);
--line: oklch(0.90 0.005 255);
--line-2: oklch(0.94 0.004 255);
--line-3: oklch(0.97 0.003 255);
--bg: oklch(0.985 0.004 85);
--bg-warm: oklch(0.97 0.010 85);
--panel: oklch(0.995 0.003 85);
/* Accent family — single blue-purple reserved for AI / live moments.
Mint cyan (legacy brand) is kept as an alias only; new components
should reach for `--accent` so the palette stays coherent. */
--accent: oklch(0.48 0.14 265);
--accent-soft: oklch(0.94 0.03 265);
--accent-ink: oklch(0.36 0.16 265);
/* Semantic signal colors — used sparingly, not as theme primaries. */
--signal: oklch(0.72 0.14 70); /* amber, "updating / pending" */
--ok: oklch(0.62 0.13 155); /* green, "online / success" */
--danger: oklch(0.58 0.17 25); /* coral, "offline / error" */
/* Strong-on-tinted-bg variants for chips (DS-106 carry-over). */
--success-strong: oklch(0.45 0.13 155);
--warning-strong: oklch(0.50 0.14 70);
--danger-strong: oklch(0.50 0.18 25);
/* Foreground when sat on a saturated semantic background — used by
solid-fill button variants. Today these are pure white; if the
palette ever shifts, this is the single edit point. */
--on-accent: #ffffff;
--on-danger: #ffffff;
--on-ok: #ffffff;
/* ===== Typography (canonical landing) ================================= */
/* Three families. Display for headlines, text for body, mono for labels
/ numerals / breadcrumbs. */
--font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
--font-text: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* Editorial type ramp (matches landing). Use the .display-1/2/3, .lede,
.eyebrow utility classes from landing for new components; the rem
scale below is preserved for the existing layout/components CSS. */
--type-display-1: clamp(44px, 6.2vw, 80px);
--type-display-2: clamp(32px, 4vw, 52px);
--type-display-3: clamp(22px, 2vw, 28px);
--type-lede: 19px;
--type-body: 16px;
--type-eyebrow: 11px;
--type-mono: 11px;
/* ===== Editorial radii ================================================ */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 24px;
/* ===== Motion ======================================================== */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur-fast: 120ms;
--dur-med: 200ms;
--dur-slow: 400ms;
/* ───── Backwards-compatible aliases for existing product CSS. ──────── */
/* The 15k lines of component/page CSS reference these names. Each one
resolves to the editorial light-theme value above so we re-theme the
whole app without renaming a single existing selector. */
/* Backgrounds */
--bg-primary: var(--bg);
--bg-secondary: var(--bg-warm);
--bg-card: var(--panel);
--bg-card-hover: var(--bg-warm);
--bg-card-active: var(--line-3);
--bg-surface: var(--panel);
--bg-overlay: oklch(0.18 0.012 255 / 0.45);
--bg-input: var(--panel);
--surface-subtle: var(--bg-warm);
/* Borders */
--border: var(--line);
--border-light: var(--line-2);
--border-focus: var(--accent);
--border-accent: oklch(0.48 0.14 265 / 0.22);
--border-danger: oklch(0.58 0.17 25 / 0.22);
--border-success: oklch(0.62 0.13 155 / 0.22);
--border-warning: oklch(0.72 0.14 70 / 0.25);
--border-hover: var(--ink-2);
--border-subtle: var(--line-2);
/* Interactive surface overlays (light-theme: subtle ink wash) */
--bg-hover-subtle: oklch(0.18 0.012 255 / 0.04);
--bg-hover-medium: oklch(0.18 0.012 255 / 0.06);
--bg-active: oklch(0.18 0.012 255 / 0.08);
/* Text */
--text-primary: var(--ink);
--text-secondary: var(--ink-2);
--text-muted: var(--muted);
--text-disabled: oklch(0.65 0.008 255);
--text-inverse: var(--bg);
/* Brand / Accent — primary now blue-purple per landing, NOT mint.
The mint legacy alias (`--accent-mint`) is exposed for any component
that genuinely wants the old brand-mint moment (e.g. brand watermarks). */
--accent-primary: var(--accent);
--accent-primary-dim: var(--accent-soft);
--accent-primary-glow: oklch(0.48 0.14 265 / 0.18);
--accent-secondary: var(--signal);
--accent-secondary-dim: oklch(0.72 0.14 70 / 0.15);
--accent-mint: oklch(0.62 0.13 155);
--accent-mint-soft: oklch(0.62 0.13 155 / 0.12);
/* Semantic aliases */
--success: var(--ok);
--success-dim: oklch(0.62 0.13 155 / 0.12);
--success-icon-bg: oklch(0.62 0.13 155);
--warning: var(--signal);
--warning-dim: oklch(0.72 0.14 70 / 0.14);
--warning-icon-bg: oklch(0.72 0.14 70);
--info: var(--accent);
--info-dim: var(--accent-soft);
/* Compatibility with admin / store / settings legacy refs */
--surface: var(--panel);
--surface-primary: var(--bg);
--surface-secondary: var(--bg-warm);
--surface-hover: var(--bg-warm);
--primary: var(--accent);
--primary-soft: var(--accent-soft);
--primary-contrast: var(--bg);
/* --- 2. Spacing Scale (4px base) — unchanged from product DS --- */
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 128px;
/* --- 3. Typography aliases (rem-based for legacy components) --- */
--font-family: var(--font-text);
--font-2xs: clamp(0.65rem, 0.6rem + 0.2vw, 0.72rem);
--font-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.78rem);
--font-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
--font-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
--font-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
--font-xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem);
--font-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
--font-3xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
--line-height-tight: 1.2;
--line-height-base: 1.5;
--line-height-relaxed: 1.7;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* --- 4. Border Radius aliases — pill scale kept for legacy buttons --- */
--radius-xs: var(--r-xs);
--radius-sm: var(--r-sm);
--radius-md: var(--r-md);
--radius-lg: var(--r-lg);
--radius-xl: var(--r-xl);
--radius-2xl: 32px;
--radius-full: 9999px;
/* --- 5. Shadows — light theme (softer, ink-based) --- */
--shadow-sm: 0 1px 2px oklch(0.18 0.012 255 / 0.06);
--shadow-md: 0 4px 12px oklch(0.18 0.012 255 / 0.08);
--shadow-lg: 0 12px 28px oklch(0.18 0.012 255 / 0.10);
--shadow-xl: 0 20px 40px oklch(0.18 0.012 255 / 0.12);
--shadow-glow-primary: 0 0 24px oklch(0.48 0.14 265 / 0.20);
--shadow-glow-secondary: 0 0 20px oklch(0.72 0.14 70 / 0.20);
/* --- 6. Transition aliases --- */
--transition-fast: var(--dur-fast) var(--ease);
--transition-base: var(--dur-med) var(--ease);
--transition-slow: var(--dur-slow) var(--ease);
--transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
/* --- 7. Z-Index Scale --- */
--z-dropdown: 100;
--z-sticky: 200;
--z-sidebar: 300;
--z-overlay: 400;
--z-modal: 500;
--z-toast: 600;
--z-command-palette: 700;
--z-tooltip: 800;
/* --- 8. Layout Dimensions --- */
--sidebar-width: 260px;
--sidebar-collapsed: 64px;
--topbar-height: 60px; /* aligned to landing nav-height */
--bottom-bar-height: 72px;
--content-max-width: 1280px;
--touch-target: 48px;
--touch-target-lg: 56px;
--mobile-bottom-nav-height: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}
/* --- Editorial type utilities (mirrored from landing.css) ---------------- */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--type-eyebrow);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.display-1 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-display-1);
line-height: 0.98;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0;
text-wrap: balance;
}
.display-2 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-display-2);
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0;
text-wrap: balance;
}
.display-3 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--type-display-3);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
}
.lede {
font-size: var(--type-lede);
line-height: 1.5;
color: var(--ink-2);
max-width: 60ch;
text-wrap: pretty;
}
.mono { font-family: var(--font-mono); }
/* CJK gets tighter leading and no tracking — ideographs don't benefit. */
:lang(zh) .display-1,
:lang(zh) .display-2,
:lang(zh) .display-3 {
letter-spacing: normal;
line-height: 1.2;
}
/* --- Editorial chrome utilities ----------------------------------------- */
.hairline { height: 1px; background: var(--line); width: 100%; }
.gridlines {
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 60px 60px;
}
/* Editorial chip / pill — mono uppercase, hairline border, panel fill.
Use this for breadcrumb hints, "BETA" tags, and live-status badges. */
.av-chip {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: var(--type-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 10px 6px 8px;
background: var(--panel);
}
.av-chip__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--ok);
box-shadow: 0 0 0 3px oklch(0.62 0.13 155 / 0.18);
}
/* Numbered eyebrow — historically used on every workspace page header
("01 Übersicht", "02 Displays", …). The numbers were editorial flair
carried over from the marketing landing; in a workspace they don't help
navigation, so we hide them globally and keep the rule available for
places that still want it via .av-num--show. */
.av-num {
display: none;
font-family: var(--font-mono);
color: oklch(0.7 0.008 255);
margin-right: 6px;
}
.av-num--show {
display: inline;
}
/* --- 10. Reset & Base --------------------------------------------------- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overscroll-behavior: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-text);
background: var(--bg);
color: var(--ink);
font-size: var(--type-body);
line-height: var(--line-height-base);
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
touch-action: manipulation;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* Focus ring utility — landing uses 2px accent with 2px offset. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.av-route-focus-target:focus { outline: none; }
.av-route-focus-target:focus-visible {
outline: 1px solid oklch(0.48 0.14 265 / 0.45);
outline-offset: 4px;
border-radius: var(--r-xs);
}
/* Scrollbar styling — light theme: faint ink, no rails. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Selection — ink fill, bg ground (matches landing). */
::selection {
background: var(--ink);
color: var(--bg);
}
/* Hidden utility */
[hidden],
.hidden { display: none !important; }
/* Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip-to-content link — visually hidden until focused */
.av-skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.av-skip-link:focus {
position: fixed;
top: var(--space-sm);
left: var(--space-sm);
width: auto;
height: auto;
padding: var(--space-sm) var(--space-md);
background: var(--panel);
color: var(--accent);
border: 2px solid var(--accent);
border-radius: var(--r-md);
font-size: var(--font-sm);
font-weight: 600;
text-decoration: none;
z-index: 9999;
}
/* Reduced motion — kill durations everywhere. */
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0.01ms;
--transition-base: 0.01ms;
--transition-slow: 0.01ms;
--transition-spring: 0.01ms;
--dur-fast: 0.01ms;
--dur-med: 0.01ms;
--dur-slow: 0.01ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Connection-lost banner — shown by dashboard-app.js on SignalR disconnect */
.av-connection-banner {
background: var(--warning-dim);
border: 1px solid var(--border-warning);
color: var(--warning-strong);
padding: var(--space-sm) var(--space-md);
border-radius: var(--r-md);
font-size: var(--font-sm);
font-weight: 600;
text-align: center;
margin-bottom: var(--space-md);
}
/* Suppress mouse-click outline on form fields, keep keyboard focus visible. */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
Editorial table — .ls-table with optional per-column filter row.
Mirrors the design prototype's .ls-table from Ideas/agentView.de Dashboard.
Standard markup:
========================================================================== */
.ls-table {
width: 100%;
border-collapse: collapse;
}
.ls-table th {
text-align: left;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--bg-warm);
}
.ls-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--line-2);
font-size: 13px;
color: var(--ink);
}
.ls-table tr:last-child td {
border-bottom: 0;
}
.ls-table tbody tr:hover td {
background: var(--line-3);
}
.ls-table tr.filter-row-th th {
padding: 6px 14px 10px;
border-bottom: 1px solid var(--line);
background: transparent;
font-weight: 400;
}
.ls-table .th-filter {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
color: var(--ink-2);
padding: 4px 0 5px 18px;
font-size: 12px;
font-family: inherit;
outline: none;
text-transform: none;
letter-spacing: 0;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
appearance: none;
-webkit-appearance: none;
background-image: none;
}
.ls-table .th-filter:hover {
border-bottom-color: var(--ink-2);
}
.ls-table .th-filter:focus {
border-bottom-color: var(--accent);
color: var(--ink);
}
.ls-table .th-filter::placeholder {
color: var(--muted);
opacity: 0.7;
}
.ls-table .th-filter-wrap {
position: relative;
display: flex;
align-items: center;
}
.ls-table .th-filter-wrap > svg {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
}
.ls-table select.th-filter {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 2px center;
padding-right: 16px;
cursor: pointer;
}
.ls-table .name-cell { font-weight: 500; }
.ls-table .meta-cell {
color: var(--muted);
font-family: var(--font-mono);
font-size: 12px;
}
/* Wrap any .ls-table in this container for hairline border + radius. */
.ls-table-wrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Mobile: keep per-column filters scrollable rather than wrapping the table. */
@media (max-width: 768px) {
.ls-table-wrap { overflow-x: auto; }
.ls-table { min-width: 720px; }
}
/* ── Shared layout utilities ─────────────────────────────────────────
These were originally only in admin.css; promoted here because
modal bodies opened from the dashboard (e.g. template-share modal
on /templates) need the same spacing/typography utilities, and
admin.css is not loaded on the dashboard. */
.av-text-muted { color: var(--muted); }
.av-text-sm { font-size: var(--font-xs); }
.av-mt-0 { margin-top: 0; }
.av-mt-xs { margin-top: var(--space-xs); }
.av-mt-sm { margin-top: var(--space-sm); }
.av-mt-md { margin-top: var(--space-md); }
.av-mt-lg { margin-top: var(--space-lg); }
.av-mb-0 { margin-bottom: 0; }
.av-mb-sm { margin-bottom: var(--space-sm); }
.av-mb-md { margin-bottom: var(--space-md); }
.av-mb-lg { margin-bottom: var(--space-lg); }
.av-flex-1 { flex: 1; }
.av-hidden { display: none !important; }