/* Design tokens — ported verbatim from prototype.css */ :root { /* Accent locked at hue 120 (true green) */ --accent: oklch(0.78 0.18 120); --accent-soft: oklch(0.94 0.05 120); --accent-ink: oklch(0.30 0.10 120); --accent-on: oklch(0.20 0.08 120); /* fg on bright accent bg */ /* Surfaces */ --paper: #fdfcf8; /* main bg */ --paper-2: #f3f0e7; /* hover */ --paper-3: #fbfaf2; /* sub-bar / table head */ --paper-4: #ffffff; /* card body */ /* Ink */ --ink: #1c1a17; --ink-2: #4a453d; --ink-3: #7a7468; --ink-4: #b3ad9f; /* Rules */ --rule: #d8d3c4; --rule-2: #e6e1d2; /* Top bar */ --topbar-bg: #1c1a17; --topbar-fg: #fdfcf8; --topbar-input-bg: rgba(255,255,255,0.06); --topbar-input-bd: rgba(255,255,255,0.15); /* Tag base */ --tag-bg: #ebe7d8; --tag-host-bg: #d9e6dd; --tag-host-fg: #2f5a3f; /* Turn backgrounds */ --turn-user: #f5f0e0; --turn-asst: #ffffff; --turn-tool: #f8f5e9; /* Status */ --ok: #3b6e3b; --ok-bg: #d6efd6; --warn: #c89a3a; --warn-bg: #fdebcc; --err: #b04a2a; --err-bg: #f5dccf; /* Misc */ --scrim: rgba(28,26,23,0.45); --shadow: 0 20px 60px rgba(0,0,0,0.25); --shadow-pop: 0 8px 24px rgba(0,0,0,0.18); --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --sans: 'Inter', system-ui, sans-serif; } [data-density="cozy"] { --row-pad: 4px; } [data-density="compact"] { --row-pad: 2px; } [data-theme="dark"] { /* Same accent hue but tuned for dark surface contrast */ --accent: oklch(0.78 0.16 120); --accent-soft: oklch(0.30 0.08 120); --accent-ink: oklch(0.86 0.16 120); --accent-on: oklch(0.18 0.06 120); /* fg on bright accent bg */ --paper: #15140f; --paper-2: #211f17; --paper-3: #1a1813; --paper-4: #1d1b14; --ink: #e8e3d4; --ink-2: #b8b2a0; --ink-3: #807a6b; --ink-4: #4a4538; --rule: #2c2920; --rule-2: #24221a; --topbar-bg: #0d0c08; --topbar-fg: #e8e3d4; --topbar-input-bg: rgba(255,255,255,0.04); --topbar-input-bd: rgba(255,255,255,0.10); --tag-bg: #2a2820; --tag-host-bg: #1f3327; --tag-host-fg: #8fc09e; --turn-user: #1f1d15; --turn-asst: #15140f; --turn-tool: #211f17; --ok: #6fb46f; --ok-bg: #1f3327; --warn: #d4a648; --warn-bg: #3a2e15; --err: #d97052; --err-bg: #3a1f15; --scrim: rgba(0,0,0,0.65); --shadow: 0 20px 60px rgba(0,0,0,0.6); --shadow-pop: 0 8px 24px rgba(0,0,0,0.5); } /* Base reset */ * { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 12px; line-height: 1.4; -webkit-font-smoothing: antialiased; }