/* Stitch Slop — 2a "Zoned editor" chrome (Claude Design handoff 2026-08-11). * Industry design-system tokens, square-cornered blueprint look. Layout rule * from the design: a control lives at the edge that matches its scope — * job (top), tools (left), placement (canvas bar), object (right panel), * viewing/diagnostics (canvas overlays), thread (bottom strip). */ :root { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #4d6e8f; /* 4.76:1 under --color-bg text on fills and as hover text (WCAG 1.4.3; was #5980a6, 3.71:1) */ --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; /* Semantic surfaces, so dark mode has one place to re-point them. */ --color-canvas: #fbfbfc; /* default paper when doc.canvasColor is AUTO */ --color-card: #ffffff; /* raised cards, popovers, thumbnails */ --color-danger: #c0392b; /* destructive actions (delete / leave / purge) */ /* Secondary TEXT (labels, units, hints, counts). Separate from the neutral ramp, whose 500/600 steps also draw borders and icons: as text they were 2.3–4.3:1 on the panel backgrounds, under WCAG 1.4.3's 4.5:1. These hold ≥4.8:1 on bg, surface, neutral-100/200 and card. */ --color-text-muted: #646467; /* was neutral-500 as text */ --color-text-subtle: #5d5d60; /* was neutral-600 as text */ /* On-screen cues (overlay.js): violet, so a tip never reads as the blue selection or an amber warning. Ring ≥3:1 on any paper (the halo and edge carry it on a dark one). */ --cue-ring: #6d28d9; --cue-halo: #ffffff; --cue-edge: #1d1f20; --cue-ink: #5b21b6; --cue-mark-ink: #ffffff; --cue-dim: rgb(0 0 0 / .35); --cue-mark-bg: #000000; --cue-mark-fg: #ffffff; /* default marker: maximum contrast */ --warn: #a8813f; --warn-text: #7d5f26; /* --warn as TEXT: #a8813f is 2.9–3.6:1 on the panels; this is ≥4.8 */ --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Barlow", system-ui, -apple-system, sans-serif; --shadow-sm: 0 1px 3px color-mix(in srgb, #1d1f20 14%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, #1d1f20 18%, transparent); } /* Dark mode (user go 2026-09-13). UI-ONLY: this re-points the palette tokens; the 344 var() uses across the sheet flip for free. The canvas paper is NOT themed here — it follows the theme only while AUTO, decided in render.js from --color-canvas. The neutral ramp is INVERTED (100 = subtlest fill … 900 = strongest text) so a rule written for light keeps its meaning in dark. Set on [data-theme="dark"] which the boot script stamps before first paint. */ :root[data-theme="dark"] { --color-bg: #17191b; --color-surface: #212427; --color-text: #e7e8ea; --color-accent: #6f99c2; --color-divider: color-mix(in srgb, #e7e8ea 18%, transparent); --color-neutral-100: #202325; --color-neutral-200: #2a2d30; --color-neutral-300: #363a3d; --color-neutral-400: #4b4f53; --color-neutral-500: #7d8186; --color-neutral-600: #9a9ea3; --color-neutral-700: #b7babe; --color-neutral-800: #d2d4d7; --color-neutral-900: #edeef0; --color-accent-100: #1f2c38; --color-accent-300: #2d4257; --color-accent-400: #3c5b78; --color-accent-600: #7ba1c7; --color-accent-700: #9abcdd; --color-accent-800: #b9d3ef; --color-accent-900: #d6e5f7; --color-canvas: #1a1c1e; --color-card: #26292c; --color-danger: #e05a4d; /* lifted so it reads on a dark surface */ --color-text-muted: #909499; /* ≥4.5:1 on every dark surface (n500 was 3.5) */ --color-text-subtle: #9a9ea3; --cue-ring: #a78bfa; --cue-halo: #111214; --cue-edge: #ffffff; --cue-ink: #c4b5fd; --cue-mark-ink: #111214; --cue-dim: rgb(0 0 0 / .5); --cue-mark-bg: #ffffff; --cue-mark-fg: #000000; --warn: #d0a24e; --warn-text: #d0a24e; /* already ≥5.9:1 on every dark surface */ --shadow-sm: 0 1px 3px color-mix(in srgb, #000000 40%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, #000000 50%, transparent); /* Native controls, scrollbars and