/* Theme tokens — extracted from garden/public/index.html (#505 slice 1). Garden vocabulary is the source of truth for token names (--soil, --surface-raised, --text-muted, --accent, --bubble-user/ai, --paraclete*, --seed-*, --r-*). Light values reconciled with web/public/style.css where both trees carry the same concept: where values differed, web's won (per EPIC "light = paraclet.us white"). Dark palette is garden's earth, preserved exactly. Web will consume this same file cross-origin in a later slice — don't duplicate it there. Default = light. Dark is driven by [data-theme="dark"] on . Per-seed identity colors (--seed-green, --paraclete) stay fixed across themes — they identify speakers, not chrome. */ :root { /* Tabbed-inspired tokens — the ones that really drive "feel." */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --radius: 20px; --r-tight: 6px; --r-window: 14px; --r-soft: 22px; /* Typography (issue #492) — gardener-addressable via the paraclete. Defaults here; overridden at runtime by applyFontSettings() after boot reads the gardener's settings map. Keys: font.family, font.size, font.lineHeight, font.letterSpacing. --font-family falls back to --font so rules that already read --font keep working while rules migrated to --font-family get the override. */ --font-family: var(--font); --font-size: 16px; --line-height: 1.5; --letter-spacing: normal; /* Seed/speaker identity — stays consistent per-theme for voice recognition. Paraclete shifts with theme (brown in dark = earth, green in light = the "above-ground" expression); seed-green stays as the user's leaf color across both. */ --seed-green: #3a5446; --seed-green-translucent: rgba(58, 84, 70, 0.6); --seed-accent: #4a9a45; --seed-accent-hover: #5aaa55; /* Paraclete = the speaker-color painted on window headers. In light mode it matches the Settings active-toggle green (--accent) so the chrome reads as one family. In dark mode it's the earth brown — roots-below-ground. */ --paraclete: #4a9a45; --paraclete-translucent: rgba(74, 154, 69, 0.55); --paraclete-contrast: #f0ebe0; /* Default = light palette. Values reconciled with web/public/style.css: --text-muted and --border ported to web's canonical values (#888, #e0e0e0); the rest already matched. */ --soil: #f4f6f2; /* desktop "ground" */ --soil-translucent: rgba(244, 246, 242, 0.92); --text: #222; --text-muted: #888; --text-on-green: #ffffff; --surface: #edf0ea; --surface-raised: #ffffff; --surface-lifted: #f0f0f0; --border: #e0e0e0; --border-strong: #b0b0a8; --input-bg: #ffffff; --input-text: #222; --error: #c0392b; --accent: #4a9a45; --accent-soft: #e4e8e0; --bubble-user: #d4e8c8; --bubble-ai: #f5f5f5; /* User-pickable identity-level "lines color" — the hairline that wraps the avatar, the input bar, and the user bubble. Separate axis from --winbox-header-bg (per-window/per-seed color cascade) and from --accent (toggle/active chrome). Default = --accent so fresh gardeners see the existing seed-green; the settings panel overrides via document.documentElement.style.setProperty at boot when localStorage carries a saved pick. rtm 2026-05-12 10:23 + 10:24 CDT in DM. */ --user-lines-color: var(--accent); } /* Per-seed derivation block — architect plan 2026-05-10, extended 2026-05-11. The titlebar hex (painted by winbox-chrome.js onto the .winbox root as --winbox-header-bg) cascades into four surfaces via CSS custom properties, with branching on the data-titlebar-light attribute the same module stamps. The four-step intensity scale: titlebar (L≈45 chosen) -> composer (L=titlebar, direct binding per Rule 1.5) -> paraclete bubble (L≈75, lighten 60% toward white) -> window-bg (L≈95, lighten 88% toward white) On light titlebars: title font + composer font flip near-black, bubble tints toward black 8%, window-bg tints toward black 1% (the floor — keeps a perceptible step below pure white so the surface doesn't merge with the page when the gardener picks #ffffff). The window-bg black-percentage stays strictly below the bubble's so the four-step scale holds even at the light-titlebar edge. @supports fallback drops every color-mix to sRGB on the handful of older WebViews that haven't shipped oklch. */ .winbox.gardeny { /* Rule 1 — dark-titlebar branch: text mixes header→white, preserving any latent hue (a dark green header still tints the near-white "lighter same-hue"). Pre-v2 was a flat var(--paraclete-contrast); this keeps the same READ as that contrast token on truly-black headers, while letting dark-but- tinted titlebars carry their hue into the title font. */ --titlebar-fg: color-mix(in oklch, var(--winbox-header-bg, var(--paraclete)) 20%, white); /* ~~Rule 2 (cascade-v2): paraclete bubble bg = lightened header.~~ SUPERSEDED 2026-05-11 23:48 CDT — rtm: "remove the background color from the paraclete's bubbles please." --bubble-paraclete is no longer declared in the cascade; the .window-msg.assistant rule uses background: transparent and reads on --window-bg. */ /* Rule 3 — paraclete bubble FG remains the dark-same-hue of the header. Bubble bg is now transparent, so text reads on the lightened-header window-bg; dark-same-hue is still legible there. */ --bubble-paraclete-fg: color-mix(in oklch, var(--winbox-header-bg) 25%, black); /* ~~Rule 2 (cascade-v2): composer is the Necker flip of the titlebar.~~ ~~SUPERSEDED 2026-05-11 23:48 CDT → composer-bg = var(--bubble-user).~~ SUPERSEDED AGAIN 2026-05-12 00:08 CDT — rtm: "change the input text background to whatever color it was before I started fucking with it." Composer reverts to the palette default: --input-bg (white) + --input-text (#222). Same value the textarea would use if no --composer-* var were declared at all (the fallback chain in the .window-input-bar textarea rule already points there). */ --composer-bg: var(--input-bg); --composer-fg: var(--input-text); /* ~~--window-bg: color-mix(in oklch, var(--winbox-header-bg, var(--paraclete)) 12%, white);~~ SUPERSEDED 2026-05-12 08:53 CDT — rtm: "I have one window that has a translucent background and I fucking love it but none of the other does. minor thing but background it." The old shape resolved to opaque color on any window whose .winbox root carried --winbox-header-bg (i.e. all of them post-paint), so only un-painted windows fell through .window-chat's fallback to --soil-translucent (alpha ≈ 0.92) and got the look rtm loves. Wrapping the existing mix in an outer srgb mix toward `transparent` at 92% gives every window the same alpha ≈ 0.92 while preserving the titlebar→bg hue cascade. */ --window-bg: color-mix(in srgb, color-mix(in oklch, var(--winbox-header-bg, var(--paraclete)) 12%, white) 92%, transparent); } .winbox.gardeny[data-titlebar-light="true"] { /* Rule 1 — light-titlebar branch: text is hue-preserving dark. Pre-v2 was #1a1a1a (near-black, dropped the hue entirely). 25% header + 75% black gives "dark green from light green" / "dark blue from light blue" — same hue, just dim. */ --titlebar-fg: color-mix(in oklch, var(--winbox-header-bg) 25%, black); /* ~~--window-bg: color-mix(in oklch, var(--winbox-header-bg) 12%, black 1%);~~ SUPERSEDED 2026-05-12 08:53 CDT — translucency wrap mirrors the default branch (see comment above). Black-floor preserved at 1% inside the inner mix so a pure-white titlebar still lands a perceptible step below the page surface; the outer mix then drops the result to alpha ≈ 0.92. */ --window-bg: color-mix(in srgb, color-mix(in oklch, var(--winbox-header-bg) 12%, black 1%) 92%, transparent); } @supports not (color: color-mix(in oklch, red, blue)) { .winbox.gardeny { --titlebar-fg: color-mix(in srgb, var(--winbox-header-bg, var(--paraclete)) 20%, white); --bubble-paraclete-fg: color-mix(in srgb, var(--winbox-header-bg, var(--paraclete)) 25%, black); /* ~~--window-bg: color-mix(in srgb, var(--winbox-header-bg, var(--paraclete)) 12%, white);~~ SUPERSEDED 2026-05-12 08:53 CDT — same translucency wrap as the oklch branches above, restated in srgb only (this @supports block is the no-oklch fallback). Nested srgb color-mix is valid CSS and lands the same alpha ≈ 0.92. */ --window-bg: color-mix(in srgb, color-mix(in srgb, var(--winbox-header-bg, var(--paraclete)) 12%, white) 92%, transparent); } .winbox.gardeny[data-titlebar-light="true"] { --titlebar-fg: color-mix(in srgb, var(--winbox-header-bg) 25%, black); } } /* Dark mode — garden's earth palette overrides the tokens that swap. */ [data-theme="dark"] { --soil: #2b1f14; --soil-translucent: rgba(43, 31, 20, 0.85); --text: #e0e0e0; --text-muted: #aaa; --text-on-green: #e8f0ea; --surface: #1a1a1a; --surface-raised: #2a2a2a; --surface-lifted: #333; --border: #333; --border-strong: #555; --input-bg: #ffffff; --input-text: #222; --error: #e55; --accent: #5a8; --accent-soft: #2a3e2e; --bubble-user: rgba(58, 84, 70, 0.6); /* ~~--bubble-ai: rgba(85, 63, 44, 0.6);~~ SUPERSEDED 2026-05-12 08:45 CDT — bubble bg must be solid in dark mode for the same anti-compound reason index.html flips .window-msg.assistant from transparent to var(--bubble-ai): with a translucent --window-bg now in play, an alpha-bearing bubble muddies through. Solid earth-brown (the underlying rgb without the 0.6 alpha) preserves the dark-mode register. */ --bubble-ai: #553f2c; /* Dark mode: paraclete goes back to earth-brown. Roots-below-ground.*/ --paraclete: #553f2c; --paraclete-translucent: rgba(85, 63, 44, 0.6); --seed-accent: #5a8; --seed-accent-hover: #7c7; /* Dark-mode --user-lines-color default mirrors the light branch: fall back to --accent so existing chrome reads unchanged until the gardener picks. */ --user-lines-color: var(--accent); }