/* ── THEME TOKENS ───────────────────────────────────────────────────────────── Dark is the default. Light overrides by adding class="light" on . All colours in app.css must use these variables — no hardcoded hex. Palette: Strakus FLAT-COMIC — yellow / blue / cyan / green, cyan featured, NO purple. Dark = deep-navy comic night; Light = warm comic paper. Full spec: Obsidian/60 Guidelines/Design Language.md (Phase 1 = colour tokens. Comic structure — ink outlines, hard offset shadows, rounded radii, friendly font — is a later, browser-verified pass.) ───────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces — comic night (deep navy, lifted panels) */ --bg: #07142B; --surface: #142A52; --surface2: #1D3A6B; /* Depth ladder (comic layered panels, lightest → base) + halftone dot. Widened 2026-08-01: the first pass (#1C3A6E/#0E2145/#07142B) was only ~10-25 RGB apart per step — mathematically a ladder, but at low dark-mode luminance the eye can't resolve gaps that small (confirmed by computed- style check: values applied correctly, still read as one flat colour in a live screenshot). Dark surfaces need a much bigger jump than light ones for the same perceived elevation. */ --depth-top: #33549A; /* sidebar / rail / topbar — LIGHTEST, a clear lifted panel */ --depth-mid: #15275A; /* editor + playground — clear middle step */ --dot: rgba(160, 195, 255, .10); --bg2: var(--surface2); /* fixes 5 pre-existing app.css uses of an undefined --bg2 (transparent boxes) */ /* Borders */ --border: #26365E; --border2: #364B7E; /* Text */ --text: #E7EFFF; --text-strong: #FFFFFF; --dim: #92A6C6; --dimmer: #465A82; /* Accent (cyan — comic brand) */ --accent: #2AD6EF; --accent-dim: #103049; --accent-glow: rgba(42, 214, 239, 0.16); --c-accent-btn: var(--accent); /* dark's accent is already light enough for button fills */ /* Semantic colours */ --green: #38DE86; --green-dim: rgba(56, 222, 134, 0.12); --red: #FF6A5A; --yellow: #FFD23D; /* Prompt section highlight bands (Role recoloured cyan — was purple, banned) */ --hl-role: rgba(42, 214, 239, 0.15); --hl-role-b: #2AD6EF; --hl-role-text: #8BE9F6; --hl-task: rgba(62, 146, 255, 0.15); --hl-task-b: #3E92FF; --hl-task-text: #7FB4FF; --hl-con: rgba(255, 210, 61, 0.13); --hl-con-b: #FFD23D; --hl-con-text: #FFD23D; --hl-fmt: rgba(56, 222, 134, 0.13); --hl-fmt-b: #38DE86; --hl-fmt-text: #38DE86; --hl-ex: rgba(255, 106, 90, 0.13); --hl-ex-b: #FF6A5A; --hl-ex-text: #FF6A5A; /* Chat */ --msg-user-text: #BFE7FF; /* Toast */ --toast-bg: #FFFFFF; --toast-text: #0F2740; } /* ── LIGHT THEME — comic paper ────────────────────────────────────────────── */ html.light { --bg: #F6ECD6; --surface: #FFFFFF; --surface2: #FBF3E2; /* Depth ladder — corrected 2026-08-01, second attempt. Not a "bigger jump" problem (founder: "it doesn't need much bigger jump") — a wrong RELATIONSHIP. Dark mode reads right because canvas and chrome (bars) sit close together (the bars read as an extension of the same paper), while trays are the one tone that jumps clearly away from both. My first light pass had it backwards — canvas pulled dark and away from chrome, trays left close to chrome. Fixed: chrome stays a small step from canvas (same family), trays (white) is the one genuine standout. --bg restored to the original #F6ECD6 the founder already called "already right." */ --depth-top: #FFFFFF; /* sidebar / rail / topbar — the one clear standout */ --depth-mid: #EDE0BC; /* topbar + nav-rail — a small step from --bg, same family */ --dot: rgba(15, 39, 64, .09); --bg2: var(--surface2); /* fixes 5 pre-existing app.css uses of an undefined --bg2 (transparent boxes) */ --border: #E6D9BC; --border2: #D6C7A2; --text: #0F2740; --text-strong: #091A2C; --dim: #4E5E6C; --dimmer: #8F7F5E; --accent: #0E9EC4; --accent-dim: #DBF1F8; --accent-glow: rgba(14, 158, 196, 0.10); /* Button-fill accent — added 2026-08-01, light theme only. Founder: --accent "is good for texts but for button it should be lighter so it doesn't make the text hard to read." Real contrast problem, not a taste call: buttons use --c-on-accent (dark navy) text (fixed earlier to solve white-on-cyan), but #0E9EC4 is a medium-dark cyan — dark text on it sits in a low-contrast middle zone. --accent itself stays untouched (text/thin-accent uses read fine, don't disturb those); button fills get this lighter value instead. */ --c-accent-btn: #4DD1F0; --green: #12A150; --green-dim: rgba(18, 161, 80, 0.09); --red: #E5433A; --yellow: #D98A0C; /* Section-highlight washes — fixed 2026-08-01. These alpha values were set in the very first colour pass and never re-checked once the canvas settled on a warm gold (--bg): a 7-9% wash reads as a clean tint over neutral white, but blended with warm gold every one of them came out muddy/washed-out (confirmed via a live zoomed screenshot — role read as pale sage, task as grey-mauve, constraints was nearly invisible, gold on gold). Alpha roughly doubled across the board so each hue asserts itself against the canvas; constraints also shifted from gold toward a rust/ burnt-orange (same family, more red) since gold-on-gold can't be fixed by opacity alone — it needed to stop being the same colour as the base. */ --hl-role: rgba(14, 158, 196, 0.16); --hl-role-b: #0E9EC4; --hl-role-text: #0B7C9B; --hl-task: rgba(27, 120, 230, 0.15); --hl-task-b: #1B78E6; --hl-task-text: #155FC0; --hl-con: rgba(198, 92, 12, 0.22); --hl-con-b: #C45A0C; --hl-con-text: #9A4508; --hl-fmt: rgba(18, 161, 80, 0.15); --hl-fmt-b: #12A150; --hl-fmt-text: #0E8040; --hl-ex: rgba(229, 67, 58, 0.15); --hl-ex-b: #E5433A; --hl-ex-text: #C0362E; --msg-user-text: #0B5A8A; --toast-bg: #0F2740; --toast-text: #F6ECD6; } /* ══════════════════════════════════════════════════════════════════════════ COZY TOKENS — added 2026-08-02 The layer the 2026-08-01 audit found missing: variables.css had 78 tokens and ALL of them were colour — zero type, spacing, radius or elevation tokens. That absence is the mechanical cause of app.css's 16 font sizes, 29 spacing values and 16 radii: a dev reaching for a gap had nothing to reach for, so they typed a number. Founder named the direction 2026-08-02: **COZY** (cozy games — Stardew, Animal Crossing, Unpacking). Mechanics: no pure white/black, many muted earthy hues, soft diffuse light, rounded forms, visible texture, generous unhurried space. ADDITIVE ONLY — every name here is new (`--cz-*`), so nothing outside the pages that opt in can change. Dark values live in :root (dark is default), light overrides in html.light, matching this file's existing convention. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ---- type scale — 7 steps. Base is 15px, not app.css's 13px; 86% of the old app's type was <=14px, which is dev-tool density, not cozy. ---- */ --cz-t-xs:13px; --cz-t-sm:14px; --cz-t-md:15px; --cz-t-lg:17px; --cz-t-xl:21px; --cz-t-2xl:27px; --cz-t-3xl:34px; /* Thai stacks vowels above and tone marks above those — 1.2 (the browser default app.css mostly inherits) crowds them. 1.65 is the cozy floor. */ --cz-lh:1.65; --cz-lh-tight:1.3; /* ---- spacing — 6 steps, replaces 29 ad-hoc values ---- */ --cz-s1:6px; --cz-s2:10px; --cz-s3:16px; --cz-s4:24px; --cz-s5:36px; --cz-s6:52px; /* ---- radius — 3 steps + pill, replaces 16 values ---- */ --cz-r-sm:10px; --cz-r:16px; --cz-r-lg:22px; --cz-pill:999px; /* ---- elevation — SOFT, because cozy light is diffuse. This is the one deliberate departure from the comic spec's hard `5px 5px 0 ink` offset block, which is sticker/print language: crisp, high-contrast, stuck ON the page rather than sitting IN it. Flagged in Design Language as the open cozy-vs-comic conflict. Swapping these two lines back to `4px 4px 0 var(--cz-ink)` reverts the whole page. ---- */ --cz-e1:0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.14); --cz-e2:0 2px 4px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.20); /* ---- cozy surfaces (dark = "comic night", warm-tinted, never pure black) ---- */ /* --cz-tray is a separate step from --cz-panel on purpose. Cards (--cz-panel) sit ON the canvas; the flanking TRAYS (editor sidebar + playground) have to read as a different plane, and dark surfaces need a much bigger jump than light ones for the same perceived elevation — established empirically on 2026-08-01, when a 10-25 RGB ladder measured correct and still looked like one flat navy in a real screenshot. --cz-panel vs canvas is ~12 RGB; --cz-tray is ~30, which reads. Light mode needs no such push: pure white against warm cream is already the standout. */ /* --cz-chrome is a SEPARATE step from --cz-tray on purpose, and getting the two confused is a documented mistake. The founder's correction of 2026-08-01: chrome (topbar + nav-rail) sits CLOSE TO THE CANVAS — the bars read as an extension of the same paper — while the TRAYS are the one tone that jumps clearly away from both. Setting chrome to --cz-tray makes the bars and the trays the same object and the whole frame goes flat, which is precisely what happened on the first cozy-chrome pass. */ --cz-paper:#17222C; --cz-panel:#22313D; --cz-panel-2:#1A2731; --cz-tray:#2C3F4E; --cz-chrome:#1C2833; --cz-ink:#F2E8D5; --cz-muted:#A8BBC4; --cz-faint:#6D8492; --cz-line:rgba(242,232,213,.17); --cz-hero:#123040; --cz-halftone:rgba(242,232,213,.055); --cz-on-fill:#17222C; /* ink-dark text/icons sitting on a mid-tone fill */ /* ---- 7 hues x 3 steps. More hues, LESS chroma (24-70% vs the old palette's 76-94%) — that is what reads as colourful-but-calm. A muted mid-tone measures ~3.4:1 against BOTH dark and light text, so it can never carry a label: tint carries text (~9:1), fill carries ICONS ONLY (3:1 is the graphics threshold), deep carries white text (~5-8:1). Every pair was computed, not eyeballed. ---- */ --cz-ochre-t:#4A3A16; --cz-ochre:#E8B858; --cz-ochre-d:#F3D08C; --cz-clay-t:#4A2B1E; --cz-clay:#E39270; --cz-clay-d:#F1B79C; --cz-teal-t:#173D3A; --cz-teal:#5CBDB2; --cz-teal-d:#93D9D0; --cz-sky-t:#1C3450; --cz-sky:#7FAEDF; --cz-sky-d:#AFCDEC; --cz-olive-t:#33401D; --cz-olive:#A9BE6E; --cz-olive-d:#CBDA9C; --cz-moss-t:#1D4029; --cz-moss:#8CC490; --cz-moss-d:#B4DCB6; --cz-brick-t:#4A241F; --cz-brick:#E5786A; --cz-brick-d:#F3ABA0; } html.light{ --cz-e1:0 1px 2px rgba(42,59,71,.07), 0 2px 6px rgba(42,59,71,.07); --cz-e2:0 2px 4px rgba(42,59,71,.08), 0 10px 24px rgba(42,59,71,.10); --cz-paper:#F2E8D5; --cz-panel:#FDF9F0; --cz-panel-2:#F4EBD9; /* Monotonic ladder, same shape as dark: canvas → chrome → tray, each step LIGHTER. The first attempt put light chrome DARKER than the canvas while the tray went lighter, which split the frame three ways instead of stacking it — measured canvas→chrome 19 vs canvas→tray 34, i.e. no clear outlier. Now 12 vs 34: chrome reads as the same paper, tray is the one tone that leaves. */ --cz-tray:#FDF9F0; --cz-chrome:#F5EDDF; --cz-ink:#2A3B47; --cz-muted:#5D7080; --cz-faint:#8FA0AC; --cz-line:rgba(42,59,71,.16); --cz-hero:#2E5266; --cz-halftone:rgba(42,59,71,.075); --cz-on-fill:#2A3B47; --cz-ochre-t:#F7E5BC; --cz-ochre:#DDA53E; --cz-ochre-d:#8F6310; --cz-clay-t:#F8DED1; --cz-clay:#D2795A; --cz-clay-d:#9C4A2D; --cz-teal-t:#CFE8E4; --cz-teal:#3F9C93; --cz-teal-d:#276560; --cz-sky-t:#D8E5F4; --cz-sky:#5D8FC6; --cz-sky-d:#36659E; --cz-olive-t:#E6ECD4; --cz-olive:#8FA457; --cz-olive-d:#5A6D34; --cz-moss-t:#D8EBDA; --cz-moss:#6FA772; --cz-moss-d:#3B7548; --cz-brick-t:#F7DAD6; --cz-brick:#CE6E5F; --cz-brick-d:#8B3128; }