/* ── Design tokens ──────────────────────────────────────────────────────────── The palette, type ramp, shadows and sizing every surface reads. Isolated so the two products cannot drift apart on colour, and so adopting the ecosystem shell's tokens later is a swap of THIS file rather than an edit of 5,900 lines. Nothing here selects anything; it only declares. Note: public/cosm/tokens.css is a SECOND, older token set, used only by the pre-login landing page. The two have never agreed. Reconciling them is worth doing, but it changes how things look, so it is not done here. */ :root { --dark: var(--ofself-surface, #f5f5f5); /* THE SHELL'S CANVAS (beige retired 2026-08-16) */ --dark2: var(--ofself-surface-raised, #fefefc); /* the shell's raised surface */ --dark3: var(--ofself-surface, #f5f5f5); /* nav/sidebar ride the same neutral */ --ink: var(--ofself-ink, #111111); /* the shell's neutral ink */ --ink2: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.85); --ink3: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.62); --ink4: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.42); --ink-inv: #FAF5F0; /* invariant light text on dark/moss buttons */ --moss: #5A6B48; --moss-mid:#7A9469; --moss-lt: #94AE88; --moss-pale: rgba(90,107,72,0.14); /* accent-dim — tag/badge bg */ --terra: #B04E28; --terra-mid:#C76C4A; --terra-lt:#DC9878; --terra-pale: rgba(176,78,40,0.12); --rose: #C4636A; --border: var(--seam-line, rgb(var(--ofself-ink-rgb, 17 17 17) / 0.11)); --border-lt: rgb(var(--ofself-ink-rgb, 17 17 17) / 0.06); /* THE SEAM, WHOLE — width AND ink in ONE declaration (owner report 2026-08-23: "the content seam lines are thinner than the block gap we've set"). The ink was already the kit's (--border → --seam-line); the WIDTH was not, and every content cut was hand-written `1px` while the gutters beside them ran at the dial's setting. --ofself-seam-w is the kit's own knob and moves with --ofself-block-gap in lockstep — boot.js writes both from the one spacing slider — so a seam drawn with this token is exactly as wide as the canvas cuts around it, in every mode, forever. Use `border-*: var(--seam)` for every DIVISION BETWEEN CONTENT CELLS. --border alone stays for component chrome that is an outline rather than a cut: fields, chips, cards, anything with a radius. */ --seam: var(--ofself-seam-w, 1px) solid var(--border); /* THE ACCENT ENTERS BY THE ONE DOOR (owner report 2026-08-17: the hover tint stayed the shell default). This app set --accent — which is the kit's DERIVED token (tokens.css: `--accent: var(--app-accent, moss)`) — and never set --app-accent at all. So the green reached the few tokens that read --accent directly, while everything the kit derives from --app-accent fell back to its neutral charcoal: the focus ring, the chrome ink, and BOTH hover washes. Row hovers were green and nav-tile hovers were grey, in the same window, which is exactly the "only the shell default" the owner saw. Set the knob and every kit seat follows. */ --app-accent: #5A6B48; --app-accent-rgb: 90 107 72; --app-accent-deep: #47563a; /* THE KIT'S FACES, not our own copies. The shell self-hosts all three (@ofself/shell/fonts/*.woff2, loaded by /shell/fonts/fonts.css), so naming them here as literals meant the app asked Google Fonts for Fraunces + Inter + JetBrains Mono in a render-blocking link — a face the kit already had on disk (JetBrains Mono) plus two it did not need. The kit ships no serif; its "special" voice is the DISPLAY face (Space Grotesk), so --font-serif maps there. That is a visible change wherever --font-serif is used: those titles are now grotesk, not Fraunces. */ --font-serif: var(--ofself-font-display); --font-sans: var(--ofself-font-sans); --font-mono: var(--ofself-font-mono); --shadow-tile: 0 8px 28px rgba(44,32,25,0.13), 0 1px 4px rgba(44,32,25,0.07); --shadow-card: 0 2px 10px rgba(44,32,25,0.09); --sidebar-w: var(--ofself-nav-col-w, 200px); /* the kit's ONE nav-column width */ --sidebar-w-collapsed: 48px; --chat-w: 360px; }