/* The design system's tokens, vendored: docs/DEPLOY.md says from where. Do not edit here — fix it at the source and re-copy, or the two drift apart. */ /* ========================================================= Colors & Type Apple-inspired dark + light themes, Ocean Blue primary, Cyan accent ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ===== Primary — Ocean Blue (main brand) ===== Ramp is theme-invariant: it's the literal palette (see the Colors swatch chart), and every screen decides per-purpose whether a step reads on light or dark via the semantic tokens further down — not by picking a different ramp step per theme. */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; /* light accent */ --primary-500: #3b82f6; /* main brand */ --primary-600: #2563eb; /* primary button */ --primary-700: #1d4ed8; /* hover; also the light-theme "readable" ink (6.7:1 on white) */ --primary-800: #1e40af; --primary-900: #1e3a8a; --primary-950: #172554; /* ===== Accent — Cyan (complementary) ===== */ --accent-50: #ecfeff; --accent-100: #cffafe; --accent-200: #a5f3fc; --accent-300: #67e8f9; --accent-400: #22d3ee; --accent-500: #06b6d4; --accent-600: #0891b2; --accent-700: #0e7490; /* light-theme ink for cyan text (5.4:1 on white) */ --accent-800: #155e75; --accent-900: #164e63; --accent-950: #083344; /* ===== Neutrals (gray scale) ===== Warm dark-blue undertone — hint of primary in the neutrals. Not pure neutral grey, not a heavy blue tint. Runs light (50) to dark (950) and is the backbone of BOTH themes: dark theme sits near the 900/950 end, light theme sits near the 50/100 end. The ramp itself never changes; which end a component reads from is decided by the semantic tokens. */ --gray-50: #f7f9fc; --gray-100: #eef2f7; --gray-200: #dde3ed; --gray-300: #c0c8d4; --gray-400: #8a93a3; --gray-500: #626a7a; --gray-600: #434b5c; --gray-700: #2f3645; --gray-800: #1f2533; --gray-900: #161b27; --gray-950: #10141d; /* ===== Semantic — state colors ===== Base + "-400" are the dark-theme inks (light, saturated — read on a dark backdrop). "-ink" is what actually goes in component CSS for text/icon color: on dark it equals -400 (unchanged look), on light it swaps to a darker shade of the same hue chosen for ≥4.5:1 against both white and against this color's own pale badge/alert tint (see the contrast note in components.css). Never hardcode -400 for text — use -ink. */ --success: #10b981; --success-400: #34d399; --success-bg: rgba(16,185,129,.15); --success-ink: var(--success-400); --warning: #f59e0b; --warning-400: #fbbf24; --warning-bg: rgba(245,158,11,.15); --warning-ink: var(--warning-400); --danger: #ef4444; --danger-400: #f87171; --danger-bg: rgba(239,68,68,.15); --danger-ink: var(--danger-400); --info: #3b82f6; --info-400: #60a5fa; --info-bg: rgba(59,130,246,.15); --info-ink: var(--info-400); --teal-500: #14b8a6; --teal-400: #2dd4bf; --teal-bg: rgba(20,184,166,.15); --teal-ink: var(--teal-400); --primary-ink: var(--primary-400); --accent-ink: var(--accent-400); /* Primary's tints. Every other hue here has a `-bg` (success, warning, danger, info, teal, agent) — primary was the one that didn't, which is why its tint is hardcoded as `rgba(59,130,246,…)` in a dozen component rules. Same family shape as the agent tokens below, so selected rows, chips and badges can all name what they want instead of spelling it. */ --primary-bg: rgba(59, 130, 246, .15); /* badge, selected tab/segment */ --primary-bg-soft: rgba(59, 130, 246, .08); /* selected row, hovered cell */ --primary-bg-strong: rgba(59, 130, 246, .20); --primary-border: rgba(59, 130, 246, .30); --primary-border-strong: rgba(59, 130, 246, .50); /* Text and icons sitting ON a saturated brand fill (primary button, the mark plaque). White in both themes — the fill is the same saturated blue either way, so this is not a theme decision and must not be mistaken for one. */ --on-primary: #ffffff; /* ===== Agent surfaces (indigo) ===== Used ONLY on Agents-related UI (sessions list, agent panels, agent_run activity events, prompt-mapping accents). Do not use elsewhere. */ --agent-500: #6366f1; --agent-400: #818cf8; --agent-fg: #a5b4fc; /* readable on dark */ --agent-ink: var(--agent-fg); /* light theme swaps this to #4338ca below */ --agent-bg: rgba(99,102,241,.14); --agent-bg-soft: rgba(99,102,241,.10); --agent-bg-strong: rgba(99,102,241,.18); --agent-border: rgba(99,102,241,.30); --agent-border-strong: rgba(99,102,241,.40); /* ===== Semantic role/status tokens ===== Map status concepts to color tokens. Use these in JSX instead of hard-coding `var(--success-ink)` etc. directly. */ --role-running: var(--info-ink); --role-running-bg: var(--info-bg); --role-success: var(--success-ink); --role-success-bg: var(--success-bg); --role-warning: var(--warning-ink); --role-warning-bg: var(--warning-bg); --role-danger: var(--danger-ink); --role-danger-bg: var(--danger-bg); --role-neutral: var(--gray-300); /* themed below — dark uses a light gray, light uses a dark one */ --role-neutral-bg: rgba(55,65,81,.5); /* themed below */ --role-neutral-border: rgba(75,85,99,.3); /* themed below */ --role-agent: var(--agent-ink); --role-agent-bg: var(--agent-bg); /* ===== Density (compact mode) ===== Defaults are comfortable; compact mode (`data-density="compact"` on ) shrinks vertical rhythm. JS does not need to read these — CSS rules below already do. */ --row-h: 48px; /* table rows, list items */ --row-py: 12px; --card-p: 24px; --section-gap: 24px; --input-h: 40px; /* ========================================================= THEME-DEPENDENT TOKENS Everything below this line is redefined, value-for-value, under `:root[data-theme="light"]` and under `@media (prefers-color-scheme: light)` (guarded so an explicit dark choice always wins). The values here are the dark theme — and dark is the default for an unstamped page, matching how this product has always shipped. ========================================================= */ color-scheme: dark; /* ---- Semantic surfaces (3-tier model) ---- Page sits at #131826 (gray-950 raised), cards at #1c2231 (gray-900 raised), modals/dropdowns at #232a3b. */ --bg-base: #131826; --bg-card: rgba(28, 34, 49, 0.6); /* sits on bg-base */ --bg-card-hover: rgba(35, 42, 59, 0.75); --bg-elevated: #232a3b; /* modals, dropdowns, listbox */ --bg-overlay: rgba(8, 11, 18, 0.7); /* modal backdrop */ /* ---- Semantic text ---- The trio sits one step further toward the light end of the ramp than it used to. `--fg-tertiary` was gray-500, which is 2.6:1 on a modal and 3.3:1 on the page — below AA for the 12–13px meta it colors (.cell-quiet, table headers, .stat-card__label). There is no fix inside the old spacing: the ramp has a hole there, and the first AA-passing value between gray-500 and gray-400 lands 1.03:1 from `--fg-secondary`, i.e. visually identical to it. So all three move up a step and keep their spacing (secondary→tertiary is 1.84:1 apart, clearly distinct), which also lines the dark hierarchy up with the light one almost exactly — see the table in the Theming section. */ --fg-primary: #ffffff; /* 14.3:1 worst case */ --fg-secondary: var(--gray-300); /* body secondary · 8.5:1 worst */ --fg-tertiary: var(--gray-400); /* quiet meta · 4.6:1 worst */ --fg-meta: var(--gray-400); /* same requirement as tertiary now that tertiary passes; kept separate so the two can diverge again if they need to */ --fg-placeholder: var(--gray-500); /* deliberately quiet — not content */ --fg-accent: var(--primary-ink); --fg-label: var(--gray-200); /* .label, .field__label — a touch stronger than body, mirroring light's gray-700 */ /* ---- Borders ---- */ --border-card: rgba(67, 75, 92, 0.5); /* gray-600/50 */ --border-card-hover: rgba(99, 106, 122, 0.6); --border-divider: rgba(47, 54, 69, 0.6); /* gray-700/60 */ --border-table: rgba(31, 37, 51, 1); /* ---- Surfaces beyond the 3-tier model ---- "Sunken" fields (inputs, wells), toolbar/footer washes, and neutral control chrome (secondary buttons, segmented tracks, addons). Named by what they're for, not by their current hex — that's what makes them safe to re-theme in one place. */ --surface-well: rgba(22, 27, 39, 0.8); /* input, listbox-trigger, checkbox */ --surface-well-focus: rgba(22, 27, 39, 0.9); /* input:focus */ --surface-well-strong: rgba(17, 24, 39, 0.8); /* input-group */ --surface-wash: rgba(17, 24, 39, 0.4); /* toolbar/footer/modal-footer/nav backdrop */ --surface-wash-strong: rgba(17, 24, 39, 0.6); /* table thead, search box */ --surface-control: rgba(31, 41, 55, 0.5); /* segmented track, addon bg */ --surface-control-soft: rgba(31, 41, 55, 0.4); /* progress track, input-group addon */ --surface-control-strong: rgba(31, 41, 55, 0.8); /* btn-secondary, segmented button */ --surface-hover: var(--gray-700); /* generic row/button hover fill */ --surface-hover-ghost: rgba(31, 41, 55, 0.6); /* btn-ghost:hover */ --surface-whisper: rgba(255, 255, 255, 0.04);/* barely-there hover (inline triggers, nav links) */ --skeleton-bg: rgba(255, 255, 255, 0.05); /* ---- Shadows (Apple-style depth) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,.4); --shadow-xl: 0 20px 40px -8px rgba(0,0,0,.5); --shadow-modal: 0 25px 50px -12px rgba(0,0,0,.5); --shadow-glow-primary: 0 0 24px rgba(59,130,246,.25); --shadow-glow-accent: 0 0 24px rgba(6,182,212,.25); --shadow-black-soft: rgba(0, 0, 0, 0.2); /* first layer of .btn box-shadows */ --shadow-white-hairline: rgba(255, 255, 255, 0.1); /* the glossy top highlight on saturated buttons */ /* ---- Showcase-chrome-only (design-system.html itself) ---- */ --swatch-border: rgba(255, 255, 255, 0.08); --frame-texture: rgba(255, 255, 255, 0.04); --frame-wash: rgba(255, 255, 255, 0.015); /* ===== Motion ===== */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration: 200ms; /* ===== Type — families ===== */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Inter', system-ui, sans-serif; /* Cal Sans fallback */ --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ===== Radii ===== */ --radius-sm: 6px; /* pills, small badges */ --radius-md: 8px; /* inputs-sm, badges */ --radius-lg: 10px; /* icon-btn, btn-sm */ --radius-xl: 12px; /* cards, inputs, buttons */ --radius-2xl: 16px; /* modals, top-level shells */ --radius-full: 9999px; /* ===== Spacing cadence (locked: 8/12/16/24/32) ===== */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* ===== Type — base sizes ===== */ --text-xs: 12px; --lh-xs: 16px; --text-sm: 14px; --lh-sm: 20px; --text-base: 16px; --lh-base: 24px; --text-lg: 18px; --lh-lg: 28px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 24px; --lh-2xl: 32px; --text-3xl: 30px; --lh-3xl: 36px; --text-4xl: 36px; --lh-4xl: 40px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.05em; } /* =========================================================== LIGHT THEME Redefines only the theme-dependent block above — the ramp (primary-*, accent-*, gray-*, success/warning/danger/info/teal/agent bases) is untouched, so the Colors swatch chart always shows the same literal palette regardless of which theme is active. Two ways in, same values, so both "the OS is set to light" and "someone clicked the toggle" land on the same look: - `@media (prefers-color-scheme: light)` — respected only while nobody has stamped an explicit choice on . - `[data-theme="light"]` — wins outright, including over a dark OS. An explicit `data-theme="dark"` always beats the OS the other way. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --success-ink: #047857; /* success-700 · 5.5:1 on white, 4.7:1 on its own badge tint */ --warning-ink: #92400e; /* warning-800 · 7.1:1 on white, 6.3:1 on tint (700 was borderline on tint) */ --danger-ink: #b91c1c; /* danger-700 · 6.5:1 on white, 5.3:1 on tint */ --info-ink: var(--primary-700); --teal-ink: #115e59; /* teal-800 · 5.9:1 on white, 6.6:1 on tint (700 was borderline on tint) */ --primary-ink: var(--primary-700); --accent-ink: var(--accent-700); --agent-ink: #4338ca; /* indigo-700 · 7.9:1 on white, 6.6:1 on its own tint */ --role-neutral: var(--gray-700); --role-neutral-bg: rgba(15, 23, 42, 0.055); --role-neutral-border: rgba(15, 23, 42, 0.14); --bg-base: var(--gray-50); --bg-card: rgba(255, 255, 255, 0.72); --bg-card-hover: rgba(255, 255, 255, 0.92); --bg-elevated: #ffffff; --bg-overlay: rgba(15, 20, 30, 0.35); --fg-primary: var(--gray-950); --fg-secondary: var(--gray-600); --fg-tertiary: var(--gray-500); --fg-meta: var(--gray-500); --fg-placeholder: var(--gray-400); --fg-accent: var(--primary-ink); --fg-label: var(--gray-700); --border-card: rgba(15, 23, 42, 0.10); --border-card-hover: rgba(15, 23, 42, 0.16); --border-divider: rgba(15, 23, 42, 0.08); --border-table: rgba(15, 23, 42, 0.06); --surface-well: rgba(15, 23, 42, 0.035); --surface-well-focus: #ffffff; --surface-well-strong: rgba(15, 23, 42, 0.045); --surface-wash: rgba(15, 23, 42, 0.025); --surface-wash-strong: rgba(15, 23, 42, 0.04); --surface-control: rgba(15, 23, 42, 0.05); --surface-control-soft: rgba(15, 23, 42, 0.04); --surface-control-strong: rgba(15, 23, 42, 0.07); --surface-hover: var(--gray-100); --surface-hover-ghost: rgba(15, 23, 42, 0.045); --surface-whisper: rgba(15, 23, 42, 0.03); --skeleton-bg: rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 1px 2px rgba(15,23,42,.08); --shadow-lg: 0 10px 25px -5px rgba(15,23,42,.10); --shadow-xl: 0 20px 40px -8px rgba(15,23,42,.14); --shadow-modal: 0 25px 50px -12px rgba(15,23,42,.18); --shadow-glow-primary: 0 0 20px rgba(37,99,235,.18); --shadow-glow-accent: 0 0 20px rgba(14,116,144,.18); --shadow-black-soft: rgba(15, 23, 42, 0.10); --shadow-white-hairline: rgba(255, 255, 255, 0); /* no glossy highlight on light buttons */ --swatch-border: rgba(15, 23, 42, 0.10); --frame-texture: rgba(15, 23, 42, 0.035); --frame-wash: rgba(15, 23, 42, 0.012); } } :root[data-theme="light"] { color-scheme: light; --success-ink: #047857; --warning-ink: #92400e; --danger-ink: #b91c1c; --info-ink: var(--primary-700); --teal-ink: #115e59; --primary-ink: var(--primary-700); --accent-ink: var(--accent-700); --agent-ink: #4338ca; --role-neutral: var(--gray-700); --role-neutral-bg: rgba(15, 23, 42, 0.055); --role-neutral-border: rgba(15, 23, 42, 0.14); --bg-base: var(--gray-50); --bg-card: rgba(255, 255, 255, 0.72); --bg-card-hover: rgba(255, 255, 255, 0.92); --bg-elevated: #ffffff; --bg-overlay: rgba(15, 20, 30, 0.35); --fg-primary: var(--gray-950); --fg-secondary: var(--gray-600); --fg-tertiary: var(--gray-500); --fg-meta: var(--gray-500); --fg-placeholder: var(--gray-400); --fg-accent: var(--primary-ink); --fg-label: var(--gray-700); --border-card: rgba(15, 23, 42, 0.10); --border-card-hover: rgba(15, 23, 42, 0.16); --border-divider: rgba(15, 23, 42, 0.08); --border-table: rgba(15, 23, 42, 0.06); --surface-well: rgba(15, 23, 42, 0.035); --surface-well-focus: #ffffff; --surface-well-strong: rgba(15, 23, 42, 0.045); --surface-wash: rgba(15, 23, 42, 0.025); --surface-wash-strong: rgba(15, 23, 42, 0.04); --surface-control: rgba(15, 23, 42, 0.05); --surface-control-soft: rgba(15, 23, 42, 0.04); --surface-control-strong: rgba(15, 23, 42, 0.07); --surface-hover: var(--gray-100); --surface-hover-ghost: rgba(15, 23, 42, 0.045); --surface-whisper: rgba(15, 23, 42, 0.03); --skeleton-bg: rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 1px 2px rgba(15,23,42,.08); --shadow-lg: 0 10px 25px -5px rgba(15,23,42,.10); --shadow-xl: 0 20px 40px -8px rgba(15,23,42,.14); --shadow-modal: 0 25px 50px -12px rgba(15,23,42,.18); --shadow-glow-primary: 0 0 20px rgba(37,99,235,.18); --shadow-glow-accent: 0 0 20px rgba(14,116,144,.18); --shadow-black-soft: rgba(15, 23, 42, 0.10); --shadow-white-hairline: rgba(255, 255, 255, 0); --swatch-border: rgba(15, 23, 42, 0.10); --frame-texture: rgba(15, 23, 42, 0.035); --frame-wash: rgba(15, 23, 42, 0.012); } /* =========================================================== Semantic type roles (use these, not raw sizes) =========================================================== */ html, body { background: var(--bg-base); color: var(--fg-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Cross-fade the handful of properties that actually change when the theme flips, so switching feels like a dissolve rather than a flash. Scoped to just these four — animating `all` on every element is what makes theme toggles feel laggy on a page this dense. */ body, .card, .card-elevated, .btn, .input, .listbox-trigger, .listbox-popup, .badge, .table-wrap, .modal, .table thead th, .stat-card { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { body, .card, .card-elevated, .btn, .input, .listbox-trigger, .listbox-popup, .badge, .table-wrap, .modal, .table thead th, .stat-card { transition: none; } } .page-title { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } @media (min-width: 640px) { .page-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); } } .section-title { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--fg-primary); } .row-title { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); } .body { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-primary); } .body-secondary { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-secondary); } .meta { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-meta); } .stat-value { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--fg-primary); } .stat-label { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: 2px; } .nav-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; /* Was a raw gray-500 — the one text color left bypassing the theme layer, and 3.3:1 on the dark page. The quiet-meta role is exactly what it wants. */ color: var(--fg-tertiary); } code, pre, .mono { font-family: var(--font-mono); font-size: 13px; }