@import "tailwindcss"; /* ───────────────────────────────────────────────────────────────────────── Design tokens. Tailwind v4 @theme registers the variables AND generates utilities like `bg-surface-0`, `text-fg-0`. Dark theme is the baseline; light theme overrides the same variable names below. ───────────────────────────────────────────────────────────────────────── */ @theme { --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Surface (dark baseline) */ --color-surface-0: #0b0d12; --color-surface-1: #12151c; --color-surface-2: #1a1e27; --color-surface-3: #242936; --color-border: #1f2430; --color-border-strong: #2d3342; /* Foreground (dark baseline) */ --color-fg-0: #e4e7ef; --color-fg-1: #a8afc0; --color-fg-2: #6c7488; --color-fg-3: #454c5e; /* Text color used on top of a solid accent pill (so contrast stays legible regardless of which accent). Dark theme: near-black. */ --color-on-accent: #0b0d12; /* Category accents (dark baseline) */ --color-cat-conversation: #22d3ee; --color-cat-config: #a78bfa; --color-cat-lifecycle: #94a3b8; --color-cat-subagent: #8b5cf6; --color-cat-approval: #fb923c; --color-cat-ephemeral: #facc15; --color-cat-meta: #6366f1; --color-cat-tools: #f59e0b; /* Conversation subfamily */ --color-user: #38bdf8; --color-assistant: #22d3ee; --color-tool: #f59e0b; --color-compaction: #f97316; --color-turn: #14b8a6; /* Severity */ --color-sev-info: #60a5fa; --color-sev-success: #4ade80; --color-sev-warning: #fbbf24; --color-sev-error: #f87171; } /* ───────────────────────────────────────────────────────────────────────── Light-theme overrides. Applied when . Accents get darker variants for AA contrast on light backgrounds. ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --color-surface-0: #fafbfc; --color-surface-1: #eef1f6; --color-surface-2: #e4e8f0; --color-surface-3: #d4d9e4; --color-border: #dde1ea; --color-border-strong: #bfc6d4; --color-fg-0: #0f1219; --color-fg-1: #3a4154; --color-fg-2: #616878; --color-fg-3: #9097a8; --color-on-accent: #fafbfc; --color-cat-conversation: #0891b2; --color-cat-config: #7c3aed; --color-cat-lifecycle: #475569; --color-cat-subagent: #6d28d9; --color-cat-approval: #c2410c; --color-cat-ephemeral: #a16207; --color-cat-meta: #4338ca; --color-cat-tools: #b45309; --color-user: #0369a1; --color-assistant: #0891b2; --color-tool: #b45309; --color-compaction: #c2410c; --color-turn: #0d9488; --color-sev-info: #2563eb; --color-sev-success: #15803d; --color-sev-warning: #b45309; --color-sev-error: #b91c1c; } :root[data-theme="dark"] { color-scheme: dark; } /* ───────────────────────────────────────────────────────────────────────── Base ───────────────────────────────────────────────────────────────────────── */ html, body, #root { height: 100%; margin: 0; } body { font-family: var(--font-ui); font-size: 13px; line-height: 1.45; background-color: var(--color-surface-0); color: var(--color-fg-0); } /* Subtle noise grain only on dark — adds industrial texture. On light it just looks dirty, so omit. */ :root:not([data-theme="light"]) body { background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; } /* Force-disable ligatures and contextual alternates in monospace — debug tool must render characters verbatim. */ .font-mono { font-feature-settings: "liga" 0, "calt" 0, "ss01" 0; font-variant-ligatures: none; font-family: var(--font-mono); } .tabular { font-variant-numeric: tabular-nums; } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 0; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--color-fg-3); background-clip: padding-box; border: 2px solid transparent; } ::selection { background-color: color-mix(in oklab, var(--color-cat-conversation) 30%, transparent); color: var(--color-fg-0); } *:focus-visible { outline: 1px solid var(--color-cat-conversation); outline-offset: 1px; } /* Button + anchor element resets — kept inside @layer base so Tailwind utilities (px-*, py-*, etc.) in the utilities layer win over them. Unlayered rules would otherwise beat layered utilities in the cascade. */ @layer base { button { font-family: inherit; font-size: inherit; background: none; border: none; padding: 0; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } } .rule { border-top: 1px solid var(--color-border); } .accent-bar { width: 3px; flex-shrink: 0; align-self: stretch; } .ephemeral-border { border: 1px dashed var(--color-cat-ephemeral); border-radius: 2px; } .ephemeral-border-info { border-color: var(--color-sev-info); } .ephemeral-border-success { border-color: var(--color-sev-success); } .ephemeral-border-warning { border-color: var(--color-sev-warning); } .ephemeral-border-error { border-color: var(--color-sev-error); } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; line-height: 1.4; }