/* ───────────────────────────────────────────────────────────────────────── Design tokens. The old palette came straight from the desktop's terminal theme, which is why the page read as one: near-black, cold, and a hairline around every object. Separation here comes from *tone and space* instead — a surface is a step lighter than what it sits on, and things are told apart by the room between them. Borders are the exception, not the rule. What is written here is only the *starting* palette — the sign-in screen, and a phone whose Mac has not answered yet. Once the desktop is on the line it sends its own theme and its own project accent, and every token below is overwritten on . See applyDesktopTheme(). That is the whole reason each rule reads var(--…) rather than a literal: nothing in the stylesheet may assume a colour it was authored with. Both starting schemes are real; the system setting picks one. ───────────────────────────────────────────────────────────────────────── */ :root { /* Paper. Warm rather than white — a flat #fff under a page of text is the thing that makes a web app feel like a spreadsheet. */ --bg: #faf9f5; --surface: #ffffff; --raised: #f0eee6; --sunken: #f5f3ec; --text: #1f1e1d; --dim: #5f5e5b; --muted: #93918c; --line: #e7e4da; --accent: #c25f37; --accent-ink: #ffffff; --ok: #2f855a; --bad: #c0392b; --doing: #b7791f; --done: #2f855a; --wash: #00000008; --wash-2: #00000012; --shadow: 0 1px 2px #0000000a, 0 8px 24px -12px #00000024; --shadow-lg: 0 24px 64px -24px #00000038; --side-w: 268px; --convo-w: 252px; --read: 46rem; /* a comfortable measure, as on any real site */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --tap: 44px; --ease: 160ms cubic-bezier(.2, 0, .2, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #232321; --surface: #2c2c2a; --raised: #363634; --sunken: #1c1c1b; --text: #f2f1ec; --dim: #b9b7b1; --muted: #8d8b86; --line: #3a3a37; --accent: #d97757; --accent-ink: #23211f; --ok: #6ee7a8; --bad: #f28b82; --doing: #e2b04a; --done: #6ee7a8; --wash: #ffffff0a; --wash-2: #ffffff14; --shadow: 0 1px 2px #00000040, 0 8px 24px -12px #00000070; --shadow-lg: 0 24px 64px -24px #000000a0; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #232321; --surface: #2c2c2a; --raised: #363634; --sunken: #1c1c1b; --text: #f2f1ec; --dim: #b9b7b1; --muted: #8d8b86; --line: #3a3a37; --accent: #d97757; --accent-ink: #23211f; --ok: #6ee7a8; --bad: #f28b82; --doing: #e2b04a; --done: #6ee7a8; --wash: #ffffff0a; --wash-2: #ffffff14; --shadow: 0 1px 2px #00000040, 0 8px 24px -12px #00000070; --shadow-lg: 0 24px 64px -24px #000000a0; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); overscroll-behavior: none; font: 15px/1.6 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @supports (height: 100dvh) { html, body { height: 100dvh; } } button, input, textarea, select { font: inherit; color: inherit; } button, .vtab, .key, .opt, .proj, .pcard, .tcard { touch-action: manipulation; } .hide { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Overlay-style scrollbars: a visible track draws a hard line down the side of a panel, which is exactly the seam this design is trying to lose. */ * { scrollbar-width: thin; scrollbar-color: var(--wash-2) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wash-2); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; }