/* Roundtable design tokens — THE INSTRUMENT (2026-08-11). ------------------------------------------------------------------ Alex's brief: "light, usable and functional, but it should be scary powerful… it's a density/layout/font thing." Approved from the v3 mockup. Shopify keeps only the anatomy (top bar, left nav, right rail); Foundry supplies the density; the monospace becomes the product's primary voice and prose is the exception. THE NAMES ARE KEPT ON PURPOSE. ~200 renderer call sites read --ink/--card/--line/--muted, so redefining the values here restyles the whole app without touching a single renderer — the same trick the 2026-08-09 merge used, and the reason this pass is a reskin rather than a rebuild. TWO REAL THEMES, not an inversion. `data-theme` on wins in both directions; the OS preference is the default when nothing is stamped. Dark is graphite-cool with terminal accents, because a green-tinted inversion of a light palette reads as a filter rather than a second design. BRAND V2 (2026-08-14, Alex's explicit instruction this evening): the evergreen/moss green identity is RETIRED as the brand accent, product-wide. The one accent (--blue/--teal/--moss/--moss-ink/--bz) moves from green to the pastel-purple family from the reskinned marketing site (scryos-marketing/site/preview.html, the source of truth read for these exact values): #7c5cc4 is the text-safe purple for light-surface text/borders/fills (≥4.5:1 on white), #a78bfa is the lighter "core" purple used where dark surfaces give more contrast headroom, #ede9fe/#241f38 are the pale/deep tint backgrounds. --ink/--bg move from near-black/cool-grey to the marketing site's concrete-grey family (#3a3d42 ink, #f6f6f8 field); --muted (body copy) moves to its #5b5f5a. Dark surfaces move to a neutral concrete family (#0b0d0c/#141614…) instead of the old green-tinted graphite, per Alex's explicit "not pure green-tinted obsidian" instruction. --good/--bad/--warn stay their semantic hexes untouched — status colour is not brand colour, and a "healthy" green dot must keep meaning healthy. --future keeps its own distinct violet (#5f4fa8/#a795e8) on purpose: it already read as a different hue family from the old green accent, and keeping it different from the NEW purple accent still matters — "declared but unbuilt" must not collide with ordinary brand emphasis now that emphasis is purple too. --ai (amber) is untouched for the same reason. --reticle (the corner-bracket ticks on every panel/card via .panel::before/::after etc. — see port.css/styles.css/setup.css) moves from neutral grey to a purple tint, so the existing corner-mark instrumentation reads as brand-v2 on sight rather than needing new markup. Five tokens are new: --dot (the page-canvas dot-grid, matching marketing's #d9dae0) and --glass-bg/ --glass-card-bg/--glass-border/--glass-hi (the rgba glass surfaces for topbars and major cards — backdrop-filter blur/saturate is applied at the call site since a filter isn't a colour token). */ :root { color-scheme: light; /* ink + surfaces */ --ink:#3a3d42; --text:#3a3d42; --navy:#6247a3; --bg:#f6f6f8; --card:#ffffff; --surface2:#f7f9f9; --subtle:#fafbfb; --line:#d8dee2; --soft:#e8ecee; --chip:#eef1f2; /* the corner brackets on every panel — instrumentation, not decoration */ --reticle:#b9a8f0; /* interactive — the one accent is Brand v2 pastel purple, text-safe on white (see the file header) */ --blue:#7c5cc4; --teal:#7c5cc4; --blue-bg:#ede9fe; --moss:#7c5cc4; --moss-ink:#6247a3; --moss-bg:#ede9fe; /* semantic state — the only place red/amber/green may come from */ --good:#177347; --good-bg:#e2f1e8; --bad:#ad2917; --bad-bg:#f8e9e6; --warn:#a55311; --warn-bg:#f9efe2; /* text hierarchy */ --muted:#5b5f5a; --faint:#98a2a9; --disabled:#bcc4c9; /* AI surfaces (amber-ink register, readable on white) */ --ai:#9a7524; --ai-bg:#f7edd9; /* Declared and not built. Its own hue on purpose: good/warn/bad all judge something that EXISTS, and this judges nothing — it marks a concept the system intends. Kept a distinct violet from the Brand v2 accent purple on purpose (see file header). */ --future:#5f4fa8; --future-bg:#edeaf7; /* the status line is dark in BOTH themes — it is a terminal, and a terminal that turns white in daylight stops reading as one. Brand v2: the concrete family (#0b0d0c/#101211…), not the old green-tinted graphite. */ --topbar:#101211; --topbar-ink:#e6eae8; --topbar-dim:#8b968f; --term-good:#3ddc97; --term-warn:#e8b04b; --term-dim:#6d7a74; /* Brand v2 glass: rgba surfaces for topbars and major cards. Blur/ saturate live at the call site (backdrop-filter is not a colour). */ --dot:#d9dae0; --glass-bg:rgba(255,255,255,.72); --glass-card-bg:rgba(255,255,255,.55); --glass-border:rgba(255,255,255,.7); --glass-hi:rgba(255,255,255,.85); /* geometry — SHARP corners (design prototype, 2026-08-15, owner instruction: "sharp rectangular borders separating pertinent information"). --r drops from 2px to 0; port.css additionally force-zeroes every hardcoded border-radius left in ledger.css and any JS inline style, so nothing in the app stays soft by accident. */ --r:0; --s2:12px; --s3:18px; --headh:46px; --shadow:none; /* type — mono FIRST. This one line is most of the character change. */ --mono:"GT America Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --sans:"Switzer","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --disp:"Clash Display",var(--sans); /* functional frames: border color = function. */ --bz:#7c5cc4; /* motion — one duration family, reduced-motion stands it all down */ --dur-fast:140ms; --dur:220ms; --dur-slow:340ms; --ease:cubic-bezier(0.2, 0, 0, 1); } /* Dark: the cockpit. Neutral concrete with the same purple accent, lifted to its lighter "core" value where dark surfaces give more contrast headroom — not a green-tinted inversion of the light palette, and not the old green-tinted graphite either. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink:#f7f7f3; --text:#f7f7f3; --navy:#c4b5fd; --bg:#0b0d0c; --card:#141614; --surface2:#181a18; --subtle:#111311; --line:#282a28; --soft:#202220; --chip:#1c1e1c; --reticle:#8f7cc7; --blue:#a78bfa; --teal:#a78bfa; --blue-bg:#241f38; --moss:#a78bfa; --moss-ink:#c4b5fd; --moss-bg:#241f38; --good:#3ddc97; --good-bg:#0e2b1c; --bad:#ef7059; --bad-bg:#2d1510; --warn:#e8b04b; --warn-bg:#2a2010; --muted:#b9bcc2; --faint:#6f736f; --disabled:#3a3d3a; --ai:#d9a13d; --ai-bg:#2a2010; --future:#a795e8; --future-bg:#1f1a33; --topbar:#0b0d0c; --topbar-dim:#727f78; --dot:#202220; --glass-bg:rgba(11,13,12,.62); --glass-card-bg:rgba(20,22,20,.5); --glass-border:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.06); --bz:#a78bfa; } } :root[data-theme="dark"] { color-scheme: dark; --ink:#f7f7f3; --text:#f7f7f3; --navy:#c4b5fd; --bg:#0b0d0c; --card:#141614; --surface2:#181a18; --subtle:#111311; --line:#282a28; --soft:#202220; --chip:#1c1e1c; --reticle:#8f7cc7; --blue:#a78bfa; --teal:#a78bfa; --blue-bg:#241f38; --moss:#a78bfa; --moss-ink:#c4b5fd; --moss-bg:#241f38; --good:#3ddc97; --good-bg:#0e2b1c; --bad:#ef7059; --bad-bg:#2d1510; --warn:#e8b04b; --warn-bg:#2a2010; --muted:#b9bcc2; --faint:#6f736f; --disabled:#3a3d3a; --ai:#d9a13d; --ai-bg:#2a2010; --future:#a795e8; --future-bg:#1f1a33; --topbar:#0b0d0c; --topbar-dim:#727f78; --dot:#202220; --glass-bg:rgba(11,13,12,.62); --glass-card-bg:rgba(20,22,20,.5); --glass-border:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.06); --bz:#a78bfa; }