/* ============================================================ Pulse Theme System — app-wide theme definitions MECHANICALLY PORTED from: - wwwroot/css/pulseai.css (:root defaults, lines ~220-334: core variable block + aurora/orb keyframe animations) - wwwroot/css/pulseai-themes.css (15 presets: 14 named + custom) Porting rules applied: 1. Every `--pai-` custom property prefix renamed to `--pulse-theme-`. All values preserved exactly — nothing invented, simplified, or dropped. 2. Every per-theme selector changed from `[data-pai-theme="x"]` (originally scoped so it only took effect under the #pulseai-root element) to `:root[data-pulse-theme="x"]`, so the variables cascade from the document root across the whole app. 3. All 15 presets (14 named + custom) ported in full. 4. The aurora/orb keyframe animations and the custom properties they consume (--pai-orb-1/2/3, renamed) are kept, since they apply globally regardless of which theme is active. NOTE — intentionally NOT ported (mechanical port stayed at the variable/theme-selector level, per the instructions above): - PulseAI-specific element overrides that rode along inside `[data-pai-theme="x"] #pai-notification-banner { ... }`, `[data-pai-theme="x"] .modal-content { ... }`, and `[data-pai-theme="x"] .modal-header/.modal-footer { ... }` in the source file. These target PulseAI-only DOM ids/classes, not reusable theme variables, so there is nothing generic to rename them to without guessing new selectors — flagging rather than inventing. - The `#pulseai-root::before / .pai-orb-2 / .pai-orb-3` element rules that render the floating orbs (they target the PulseAI root element specifically). The keyframes and the color variables those rules consume ARE ported below per rule 4 above; the DOM hookup (which elements the orbs paint onto) is app-shell markup, not a theme variable, and was left out rather than guessed. ============================================================ */ :root { /* ── Core accent palette ─────────────────────────────────── */ --pulse-theme-primary: #2563eb; --pulse-theme-primary-light: #3b82f6; --pulse-theme-teal: #0d9488; --pulse-theme-teal-light: #14b8a6; --pulse-theme-purple: #7c3aed; --pulse-theme-purple-light: #a78bfa; --pulse-theme-danger: #dc2626; /* Flat amber default. Overridden per-theme below only where a theme's own --pulse-theme-teal has been reassigned into the amber/orange hue range (fire-toned presets) and would otherwise read as the same color as a warning state - see the toast redesign for the concrete case (success vs. warning became indistinguishable on Ember Forge). */ --pulse-theme-warning: #f59e0b; /* ── Typography ──────────────────────────────────────────── */ --pulse-theme-text: #1e293b; --pulse-theme-text-muted: #64748b; --pulse-theme-bubble-ai-text: var(--pulse-theme-text); /* explicit so dark themes override cleanly */ /* ── Radius ──────────────────────────────────────────────── */ --pulse-theme-radius: 16px; --pulse-theme-radius-sm: 10px; /* ── Page background (aurora gradient stops) ─────────────── */ --pulse-theme-page-bg-a: #dbeafe; --pulse-theme-page-bg-b: #ffffff; --pulse-theme-page-bg-c: #eff6ff; --pulse-theme-page-bg-d: #ffffff; /* ── Floating orb colors ─────────────────────────────────── */ --pulse-theme-orb-1: rgba(37, 99, 235, 0.13); --pulse-theme-orb-2: rgba(59, 130, 246, 0.11); --pulse-theme-orb-3: rgba(37, 99, 235, 0.08); /* ── Glass panel ─────────────────────────────────────────── */ --pulse-theme-glass-bg: rgba(255, 255, 255, 0.68); --pulse-theme-glass-border: rgba(255, 255, 255, 0.85); --pulse-theme-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.10); --pulse-theme-glass-blur: 20px; /* ── Panel inner borders & backgrounds ───────────────────── */ --pulse-theme-chat-border: rgba(203, 213, 225, 0.50); --pulse-theme-header-border: rgba(203, 213, 225, 0.40); --pulse-theme-chat-dot-color: rgba(37, 99, 235, 0.065); --pulse-theme-activity-bg: rgba(248, 250, 252, 0.70); --pulse-theme-divider-color: rgba(203, 213, 225, 0.70); /* ── Input area ──────────────────────────────────────────── */ --pulse-theme-input-bg: rgba(255, 255, 255, 0.85); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.95); --pulse-theme-input-border: rgba(203, 213, 225, 0.60); --pulse-theme-input-shadow: 0 2px 8px rgba(31, 38, 135, 0.06); --pulse-theme-input-glow-1: rgba(37, 99, 235, 0.45); --pulse-theme-input-glow-2: rgba(37, 99, 235, 0.18); --pulse-theme-input-glow-3: rgba(59, 130, 246, 0.55); --pulse-theme-input-glow-4: rgba(59, 130, 246, 0.22); /* ── Toolbar buttons ─────────────────────────────────────── */ --pulse-theme-btn-bg: rgba(255, 255, 255, 0.82); --pulse-theme-btn-border: rgba(37, 99, 235, 0.22); --pulse-theme-btn-shadow: 0 1px 4px rgba(37, 99, 235, 0.08); --pulse-theme-btn-hover-bg: rgba(37, 99, 235, 0.09); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); /* ── Chat bubbles ────────────────────────────────────────── */ --pulse-theme-bubble-user-bg: var(--pulse-theme-teal); --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.72); --pulse-theme-bubble-ai-border: rgba(37, 99, 235, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(31, 38, 135, 0.08); /* ── Ambient / canvas glow ───────────────────────────────── */ --pulse-theme-canvas-glow-1: rgba(37, 99, 235, 0.07); --pulse-theme-canvas-glow-2: rgba(124, 58, 237, 0.04); --pulse-theme-canvas-glow-1b: rgba(37, 99, 235, 0.12); --pulse-theme-canvas-glow-2b: rgba(124, 58, 237, 0.08); /* ── Light sweep & glow animation ────────────────────────── */ --pulse-theme-sweep-color: rgba(255, 255, 255, 0.30); --pulse-theme-sweep-duration: 9s; --pulse-theme-glow-color: rgba(37, 99, 235, 0.40); --pulse-theme-anim-intensity: 1; /* 0–1; drives sweep & glow opacity */ /* ── Panel style variants (solid / gel) ──────────────────── */ --pulse-theme-solid-bg: rgba(235, 242, 255, 0.97); --pulse-theme-solid-input-bg: rgba(240, 246, 255, 0.98); --pulse-theme-solid-btn-bg: rgba(225, 235, 255, 0.95); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.48); --pulse-theme-gel-input-bg: rgba(255, 255, 255, 0.55); } /* ══════════════════════════════════════════════════════════ PANEL STYLE SYSTEM — system-wide (ported from pulseai.css's #pulseai-root[data-pai-style] rules, previously PulseAI-only). Controlled via data-pulse-style="glass|solid|gel" on . Defaults to glass (no attribute needed — the base variables above ARE glass). Every preset above already defines its own themed --pulse-theme-solid-* and --pulse-theme-gel-* values; these two blocks are the only thing swapping --pulse-theme-glass-bg (etc.) to consume them, so they apply uniformly across all presets. BUG FIX (2026-07-26), two compounding bugs found here, both fixed: 1. THIS COMMENT previously contained the literal text "solid-*" then immediately "/--pulse-theme-gel-*" right after it, i.e. a stray asterisk-then-slash sequence — which is a comment-close token to any CSS parser, wherever it appears, even mid-sentence inside a comment. That silently terminated this whole comment block early and left everything after it (the rest of this explanation, plus the solid-style rule immediately below) sitting outside of any comment as bare, invalid top-level text/rules, which every browser's parser then discards while it resyncs on the next recognizable rule — confirmed via document.styleSheets: the "solid" rule was completely absent from the parsed CSSOM, while "gel" (right after it) parsed fine. This exact landmine phrase was already present before this 2026-07-26 pass, so Panel Style's Solid option has likely never worked since this file was ported. 2. Once (1) is fixed and the "solid" rule is actually parsed, it still loses to the active theme's own block below: these selectors used to be plain :root[data-pulse-style="solid"] / "gel", the exact same specificity as :root[data-pulse-theme="x"] (one :root pseudo-class + one attribute selector each). Every preset block is later in the cascade, so on a tie the LAST rule wins — meaning the per-theme block always re-asserted its own --pulse-theme-glass-bg etc. after this ran, and Panel Style did nothing for any named theme (it only ever partly worked for "Custom", whose colors are applied as inline styles by JS, which beats any stylesheet rule regardless of order). Adding the [data-pulse-theme] attribute-exists selector below bumps specificity above the plain per-theme blocks (3 attribute/ pseudo-class selectors vs. 2), so this now wins unconditionally — order-independent, won't regress if a new theme block is added later in the file. */ :root[data-pulse-theme][data-pulse-style="solid"] { --pulse-theme-glass-bg: var(--pulse-theme-solid-bg); --pulse-theme-glass-blur: 0px; --pulse-theme-bubble-ai-bg: var(--pulse-theme-solid-bg); --pulse-theme-input-bg: var(--pulse-theme-solid-input-bg, var(--pulse-theme-solid-bg)); --pulse-theme-input-bg-focus:var(--pulse-theme-solid-input-bg, var(--pulse-theme-solid-bg)); --pulse-theme-activity-bg: var(--pulse-theme-solid-bg); --pulse-theme-btn-bg: var(--pulse-theme-solid-btn-bg, var(--pulse-theme-solid-bg)); } :root[data-pulse-theme][data-pulse-style="gel"] { --pulse-theme-glass-bg: var(--pulse-theme-gel-bg); --pulse-theme-glass-blur: 14px; --pulse-theme-bubble-ai-bg: var(--pulse-theme-gel-bg); --pulse-theme-input-bg: var(--pulse-theme-gel-input-bg, var(--pulse-theme-gel-bg)); --pulse-theme-input-bg-focus:var(--pulse-theme-gel-input-bg, var(--pulse-theme-gel-bg)); --pulse-theme-activity-bg: var(--pulse-theme-gel-bg); } /* ── 4th panel style: Outline (2026-07-27) ────────────────────────────── Deliberately minimal fill + a vivid glowing accent-colored ring, the opposite figure-ground relationship from Glass/Solid/Gel (which are all "filled panel, varying translucency"). Unlike Solid/Gel above, this does NOT need a per-theme --pulse-theme-outline-bg/-input-bg pair in each of the 21 preset blocks — the fill is a fixed, universal near-transparent wash (works against both light and dark page backgrounds, since the border/glow — not the fill — carries the style's visual weight), while the border and glow color are derived directly from each theme's own already-defined --pulse-theme-primary / --pulse-theme-glow-color, so all 21 themes (and any added later) support it automatically with zero extra per-theme CSS. */ :root[data-pulse-theme][data-pulse-style="outline"] { --pulse-theme-glass-bg: rgba(255, 255, 255, 0.06); --pulse-theme-glass-blur: 0px; --pulse-theme-glass-border: var(--pulse-theme-primary); --pulse-theme-glass-shadow: 0 0 0 1px var(--pulse-theme-glow-color), 0 0 22px 2px var(--pulse-theme-glow-color); --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.06); --pulse-theme-input-bg: rgba(255, 255, 255, 0.10); --pulse-theme-input-bg-focus:rgba(255, 255, 255, 0.16); --pulse-theme-activity-bg: rgba(255, 255, 255, 0.06); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.08); } /* ── Scrollbars — system-wide, theme-aware "Glass Rail" ────────────────── Founder-selected 2026-08-02 after reviewing 3 mockup options (minimal thin / glass rail / accent bar) previewed against real presets. Every color below resolves to an existing --pulse-theme-* token -- no new custom properties -- so all 21 presets, every panel-style variant, and the user's own Custom palette get a themed scrollbar automatically, with zero per-theme work. Applied via the universal selector (not a specific container) so it reaches every scrollable element app-wide: tables, chat panels, the PulseAI canvas, modals, dropdowns, textareas -- not just a few PulseAI-specific ones. This supersedes the old hardcoded-gray ::-webkit-scrollbar rules that used to live scoped to individual elements in pulseai.css/pulseai-themes.css (#chat-messages, #canvas-content, .pai-bulk-errors-table, .pai-cost-modal-body, #pai-ds-panel-body, #pai-cap-panel-body, #pai-theme-panel-body, #pai-conv-panel-body) -- those were never theme-aware (same flat rgba(148,163,184,*) regardless of active theme) and, being scoped to an id/class, had higher CSS specificity than a universal-selector rule would, so they had to be removed rather than left in place -- otherwise they'd have silently kept winning on exactly the elements that most needed the new treatment. */ :root { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--pulse-theme-primary) 45%, var(--pulse-theme-glass-bg)) color-mix(in srgb, var(--pulse-theme-glass-bg) 50%, transparent); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: color-mix(in srgb, var(--pulse-theme-glass-bg) 50%, transparent); border-radius: 8px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pulse-theme-primary) 45%, var(--pulse-theme-glass-bg)); border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--pulse-theme-primary) 70%, var(--pulse-theme-glass-bg)); box-shadow: 0 0 8px var(--pulse-theme-glow-color); } *::-webkit-scrollbar-corner { background: transparent; } /* ── Aurora background animation ─────────────────────────── */ @keyframes aurora-shift { 0% { background-position: 0% 50%; } 33% { background-position: 100% 0%; } 66% { background-position: 50% 100%; } 100% { background-position: 0% 50%; } } /* ── Floating orbs ────────────────────────────────────────── */ @keyframes orb-drift-1 { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -40px) scale(1.08); } 66% { transform: translate(-20px, 25px) scale(0.95); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes orb-drift-2 { 0% { transform: translate(0px, 0px) scale(1); } 40% { transform: translate(-35px, 30px) scale(1.1); } 75% { transform: translate(20px, -20px) scale(0.93); } 100% { transform: translate(0px, 0px) scale(1); } } @keyframes orb-drift-3 { 0% { transform: translate(0px, 0px) scale(1); } 50% { transform: translate(25px, 35px) scale(1.06); } 100% { transform: translate(0px, 0px) scale(1); } } /* ──────────────────────────────────────────────────────────────────────────── PRESET THEME DEFINITIONS Each theme sets its variables on :root[data-pulse-theme="id"] so they cascade from the document root across the whole app. Using a simple attribute selector on :root keeps specificity low so the variables cascade cleanly into every child rule. ──────────────────────────────────────────────────────────────────────────── */ /* ── 1. Arctic Glass (default — no override needed, :root IS Arctic Glass) ─ */ /* Defined here for completeness / explicit opt-in */ :root[data-pulse-theme="arctic-glass"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.76:1) -- darker amber verified at 5.81:1 against this theme's real page-bg-a (#dbeafe). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 5.84:1. */ --pulse-accuracy-tier-high: #166534; --pulse-theme-primary: #2563eb; --pulse-theme-primary-light: #3b82f6; --pulse-theme-teal: #0d9488; --pulse-theme-teal-light: #14b8a6; --pulse-theme-purple: #7c3aed; --pulse-theme-purple-light: #a78bfa; --pulse-theme-danger: #dc2626; --pulse-theme-text: #1e293b; --pulse-theme-text-muted: #64748b; --pulse-theme-page-bg-a: #dbeafe; --pulse-theme-page-bg-b: #ffffff; --pulse-theme-page-bg-c: #eff6ff; --pulse-theme-page-bg-d: #ffffff; --pulse-theme-orb-1: rgba(37, 99, 235, 0.13); --pulse-theme-orb-2: rgba(59, 130, 246, 0.11); --pulse-theme-orb-3: rgba(37, 99, 235, 0.08); --pulse-theme-glass-bg: rgba(255, 255, 255, 0.68); --pulse-theme-glass-border: rgba(255, 255, 255, 0.85); --pulse-theme-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.10); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(203, 213, 225, 0.50); --pulse-theme-header-border: rgba(203, 213, 225, 0.40); --pulse-theme-chat-dot-color: rgba(37, 99, 235, 0.065); --pulse-theme-activity-bg: rgba(248, 250, 252, 0.70); --pulse-theme-divider-color: rgba(203, 213, 225, 0.70); --pulse-theme-input-bg: rgba(255, 255, 255, 0.85); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.95); --pulse-theme-input-border: rgba(203, 213, 225, 0.60); --pulse-theme-input-shadow: 0 2px 8px rgba(31, 38, 135, 0.06); --pulse-theme-input-glow-1: rgba(37, 99, 235, 0.45); --pulse-theme-input-glow-2: rgba(37, 99, 235, 0.18); --pulse-theme-input-glow-3: rgba(59, 130, 246, 0.55); --pulse-theme-input-glow-4: rgba(59, 130, 246, 0.22); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.82); --pulse-theme-btn-border: rgba(37, 99, 235, 0.22); --pulse-theme-btn-shadow: 0 1px 4px rgba(37, 99, 235, 0.08); --pulse-theme-btn-hover-bg: rgba(37, 99, 235, 0.09); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(37, 99, 235, 0.15); --pulse-theme-bubble-user-bg: var(--pulse-theme-teal); --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.72); --pulse-theme-bubble-ai-border: rgba(37, 99, 235, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(31, 38, 135, 0.08); --pulse-theme-bubble-ai-text: #1e293b; --pulse-theme-canvas-glow-1: rgba(37, 99, 235, 0.07); --pulse-theme-canvas-glow-2: rgba(124, 58, 237, 0.04); --pulse-theme-canvas-glow-1b: rgba(37, 99, 235, 0.12); --pulse-theme-canvas-glow-2b: rgba(124, 58, 237, 0.08); --pulse-theme-sweep-color: rgba(255, 255, 255, 0.30); --pulse-theme-sweep-duration: 9s; --pulse-theme-glow-color: rgba(37, 99, 235, 0.40); --pulse-theme-solid-bg: rgba(235, 242, 255, 0.97); --pulse-theme-solid-input-bg: rgba(240, 246, 255, 0.98); --pulse-theme-solid-btn-bg: rgba(220, 232, 255, 0.96); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.46); --pulse-theme-gel-input-bg: rgba(255, 255, 255, 0.54); } /* ── 2. Neon Blue Obsidian ──────────────────────────────────────────────── */ :root[data-pulse-theme="neon-obsidian"] { --pulse-theme-primary: #00d4ff; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #40e8ff; --pulse-theme-teal: #00ffea; /* White text on a SOLID fill of this teal (nav-rail's "current location" pill, .rail-local-item.is-current / .rail-local-tablist .rail-subitem.is-current in pulse-shell.css) computes to a ~1.3:1 WCAG contrast ratio -- founder-reported (2026-07-28) as genuinely too light to read. Checked every theme's own teal the same way: most of this app's presets lean bright/neon, so white text fails contrast broadly, not just here -- added this token wherever white clearly fails (below ~3:1; themes closer to passing, e.g. Arctic Glass at ~3.7:1, are left as-is rather than touched based on a raw contrast-math cutoff nobody complained about). Consumed via "var(--pulse-theme-on-teal, #fff)" so themes without this override keep today's white, unchanged. First pass used flat #000 here; founder disliked plain black once shown a side-by-side mockup and picked this theme's own deep page background instead ("Deep obsidian") -- reads as "text recedes into the obsidian dark" rather than generic black, same ~16:1 contrast since this theme's page background is already near-black. Generalized to every OTHER dark-PAGE theme in this fix list too (their page-bg-a is equally near-black, so the same swap is safe and equally high-contrast) -- Cloud Nine and Confetti Pop are the two exceptions: their teal also fails white-contrast, but their PAGE background is light, so they keep flat #000 instead (see their own comments below). */ --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); --pulse-theme-teal-light: #7ffff4; --pulse-theme-purple: #9945ff; --pulse-theme-purple-light: #c084fc; --pulse-theme-danger: #ff3b3b; --pulse-theme-text: #dff4ff; --pulse-theme-text-muted: #6ea8c9; --pulse-theme-page-bg-a: #060b18; --pulse-theme-page-bg-b: #0a1428; --pulse-theme-page-bg-c: #080e1f; --pulse-theme-page-bg-d: #050a14; --pulse-theme-orb-1: rgba(0, 180, 255, 0.18); --pulse-theme-orb-2: rgba(0, 255, 234, 0.12); --pulse-theme-orb-3: rgba(153, 69, 255, 0.12); --pulse-theme-glass-bg: rgba(4, 14, 38, 0.82); --pulse-theme-glass-border: rgba(0, 212, 255, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.50); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(0, 212, 255, 0.18); --pulse-theme-header-border: rgba(0, 212, 255, 0.14); --pulse-theme-chat-dot-color: rgba(0, 212, 255, 0.08); --pulse-theme-activity-bg: rgba(2, 10, 28, 0.75); --pulse-theme-divider-color: rgba(0, 212, 255, 0.25); --pulse-theme-input-bg: rgba(2, 10, 28, 0.80); --pulse-theme-input-bg-focus: rgba(4, 16, 40, 0.90); --pulse-theme-input-border: rgba(0, 212, 255, 0.25); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.40); --pulse-theme-input-glow-1: rgba(0, 212, 255, 0.55); --pulse-theme-input-glow-2: rgba(0, 212, 255, 0.22); --pulse-theme-input-glow-3: rgba(64, 232, 255, 0.65); --pulse-theme-input-glow-4: rgba(64, 232, 255, 0.28); --pulse-theme-btn-bg: rgba(0, 212, 255, 0.09); --pulse-theme-btn-border: rgba(0, 212, 255, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(0, 212, 255, 0.12); --pulse-theme-btn-hover-bg: rgba(0, 212, 255, 0.18); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(0, 212, 255, 0.30); --pulse-theme-bubble-user-bg: #0057a8; --pulse-theme-bubble-user-text: #dff4ff; --pulse-theme-bubble-ai-bg: rgba(4, 18, 45, 0.85); --pulse-theme-bubble-ai-border: rgba(0, 212, 255, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.50); --pulse-theme-bubble-ai-text: #dff4ff; --pulse-theme-canvas-glow-1: rgba(0, 212, 255, 0.09); --pulse-theme-canvas-glow-2: rgba(153, 69, 255, 0.06); --pulse-theme-canvas-glow-1b: rgba(0, 212, 255, 0.18); --pulse-theme-canvas-glow-2b: rgba(153, 69, 255, 0.12); --pulse-theme-sweep-color: rgba(0, 212, 255, 0.22); --pulse-theme-sweep-duration: 7s; --pulse-theme-glow-color: rgba(0, 212, 255, 0.50); --pulse-theme-solid-bg: rgba(3, 10, 28, 0.97); --pulse-theme-solid-input-bg: rgba(2, 8, 22, 0.98); --pulse-theme-solid-btn-bg: rgba(0, 212, 255, 0.12); --pulse-theme-gel-bg: rgba(4, 14, 38, 0.52); --pulse-theme-gel-input-bg: rgba(2, 10, 28, 0.58); } /* ── 3. Dragon Fruit Glass ──────────────────────────────────────────────── */ :root[data-pulse-theme="dragon-fruit"] { --pulse-theme-primary: #ff1f8e; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ff6bb5; --pulse-theme-teal: #39ff14; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #80ff55; --pulse-theme-purple: #cc00ff; --pulse-theme-purple-light: #e066ff; --pulse-theme-danger: #ff2424; --pulse-theme-text: #ffe8f5; --pulse-theme-text-muted: #cc7aaa; --pulse-theme-page-bg-a: #1a0030; --pulse-theme-page-bg-b: #0d001a; --pulse-theme-page-bg-c: #250040; --pulse-theme-page-bg-d: #130025; --pulse-theme-orb-1: rgba(255, 20, 147, 0.20); --pulse-theme-orb-2: rgba(57, 255, 20, 0.12); --pulse-theme-orb-3: rgba(204, 0, 255, 0.14); --pulse-theme-glass-bg: rgba(40, 0, 65, 0.78); --pulse-theme-glass-border: rgba(255, 31, 142, 0.22); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --pulse-theme-glass-blur: 24px; --pulse-theme-chat-border: rgba(255, 31, 142, 0.20); --pulse-theme-header-border: rgba(255, 31, 142, 0.16); --pulse-theme-chat-dot-color: rgba(255, 31, 142, 0.08); --pulse-theme-activity-bg: rgba(20, 0, 35, 0.80); --pulse-theme-divider-color: rgba(255, 31, 142, 0.30); --pulse-theme-input-bg: rgba(20, 0, 35, 0.82); --pulse-theme-input-bg-focus: rgba(30, 0, 50, 0.90); --pulse-theme-input-border: rgba(255, 31, 142, 0.28); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(255, 31, 142, 0.55); --pulse-theme-input-glow-2: rgba(255, 31, 142, 0.22); --pulse-theme-input-glow-3: rgba(255, 107, 181, 0.65); --pulse-theme-input-glow-4: rgba(255, 107, 181, 0.28); --pulse-theme-btn-bg: rgba(255, 31, 142, 0.10); --pulse-theme-btn-border: rgba(255, 31, 142, 0.32); --pulse-theme-btn-shadow: 0 1px 6px rgba(255, 31, 142, 0.14); --pulse-theme-btn-hover-bg: rgba(255, 31, 142, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(255, 31, 142, 0.35); --pulse-theme-bubble-user-bg: #8b0050; --pulse-theme-bubble-user-text: #ffe8f5; --pulse-theme-bubble-ai-bg: rgba(35, 0, 55, 0.88); --pulse-theme-bubble-ai-border: rgba(255, 31, 142, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #ffe8f5; --pulse-theme-canvas-glow-1: rgba(255, 31, 142, 0.10); --pulse-theme-canvas-glow-2: rgba(57, 255, 20, 0.06); --pulse-theme-canvas-glow-1b: rgba(255, 31, 142, 0.20); --pulse-theme-canvas-glow-2b: rgba(57, 255, 20, 0.10); --pulse-theme-sweep-color: rgba(255, 31, 142, 0.22); --pulse-theme-sweep-duration: 7.5s; --pulse-theme-glow-color: rgba(255, 31, 142, 0.55); --pulse-theme-solid-bg: rgba(20, 0, 32, 0.97); --pulse-theme-solid-input-bg: rgba(14, 0, 22, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 31, 142, 0.14); --pulse-theme-gel-bg: rgba(40, 0, 65, 0.50); --pulse-theme-gel-input-bg: rgba(20, 0, 35, 0.56); } /* ── 4. Pulse (deep blue / white / black) ───────────────────────────────── */ :root[data-pulse-theme="pulse-blue"] { --pulse-theme-primary: #2979ff; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #5393ff; --pulse-theme-teal: #00e5ff; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #40eeff; --pulse-theme-purple: #7c4dff; --pulse-theme-purple-light: #a47bff; --pulse-theme-danger: #ff4d4d; --pulse-theme-text: #e8f0ff; --pulse-theme-text-muted: #6d90cc; --pulse-theme-page-bg-a: #020c24; --pulse-theme-page-bg-b: #041236; --pulse-theme-page-bg-c: #020a1e; --pulse-theme-page-bg-d: #010810; --pulse-theme-orb-1: rgba(41, 121, 255, 0.20); --pulse-theme-orb-2: rgba(0, 229, 255, 0.12); --pulse-theme-orb-3: rgba(124, 77, 255, 0.12); --pulse-theme-glass-bg: rgba(3, 14, 50, 0.80); --pulse-theme-glass-border: rgba(41, 121, 255, 0.22); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(41, 121, 255, 0.20); --pulse-theme-header-border: rgba(41, 121, 255, 0.16); --pulse-theme-chat-dot-color: rgba(41, 121, 255, 0.10); --pulse-theme-activity-bg: rgba(2, 9, 28, 0.80); --pulse-theme-divider-color: rgba(41, 121, 255, 0.28); --pulse-theme-input-bg: rgba(2, 9, 30, 0.82); --pulse-theme-input-bg-focus: rgba(4, 14, 45, 0.92); --pulse-theme-input-border: rgba(41, 121, 255, 0.28); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(41, 121, 255, 0.55); --pulse-theme-input-glow-2: rgba(41, 121, 255, 0.22); --pulse-theme-input-glow-3: rgba(83, 147, 255, 0.65); --pulse-theme-input-glow-4: rgba(83, 147, 255, 0.28); --pulse-theme-btn-bg: rgba(41, 121, 255, 0.10); --pulse-theme-btn-border: rgba(41, 121, 255, 0.32); --pulse-theme-btn-shadow: 0 1px 6px rgba(41, 121, 255, 0.14); --pulse-theme-btn-hover-bg: rgba(41, 121, 255, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(41, 121, 255, 0.35); --pulse-theme-bubble-user-bg: #1155cc; --pulse-theme-bubble-user-text: #e8f0ff; --pulse-theme-bubble-ai-bg: rgba(3, 14, 50, 0.88); --pulse-theme-bubble-ai-border: rgba(41, 121, 255, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.50); --pulse-theme-bubble-ai-text: #e8f0ff; --pulse-theme-canvas-glow-1: rgba(41, 121, 255, 0.10); --pulse-theme-canvas-glow-2: rgba(0, 229, 255, 0.06); --pulse-theme-canvas-glow-1b: rgba(41, 121, 255, 0.20); --pulse-theme-canvas-glow-2b: rgba(0, 229, 255, 0.12); --pulse-theme-sweep-color: rgba(41, 121, 255, 0.22); --pulse-theme-sweep-duration: 8s; --pulse-theme-glow-color: rgba(41, 121, 255, 0.55); --pulse-theme-solid-bg: rgba(2, 8, 35, 0.97); --pulse-theme-solid-input-bg: rgba(1, 6, 24, 0.98); --pulse-theme-solid-btn-bg: rgba(41, 121, 255, 0.14); --pulse-theme-gel-bg: rgba(3, 14, 50, 0.50); --pulse-theme-gel-input-bg: rgba(2, 9, 30, 0.56); } /* ── 5. App Ads (orange / white / black) ────────────────────────────────── */ :root[data-pulse-theme="app-ads"] { --pulse-theme-primary: #ff8604; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ffaa44; --pulse-theme-teal: #ff6b04; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #ff9444; --pulse-theme-purple: #ff4500; --pulse-theme-purple-light: #ff7748; --pulse-theme-danger: #ff1f4d; /* This theme's teal (#ff6b04) and primary (#ff8604) are both already orange, same hue family as the flat default warning amber - shifted to yellow so warning reads as a distinct color from teal/primary/danger. */ --pulse-theme-warning: #ffd400; --pulse-theme-text: #fff5e6; --pulse-theme-text-muted: #c49060; --pulse-theme-page-bg-a: #1a0e00; --pulse-theme-page-bg-b: #0f0800; --pulse-theme-page-bg-c: #200f00; --pulse-theme-page-bg-d: #140b00; --pulse-theme-orb-1: rgba(255, 134, 4, 0.22); --pulse-theme-orb-2: rgba(255, 107, 4, 0.14); --pulse-theme-orb-3: rgba(255, 69, 0, 0.12); --pulse-theme-glass-bg: rgba(30, 15, 0, 0.80); --pulse-theme-glass-border: rgba(255, 134, 4, 0.22); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(255, 134, 4, 0.20); --pulse-theme-header-border: rgba(255, 134, 4, 0.16); --pulse-theme-chat-dot-color: rgba(255, 134, 4, 0.09); --pulse-theme-activity-bg: rgba(15, 7, 0, 0.80); --pulse-theme-divider-color: rgba(255, 134, 4, 0.28); --pulse-theme-input-bg: rgba(15, 7, 0, 0.82); --pulse-theme-input-bg-focus: rgba(25, 12, 0, 0.92); --pulse-theme-input-border: rgba(255, 134, 4, 0.30); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.40); --pulse-theme-input-glow-1: rgba(255, 134, 4, 0.55); --pulse-theme-input-glow-2: rgba(255, 134, 4, 0.22); --pulse-theme-input-glow-3: rgba(255, 170, 68, 0.65); --pulse-theme-input-glow-4: rgba(255, 170, 68, 0.28); --pulse-theme-btn-bg: rgba(255, 134, 4, 0.10); --pulse-theme-btn-border: rgba(255, 134, 4, 0.32); --pulse-theme-btn-shadow: 0 1px 6px rgba(255, 134, 4, 0.14); --pulse-theme-btn-hover-bg: rgba(255, 134, 4, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(255, 134, 4, 0.35); --pulse-theme-bubble-user-bg: #b34500; --pulse-theme-bubble-user-text: #fff5e6; --pulse-theme-bubble-ai-bg: rgba(25, 12, 0, 0.88); --pulse-theme-bubble-ai-border: rgba(255, 134, 4, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.50); --pulse-theme-bubble-ai-text: #fff5e6; --pulse-theme-canvas-glow-1: rgba(255, 134, 4, 0.10); --pulse-theme-canvas-glow-2: rgba(255, 69, 0, 0.06); --pulse-theme-canvas-glow-1b: rgba(255, 134, 4, 0.20); --pulse-theme-canvas-glow-2b: rgba(255, 69, 0, 0.12); --pulse-theme-sweep-color: rgba(255, 134, 4, 0.22); --pulse-theme-sweep-duration: 7s; --pulse-theme-glow-color: rgba(255, 134, 4, 0.55); --pulse-theme-solid-bg: rgba(18, 8, 0, 0.97); --pulse-theme-solid-input-bg: rgba(12, 5, 0, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 134, 4, 0.14); --pulse-theme-gel-bg: rgba(30, 15, 0, 0.50); --pulse-theme-gel-input-bg: rgba(15, 7, 0, 0.56); } /* ── 6. Custom (palette injected as inline CSS vars by JS) ───────────────── */ :root[data-pulse-theme="custom"] { --pulse-theme-glass-blur: 22px; --pulse-theme-danger: #dc2626; /* Custom has no own --pulse-theme-page-bg-a, so it inherits the base :root's #dbeafe -- flat #f59e0b amber fails 3:1 there too (measured ~1.76:1, identical to Arctic Glass since they share the same background); darker amber verified at 5.81:1 against that real page-bg-a. */ --pulse-accuracy-tier-mid: #92400e; /* Same inherited #dbeafe -- flat #16a34a green (tier-high) verified at 5.84:1. */ --pulse-accuracy-tier-high: #166534; } /* ── 7. Midnight Chrome ──────────────────────────────────────────────────── */ :root[data-pulse-theme="midnight-chrome"] { --pulse-theme-primary: #c0c8d8; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #dde4f0; --pulse-theme-teal: #8899bb; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #aab8d0; --pulse-theme-purple: #7080a0; --pulse-theme-purple-light: #9aaac0; --pulse-theme-danger: #ff5252; --pulse-theme-text: #eef2f8; --pulse-theme-text-muted: #8898b8; --pulse-theme-page-bg-a: #0c0e12; --pulse-theme-page-bg-b: #141820; --pulse-theme-page-bg-c: #0e1016; --pulse-theme-page-bg-d: #0a0c10; --pulse-theme-orb-1: rgba(180, 192, 210, 0.14); --pulse-theme-orb-2: rgba(120, 140, 170, 0.10); --pulse-theme-orb-3: rgba(160, 172, 196, 0.10); --pulse-theme-glass-bg: rgba(16, 20, 30, 0.80); --pulse-theme-glass-border: rgba(200, 210, 230, 0.18); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.60); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(190, 205, 225, 0.16); --pulse-theme-header-border: rgba(190, 205, 225, 0.13); --pulse-theme-chat-dot-color: rgba(190, 205, 225, 0.07); --pulse-theme-activity-bg: rgba(10, 12, 18, 0.80); --pulse-theme-divider-color: rgba(190, 205, 225, 0.22); --pulse-theme-input-bg: rgba(10, 12, 20, 0.82); --pulse-theme-input-bg-focus: rgba(14, 18, 28, 0.92); --pulse-theme-input-border: rgba(190, 205, 225, 0.22); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.50); --pulse-theme-input-glow-1: rgba(192, 200, 216, 0.50); --pulse-theme-input-glow-2: rgba(192, 200, 216, 0.20); --pulse-theme-input-glow-3: rgba(221, 228, 240, 0.60); --pulse-theme-input-glow-4: rgba(221, 228, 240, 0.25); --pulse-theme-btn-bg: rgba(190, 205, 225, 0.08); --pulse-theme-btn-border: rgba(190, 205, 225, 0.26); --pulse-theme-btn-shadow: 0 1px 6px rgba(190, 205, 225, 0.10); --pulse-theme-btn-hover-bg: rgba(190, 205, 225, 0.16); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(190, 205, 225, 0.24); --pulse-theme-bubble-user-bg: #2c3448; --pulse-theme-bubble-user-text: #eef2f8; --pulse-theme-bubble-ai-bg: rgba(16, 20, 32, 0.88); --pulse-theme-bubble-ai-border: rgba(192, 200, 216, 0.40); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #eef2f8; --pulse-theme-canvas-glow-1: rgba(192, 200, 216, 0.08); --pulse-theme-canvas-glow-2: rgba(120, 140, 170, 0.05); --pulse-theme-canvas-glow-1b: rgba(192, 200, 216, 0.16); --pulse-theme-canvas-glow-2b: rgba(120, 140, 170, 0.10); --pulse-theme-sweep-color: rgba(220, 228, 244, 0.20); --pulse-theme-sweep-duration: 11s; --pulse-theme-glow-color: rgba(192, 200, 216, 0.45); --pulse-theme-solid-bg: rgba(10, 12, 18, 0.97); --pulse-theme-solid-input-bg: rgba(8, 10, 14, 0.98); --pulse-theme-solid-btn-bg: rgba(190, 205, 225, 0.11); --pulse-theme-gel-bg: rgba(16, 20, 30, 0.50); --pulse-theme-gel-input-bg: rgba(10, 12, 20, 0.56); } /* ── 8. Ember Forge ──────────────────────────────────────────────────────── */ :root[data-pulse-theme="ember-forge"] { --pulse-theme-primary: #ff3d00; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ff6e40; --pulse-theme-teal: #ff8c00; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #ffb74d; --pulse-theme-purple: #dd2c00; --pulse-theme-purple-light: #ff5722; --pulse-theme-danger: #e6003d; /* Founder-reported 2026-08-04: success (teal #ff8c00) and warning were indistinguishable - this whole preset is fire-toned (primary/teal both orange), so shifted warning to yellow to read as its own color. */ --pulse-theme-warning: #ffd400; --pulse-theme-text: #fff3e0; --pulse-theme-text-muted: #bf7a50; --pulse-theme-page-bg-a: #0d0500; --pulse-theme-page-bg-b: #160800; --pulse-theme-page-bg-c: #0a0400; --pulse-theme-page-bg-d: #120600; --pulse-theme-orb-1: rgba(255, 61, 0, 0.22); --pulse-theme-orb-2: rgba(255, 140, 0, 0.14); --pulse-theme-orb-3: rgba(221, 44, 0, 0.14); --pulse-theme-glass-bg: rgba(22, 8, 0, 0.82); --pulse-theme-glass-border: rgba(255, 100, 30, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.65); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(255, 100, 30, 0.18); --pulse-theme-header-border: rgba(255, 100, 30, 0.14); --pulse-theme-chat-dot-color: rgba(255, 100, 30, 0.08); --pulse-theme-activity-bg: rgba(12, 4, 0, 0.82); --pulse-theme-divider-color: rgba(255, 100, 30, 0.26); --pulse-theme-input-bg: rgba(12, 4, 0, 0.84); --pulse-theme-input-bg-focus: rgba(18, 6, 0, 0.92); --pulse-theme-input-border: rgba(255, 100, 30, 0.28); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.50); --pulse-theme-input-glow-1: rgba(255, 80, 0, 0.55); --pulse-theme-input-glow-2: rgba(255, 80, 0, 0.22); --pulse-theme-input-glow-3: rgba(255, 130, 60, 0.65); --pulse-theme-input-glow-4: rgba(255, 130, 60, 0.28); --pulse-theme-btn-bg: rgba(255, 80, 0, 0.10); --pulse-theme-btn-border: rgba(255, 100, 30, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(255, 80, 0, 0.14); --pulse-theme-btn-hover-bg: rgba(255, 80, 0, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(255, 80, 0, 0.35); --pulse-theme-bubble-user-bg: #7f1900; --pulse-theme-bubble-user-text: #fff3e0; --pulse-theme-bubble-ai-bg: rgba(20, 6, 0, 0.90); --pulse-theme-bubble-ai-border: rgba(255, 80, 0, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.60); --pulse-theme-bubble-ai-text: #fff3e0; --pulse-theme-canvas-glow-1: rgba(255, 80, 0, 0.10); --pulse-theme-canvas-glow-2: rgba(255, 140, 0, 0.07); --pulse-theme-canvas-glow-1b: rgba(255, 80, 0, 0.20); --pulse-theme-canvas-glow-2b: rgba(255, 140, 0, 0.12); --pulse-theme-sweep-color: rgba(255, 100, 30, 0.22); --pulse-theme-sweep-duration: 6s; --pulse-theme-glow-color: rgba(255, 80, 0, 0.60); --pulse-theme-solid-bg: rgba(14, 5, 0, 0.97); --pulse-theme-solid-input-bg: rgba(10, 3, 0, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 80, 0, 0.14); --pulse-theme-gel-bg: rgba(22, 8, 0, 0.52); --pulse-theme-gel-input-bg: rgba(12, 4, 0, 0.58); } /* ── 9. Emerald Circuit ─────────────────────────────────────────────────── */ :root[data-pulse-theme="emerald-circuit"] { --pulse-theme-primary: #00ff88; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #40ffaa; --pulse-theme-teal: #00e5cc; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #40f0d8; --pulse-theme-purple: #00cc66; --pulse-theme-purple-light: #40dd88; --pulse-theme-danger: #ff2e4d; --pulse-theme-text: #e0fff0; --pulse-theme-text-muted: #50a070; --pulse-theme-page-bg-a: #010c05; --pulse-theme-page-bg-b: #031408; --pulse-theme-page-bg-c: #010e06; --pulse-theme-page-bg-d: #020f07; --pulse-theme-orb-1: rgba(0, 255, 136, 0.18); --pulse-theme-orb-2: rgba(0, 229, 204, 0.12); --pulse-theme-orb-3: rgba(0, 204, 102, 0.12); --pulse-theme-glass-bg: rgba(1, 16, 8, 0.82); --pulse-theme-glass-border: rgba(0, 255, 136, 0.18); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.65); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(0, 255, 136, 0.16); --pulse-theme-header-border: rgba(0, 255, 136, 0.13); --pulse-theme-chat-dot-color: rgba(0, 255, 136, 0.10); --pulse-theme-activity-bg: rgba(0, 8, 4, 0.82); --pulse-theme-divider-color: rgba(0, 255, 136, 0.24); --pulse-theme-input-bg: rgba(0, 8, 4, 0.84); --pulse-theme-input-bg-focus: rgba(1, 12, 6, 0.92); --pulse-theme-input-border: rgba(0, 255, 136, 0.24); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.50); --pulse-theme-input-glow-1: rgba(0, 255, 136, 0.55); --pulse-theme-input-glow-2: rgba(0, 255, 136, 0.22); --pulse-theme-input-glow-3: rgba(64, 255, 170, 0.65); --pulse-theme-input-glow-4: rgba(64, 255, 170, 0.28); --pulse-theme-btn-bg: rgba(0, 255, 136, 0.08); --pulse-theme-btn-border: rgba(0, 255, 136, 0.28); --pulse-theme-btn-shadow: 0 1px 6px rgba(0, 255, 136, 0.12); --pulse-theme-btn-hover-bg: rgba(0, 255, 136, 0.16); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(0, 255, 136, 0.30); --pulse-theme-bubble-user-bg: #006633; --pulse-theme-bubble-user-text: #e0fff0; --pulse-theme-bubble-ai-bg: rgba(1, 14, 8, 0.90); --pulse-theme-bubble-ai-border: rgba(0, 255, 136, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.60); --pulse-theme-bubble-ai-text: #e0fff0; --pulse-theme-canvas-glow-1: rgba(0, 255, 136, 0.09); --pulse-theme-canvas-glow-2: rgba(0, 229, 204, 0.06); --pulse-theme-canvas-glow-1b: rgba(0, 255, 136, 0.18); --pulse-theme-canvas-glow-2b: rgba(0, 229, 204, 0.12); --pulse-theme-sweep-color: rgba(0, 255, 136, 0.18); --pulse-theme-sweep-duration: 6.5s; --pulse-theme-glow-color: rgba(0, 255, 136, 0.55); --pulse-theme-solid-bg: rgba(1, 10, 5, 0.97); --pulse-theme-solid-input-bg: rgba(0, 7, 3, 0.98); --pulse-theme-solid-btn-bg: rgba(0, 255, 136, 0.10); --pulse-theme-gel-bg: rgba(1, 16, 8, 0.50); --pulse-theme-gel-input-bg: rgba(0, 8, 4, 0.56); } /* ── 10. Violet Storm ────────────────────────────────────────────────────── */ :root[data-pulse-theme="violet-storm"] { --pulse-theme-primary: #9b00ff; --pulse-theme-primary-light: #bf40ff; --pulse-theme-teal: #7000e0; --pulse-theme-teal-light: #9b40f0; --pulse-theme-purple: #cc00cc; --pulse-theme-purple-light: #e040fb; --pulse-theme-danger: #ff3b3b; --pulse-theme-text: #f0e0ff; --pulse-theme-text-muted: #9060b0; --pulse-theme-page-bg-a: #0a0014; --pulse-theme-page-bg-b: #120020; --pulse-theme-page-bg-c: #0c0018; --pulse-theme-page-bg-d: #08000f; --pulse-theme-orb-1: rgba(155, 0, 255, 0.22); --pulse-theme-orb-2: rgba(112, 0, 224, 0.14); --pulse-theme-orb-3: rgba(204, 0, 204, 0.14); --pulse-theme-glass-bg: rgba(14, 0, 26, 0.82); --pulse-theme-glass-border: rgba(155, 0, 255, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.65); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(155, 0, 255, 0.18); --pulse-theme-header-border: rgba(155, 0, 255, 0.14); --pulse-theme-chat-dot-color: rgba(155, 0, 255, 0.09); --pulse-theme-activity-bg: rgba(8, 0, 16, 0.82); --pulse-theme-divider-color: rgba(155, 0, 255, 0.28); --pulse-theme-input-bg: rgba(8, 0, 16, 0.84); --pulse-theme-input-bg-focus: rgba(12, 0, 24, 0.92); --pulse-theme-input-border: rgba(155, 0, 255, 0.26); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); --pulse-theme-input-glow-1: rgba(155, 0, 255, 0.55); --pulse-theme-input-glow-2: rgba(155, 0, 255, 0.22); --pulse-theme-input-glow-3: rgba(191, 64, 255, 0.65); --pulse-theme-input-glow-4: rgba(191, 64, 255, 0.28); --pulse-theme-btn-bg: rgba(155, 0, 255, 0.10); --pulse-theme-btn-border: rgba(155, 0, 255, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(155, 0, 255, 0.14); --pulse-theme-btn-hover-bg: rgba(155, 0, 255, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(155, 0, 255, 0.38); --pulse-theme-bubble-user-bg: #5500aa; --pulse-theme-bubble-user-text: #f0e0ff; --pulse-theme-bubble-ai-bg: rgba(12, 0, 22, 0.90); --pulse-theme-bubble-ai-border: rgba(155, 0, 255, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.60); --pulse-theme-bubble-ai-text: #f0e0ff; --pulse-theme-canvas-glow-1: rgba(155, 0, 255, 0.10); --pulse-theme-canvas-glow-2: rgba(204, 0, 204, 0.07); --pulse-theme-canvas-glow-1b: rgba(155, 0, 255, 0.20); --pulse-theme-canvas-glow-2b: rgba(204, 0, 204, 0.12); --pulse-theme-sweep-color: rgba(155, 0, 255, 0.22); --pulse-theme-sweep-duration: 7s; --pulse-theme-glow-color: rgba(155, 0, 255, 0.60); --pulse-theme-solid-bg: rgba(10, 0, 18, 0.97); --pulse-theme-solid-input-bg: rgba(6, 0, 12, 0.98); --pulse-theme-solid-btn-bg: rgba(155, 0, 255, 0.13); --pulse-theme-gel-bg: rgba(14, 0, 26, 0.50); --pulse-theme-gel-input-bg: rgba(8, 0, 16, 0.56); } /* ── 11. Rose Gold Luxe ─────────────────────────────────────────────────── */ :root[data-pulse-theme="rose-gold"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.93:1) -- darker amber verified at 6.36:1 against this theme's real page-bg-a (#fdf0ec). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 6.40:1. */ --pulse-accuracy-tier-high: #166534; /* Flat #e8956d fails 3:1 as a direct icon/text foreground against this theme's page-bg-a (measured ~2.35:1) -- darker terracotta verified at ~4.9:1. Kept as fill (--pulse-theme-solid-btn-bg etc.) since those don't need the darker value. */ --pulse-theme-primary: #b8522e; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- this theme's own page background is LIGHT, so stays flat #000 rather than var(--pulse-theme-page-bg-a) (see the --pulse-theme-on-teal comment on Cloud Nine for the full rationale). */ --pulse-theme-on-primary: #000; --pulse-theme-primary-light: #f0b090; /* Flat #c9747a fails 4.5:1 as icon color / white-text-on-fill (measured ~3.35:1, passes the 3:1 icon floor but not text) -- darker dusty-rose verified at ~5.98:1. */ --pulse-theme-teal: #9c4a52; --pulse-theme-teal-light: #dda0a5; --pulse-theme-purple: #b06090; --pulse-theme-purple-light: #cc88aa; --pulse-theme-danger: #c81e3a; --pulse-theme-text: #3a2020; --pulse-theme-text-muted: #806060; --pulse-theme-page-bg-a: #fdf0ec; --pulse-theme-page-bg-b: #fff8f6; --pulse-theme-page-bg-c: #fce8e2; --pulse-theme-page-bg-d: #fff4f0; --pulse-theme-orb-1: rgba(232, 149, 109, 0.18); --pulse-theme-orb-2: rgba(201, 116, 122, 0.12); --pulse-theme-orb-3: rgba(176, 96, 144, 0.10); --pulse-theme-glass-bg: rgba(255, 248, 245, 0.72); --pulse-theme-glass-border: rgba(232, 149, 109, 0.35); --pulse-theme-glass-shadow: 0 8px 32px rgba(180, 80, 60, 0.12); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(232, 149, 109, 0.28); --pulse-theme-header-border: rgba(232, 149, 109, 0.22); --pulse-theme-chat-dot-color: rgba(232, 149, 109, 0.10); --pulse-theme-activity-bg: rgba(255, 248, 244, 0.80); --pulse-theme-divider-color: rgba(232, 149, 109, 0.30); --pulse-theme-input-bg: rgba(255, 252, 250, 0.88); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.96); --pulse-theme-input-border: rgba(232, 149, 109, 0.35); --pulse-theme-input-shadow: 0 2px 8px rgba(180, 80, 60, 0.08); --pulse-theme-input-glow-1: rgba(232, 149, 109, 0.50); --pulse-theme-input-glow-2: rgba(232, 149, 109, 0.20); --pulse-theme-input-glow-3: rgba(240, 176, 144, 0.60); --pulse-theme-input-glow-4: rgba(240, 176, 144, 0.25); --pulse-theme-btn-bg: rgba(255, 250, 248, 0.85); --pulse-theme-btn-border: rgba(232, 149, 109, 0.35); --pulse-theme-btn-shadow: 0 1px 4px rgba(180, 80, 60, 0.10); --pulse-theme-btn-hover-bg: rgba(232, 149, 109, 0.12); --pulse-theme-btn-hover-shadow: 0 2px 10px rgba(232, 149, 109, 0.25); --pulse-theme-bubble-user-bg: #e8956d; --pulse-theme-bubble-user-text: #fff8f5; --pulse-theme-bubble-ai-bg: rgba(255, 250, 248, 0.80); --pulse-theme-bubble-ai-border: rgba(232, 149, 109, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(180, 80, 60, 0.10); --pulse-theme-bubble-ai-text: #3a2020; --pulse-theme-canvas-glow-1: rgba(232, 149, 109, 0.08); --pulse-theme-canvas-glow-2: rgba(176, 96, 144, 0.05); --pulse-theme-canvas-glow-1b: rgba(232, 149, 109, 0.14); --pulse-theme-canvas-glow-2b: rgba(176, 96, 144, 0.10); --pulse-theme-sweep-color: rgba(232, 149, 109, 0.25); --pulse-theme-sweep-duration: 10s; --pulse-theme-glow-color: rgba(232, 149, 109, 0.45); --pulse-theme-solid-bg: rgba(255, 245, 240, 0.97); --pulse-theme-solid-input-bg: rgba(255, 250, 248, 0.98); --pulse-theme-solid-btn-bg: rgba(232, 149, 109, 0.12); --pulse-theme-gel-bg: rgba(255, 248, 245, 0.52); --pulse-theme-gel-input-bg: rgba(255, 252, 250, 0.58); } /* ── 12. Cloud Nine ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="cloud-nine"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.87:1) -- darker amber verified at 6.18:1 against this theme's real page-bg-a (#e0f2fe). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 6.21:1. */ --pulse-accuracy-tier-high: #166534; /* Flat #0ea5e9 fails 3:1 as a direct icon/link/accent-text foreground against this theme's page-bg-a (measured ~2.77:1) -- deeper cerulean verified at ~5.93:1. */ --pulse-theme-primary: #0369a1; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- this theme's own page background is LIGHT, so stays flat #000 rather than var(--pulse-theme-page-bg-a) (see the --pulse-theme-on-teal comment on Cloud Nine for the full rationale). */ --pulse-theme-on-primary: #000; --pulse-theme-primary-light: #38bdf8; /* Flat #06b6d4 fails 3:1 as a direct icon foreground (measured ~2.43:1, the worst offender of this pass) -- the existing --pulse-theme-on-teal:#000 below only fixes the reverse case (text ON a solid teal fill), not this direct-foreground usage. Deeper cyan verified at ~5.36:1. */ --pulse-theme-teal: #0e7490; --pulse-theme-on-teal: #000; /* white fails contrast here too, but unlike the other fixed themes this one's own page background is LIGHT (see --pulse-theme-page-bg-a below) -- var(--pulse-theme-page-bg-a) would be light-on-light here, so this stays flat black rather than following Neon Obsidian's "deep background" swap */ --pulse-theme-teal-light: #22d3ee; --pulse-theme-purple: #818cf8; --pulse-theme-purple-light: #a5b4fc; --pulse-theme-danger: #e11d48; --pulse-theme-text: #0c2340; --pulse-theme-text-muted: #4a7090; --pulse-theme-page-bg-a: #e0f2fe; --pulse-theme-page-bg-b: #ffffff; --pulse-theme-page-bg-c: #f0f9ff; --pulse-theme-page-bg-d: #ffffff; --pulse-theme-orb-1: rgba(14, 165, 233, 0.14); --pulse-theme-orb-2: rgba(6, 182, 212, 0.10); --pulse-theme-orb-3: rgba(129, 140, 248, 0.08); --pulse-theme-glass-bg: rgba(255, 255, 255, 0.72); --pulse-theme-glass-border: rgba(186, 230, 253, 0.90); --pulse-theme-glass-shadow: 0 8px 32px rgba(14, 120, 200, 0.10); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(125, 211, 252, 0.45); --pulse-theme-header-border: rgba(125, 211, 252, 0.35); --pulse-theme-chat-dot-color: rgba(14, 165, 233, 0.07); --pulse-theme-activity-bg: rgba(240, 249, 255, 0.75); --pulse-theme-divider-color: rgba(125, 211, 252, 0.55); --pulse-theme-input-bg: rgba(248, 252, 255, 0.88); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.97); --pulse-theme-input-border: rgba(125, 211, 252, 0.60); --pulse-theme-input-shadow: 0 2px 8px rgba(14, 120, 200, 0.07); --pulse-theme-input-glow-1: rgba(14, 165, 233, 0.45); --pulse-theme-input-glow-2: rgba(14, 165, 233, 0.18); --pulse-theme-input-glow-3: rgba(56, 189, 248, 0.55); --pulse-theme-input-glow-4: rgba(56, 189, 248, 0.22); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.82); --pulse-theme-btn-border: rgba(14, 165, 233, 0.22); --pulse-theme-btn-shadow: 0 1px 4px rgba(14, 165, 233, 0.08); --pulse-theme-btn-hover-bg: rgba(14, 165, 233, 0.09); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(14, 165, 233, 0.18); --pulse-theme-bubble-user-bg: #0ea5e9; --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.78); --pulse-theme-bubble-ai-border: rgba(14, 165, 233, 0.40); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(14, 120, 200, 0.08); --pulse-theme-bubble-ai-text: #0c2340; --pulse-theme-canvas-glow-1: rgba(14, 165, 233, 0.07); --pulse-theme-canvas-glow-2: rgba(129, 140, 248, 0.04); --pulse-theme-canvas-glow-1b: rgba(14, 165, 233, 0.13); --pulse-theme-canvas-glow-2b: rgba(129, 140, 248, 0.08); --pulse-theme-sweep-color: rgba(255, 255, 255, 0.35); --pulse-theme-sweep-duration: 9s; --pulse-theme-glow-color: rgba(14, 165, 233, 0.35); --pulse-theme-solid-bg: rgba(224, 242, 254, 0.97); --pulse-theme-solid-input-bg: rgba(240, 249, 255, 0.98); --pulse-theme-solid-btn-bg: rgba(186, 230, 253, 0.95); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.50); --pulse-theme-gel-input-bg: rgba(248, 252, 255, 0.58); } /* ── 13. Sage Garden ────────────────────────────────────────────────────── */ :root[data-pulse-theme="sage-garden"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.89:1) -- darker amber verified at 6.25:1 against this theme's real page-bg-a (#d1fae5). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 6.29:1. */ --pulse-accuracy-tier-high: #166534; --pulse-theme-primary: #059669; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- this theme's own page background is LIGHT, so stays flat #000 rather than var(--pulse-theme-page-bg-a) (see the --pulse-theme-on-teal comment on Cloud Nine for the full rationale). */ --pulse-theme-on-primary: #000; --pulse-theme-primary-light: #34d399; --pulse-theme-teal: #0d9488; --pulse-theme-teal-light: #2dd4bf; --pulse-theme-purple: #6d8b74; --pulse-theme-purple-light: #a8c4ae; --pulse-theme-danger: #dc2626; --pulse-theme-text: #0f2818; --pulse-theme-text-muted: #3d6b50; --pulse-theme-page-bg-a: #d1fae5; --pulse-theme-page-bg-b: #f9fdfb; --pulse-theme-page-bg-c: #ecfdf5; --pulse-theme-page-bg-d: #f4fbf7; --pulse-theme-orb-1: rgba(5, 150, 105, 0.14); --pulse-theme-orb-2: rgba(13, 148, 136, 0.10); --pulse-theme-orb-3: rgba(52, 211, 153, 0.08); --pulse-theme-glass-bg: rgba(249, 253, 251, 0.72); --pulse-theme-glass-border: rgba(167, 243, 208, 0.90); --pulse-theme-glass-shadow: 0 8px 32px rgba(5, 100, 60, 0.10); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(110, 231, 183, 0.45); --pulse-theme-header-border: rgba(110, 231, 183, 0.35); --pulse-theme-chat-dot-color: rgba(5, 150, 105, 0.07); --pulse-theme-activity-bg: rgba(236, 253, 245, 0.75); --pulse-theme-divider-color: rgba(110, 231, 183, 0.55); --pulse-theme-input-bg: rgba(248, 255, 250, 0.88); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.97); --pulse-theme-input-border: rgba(110, 231, 183, 0.60); --pulse-theme-input-shadow: 0 2px 8px rgba(5, 100, 60, 0.07); --pulse-theme-input-glow-1: rgba(5, 150, 105, 0.45); --pulse-theme-input-glow-2: rgba(5, 150, 105, 0.18); --pulse-theme-input-glow-3: rgba(52, 211, 153, 0.55); --pulse-theme-input-glow-4: rgba(52, 211, 153, 0.22); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.82); --pulse-theme-btn-border: rgba(5, 150, 105, 0.22); --pulse-theme-btn-shadow: 0 1px 4px rgba(5, 150, 105, 0.08); --pulse-theme-btn-hover-bg: rgba(5, 150, 105, 0.09); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(5, 150, 105, 0.18); --pulse-theme-bubble-user-bg: #059669; --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.78); --pulse-theme-bubble-ai-border: rgba(5, 150, 105, 0.40); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(5, 100, 60, 0.08); --pulse-theme-bubble-ai-text: #0f2818; --pulse-theme-canvas-glow-1: rgba(5, 150, 105, 0.07); --pulse-theme-canvas-glow-2: rgba(13, 148, 136, 0.04); --pulse-theme-canvas-glow-1b: rgba(5, 150, 105, 0.13); --pulse-theme-canvas-glow-2b: rgba(13, 148, 136, 0.08); --pulse-theme-sweep-color: rgba(255, 255, 255, 0.32); --pulse-theme-sweep-duration: 10s; --pulse-theme-glow-color: rgba(5, 150, 105, 0.35); --pulse-theme-solid-bg: rgba(209, 250, 229, 0.97); --pulse-theme-solid-input-bg: rgba(236, 253, 245, 0.98); --pulse-theme-solid-btn-bg: rgba(167, 243, 208, 0.95); --pulse-theme-gel-bg: rgba(249, 253, 251, 0.50); --pulse-theme-gel-input-bg: rgba(248, 255, 250, 0.58); } /* ── 14. Lavender Mist ──────────────────────────────────────────────────── */ :root[data-pulse-theme="lavender-mist"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.81:1) -- darker amber verified at 5.97:1 against this theme's real page-bg-a (#ede9fe). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 6.00:1. */ --pulse-accuracy-tier-high: #166534; --pulse-theme-primary: #7c3aed; --pulse-theme-primary-light: #a78bfa; --pulse-theme-teal: #6d28d9; --pulse-theme-teal-light: #8b5cf6; --pulse-theme-purple: #9333ea; --pulse-theme-purple-light: #c084fc; --pulse-theme-danger: #e11d48; --pulse-theme-text: #1e1240; --pulse-theme-text-muted: #6b5b9a; --pulse-theme-page-bg-a: #ede9fe; --pulse-theme-page-bg-b: #faf8ff; --pulse-theme-page-bg-c: #f5f3ff; --pulse-theme-page-bg-d: #fdfcff; --pulse-theme-orb-1: rgba(124, 58, 237, 0.14); --pulse-theme-orb-2: rgba(109, 40, 217, 0.10); --pulse-theme-orb-3: rgba(167, 139, 250, 0.08); --pulse-theme-glass-bg: rgba(255, 255, 255, 0.70); --pulse-theme-glass-border: rgba(221, 214, 254, 0.90); --pulse-theme-glass-shadow: 0 8px 32px rgba(80, 40, 160, 0.10); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(196, 181, 253, 0.45); --pulse-theme-header-border: rgba(196, 181, 253, 0.35); --pulse-theme-chat-dot-color: rgba(124, 58, 237, 0.07); --pulse-theme-activity-bg: rgba(245, 243, 255, 0.75); --pulse-theme-divider-color: rgba(196, 181, 253, 0.55); --pulse-theme-input-bg: rgba(253, 251, 255, 0.88); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.97); --pulse-theme-input-border: rgba(196, 181, 253, 0.60); --pulse-theme-input-shadow: 0 2px 8px rgba(80, 40, 160, 0.07); --pulse-theme-input-glow-1: rgba(124, 58, 237, 0.45); --pulse-theme-input-glow-2: rgba(124, 58, 237, 0.18); --pulse-theme-input-glow-3: rgba(167, 139, 250, 0.55); --pulse-theme-input-glow-4: rgba(167, 139, 250, 0.22); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.82); --pulse-theme-btn-border: rgba(124, 58, 237, 0.22); --pulse-theme-btn-shadow: 0 1px 4px rgba(124, 58, 237, 0.08); --pulse-theme-btn-hover-bg: rgba(124, 58, 237, 0.09); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(124, 58, 237, 0.18); --pulse-theme-bubble-user-bg: #7c3aed; --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.78); --pulse-theme-bubble-ai-border: rgba(124, 58, 237, 0.40); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(80, 40, 160, 0.08); --pulse-theme-bubble-ai-text: #1e1240; --pulse-theme-canvas-glow-1: rgba(124, 58, 237, 0.07); --pulse-theme-canvas-glow-2: rgba(147, 51, 234, 0.04); --pulse-theme-canvas-glow-1b: rgba(124, 58, 237, 0.13); --pulse-theme-canvas-glow-2b: rgba(147, 51, 234, 0.08); --pulse-theme-sweep-color: rgba(255, 255, 255, 0.30); --pulse-theme-sweep-duration: 10s; --pulse-theme-glow-color: rgba(124, 58, 237, 0.35); --pulse-theme-solid-bg: rgba(237, 233, 254, 0.97); --pulse-theme-solid-input-bg: rgba(245, 243, 255, 0.98); --pulse-theme-solid-btn-bg: rgba(221, 214, 254, 0.95); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.50); --pulse-theme-gel-input-bg: rgba(253, 251, 255, 0.58); } /* ── 15. Cyber Grid ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="cyber-grid"] { --pulse-theme-primary: #00e5ff; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #40efff; --pulse-theme-teal: #00b8d4; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #00e5ff; --pulse-theme-purple: #ff9100; --pulse-theme-purple-light: #ffb340; --pulse-theme-danger: #ff3b3b; --pulse-theme-text: #b8eeff; --pulse-theme-text-muted: #4a7a95; --pulse-theme-page-bg-a: #000000; --pulse-theme-page-bg-b: #000c1a; --pulse-theme-page-bg-c: #000810; --pulse-theme-page-bg-d: #000000; --pulse-theme-orb-1: rgba(0, 229, 255, 0.14); --pulse-theme-orb-2: rgba(0, 184, 212, 0.09); --pulse-theme-orb-3: rgba(255, 145, 0, 0.15); --pulse-theme-glass-bg: rgba(0, 8, 22, 0.88); --pulse-theme-glass-border: rgba(0, 229, 255, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 229, 255, 0.10); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(0, 229, 255, 0.15); --pulse-theme-header-border: rgba(0, 229, 255, 0.12); --pulse-theme-chat-dot-color: rgba(0, 229, 255, 0.07); --pulse-theme-activity-bg: rgba(0, 6, 16, 0.80); --pulse-theme-divider-color: rgba(0, 229, 255, 0.20); --pulse-theme-input-bg: rgba(0, 6, 18, 0.85); --pulse-theme-input-bg-focus: rgba(0, 10, 26, 0.92); --pulse-theme-input-border: rgba(0, 229, 255, 0.28); --pulse-theme-input-shadow: 0 2px 8px rgba(0, 229, 255, 0.08); --pulse-theme-input-glow-1: rgba(0, 229, 255, 0.55); --pulse-theme-input-glow-2: rgba(0, 229, 255, 0.22); --pulse-theme-input-glow-3: rgba(0, 184, 212, 0.65); --pulse-theme-input-glow-4: rgba(0, 184, 212, 0.28); --pulse-theme-btn-bg: rgba(0, 12, 30, 0.85); --pulse-theme-btn-border: rgba(0, 229, 255, 0.28); --pulse-theme-btn-shadow: 0 1px 4px rgba(0, 229, 255, 0.10); --pulse-theme-btn-hover-bg: rgba(0, 229, 255, 0.12); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(0, 229, 255, 0.22); --pulse-theme-bubble-user-bg: rgba(140, 70, 0, 0.75); --pulse-theme-bubble-user-text: #ffcc80; --pulse-theme-bubble-ai-bg: rgba(0, 8, 22, 0.80); --pulse-theme-bubble-ai-border: rgba(0, 229, 255, 0.35); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(0, 229, 255, 0.10); --pulse-theme-bubble-ai-text: #b8eeff; --pulse-theme-canvas-glow-1: rgba(0, 229, 255, 0.10); --pulse-theme-canvas-glow-2: rgba(255, 145, 0, 0.18); --pulse-theme-canvas-glow-1b: rgba(0, 229, 255, 0.18); --pulse-theme-canvas-glow-2b: rgba(255, 145, 0, 0.28); --pulse-theme-sweep-color: rgba(0, 229, 255, 0.28); --pulse-theme-sweep-duration: 9s; --pulse-theme-glow-color: rgba(0, 229, 255, 0.55); --pulse-theme-solid-bg: rgba(0, 10, 26, 0.97); --pulse-theme-solid-input-bg: rgba(0, 14, 34, 0.98); --pulse-theme-solid-btn-bg: rgba(0, 18, 42, 0.96); --pulse-theme-gel-bg: rgba(0, 8, 22, 0.52); --pulse-theme-gel-input-bg: rgba(0, 10, 26, 0.60); } /* ── 16. Bioluminescent Understory ──────────────────────────────────────── */ :root[data-pulse-theme="bioluminescent-understory"] { --pulse-theme-primary: #56f2a3; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #8ff7c2; --pulse-theme-teal: #00c9a7; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #4ee0c4; --pulse-theme-purple: #22d3ee; --pulse-theme-purple-light: #67e8f9; --pulse-theme-danger: #ff4d6d; --pulse-theme-text: #d7fff0; --pulse-theme-text-muted: #4f9a83; --pulse-theme-page-bg-a: #010f0a; --pulse-theme-page-bg-b: #031f16; --pulse-theme-page-bg-c: #01120c; --pulse-theme-page-bg-d: #020a08; --pulse-theme-orb-1: rgba(86, 242, 163, 0.18); --pulse-theme-orb-2: rgba(0, 201, 167, 0.12); --pulse-theme-orb-3: rgba(34, 211, 238, 0.12); --pulse-theme-glass-bg: rgba(2, 20, 15, 0.82); --pulse-theme-glass-border: rgba(86, 242, 163, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.60); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(86, 242, 163, 0.18); --pulse-theme-header-border: rgba(86, 242, 163, 0.14); --pulse-theme-chat-dot-color: rgba(86, 242, 163, 0.08); --pulse-theme-activity-bg: rgba(1, 14, 10, 0.80); --pulse-theme-divider-color: rgba(86, 242, 163, 0.26); --pulse-theme-input-bg: rgba(1, 14, 10, 0.82); --pulse-theme-input-bg-focus: rgba(2, 20, 15, 0.92); --pulse-theme-input-border: rgba(86, 242, 163, 0.26); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(86, 242, 163, 0.55); --pulse-theme-input-glow-2: rgba(86, 242, 163, 0.22); --pulse-theme-input-glow-3: rgba(143, 247, 194, 0.65); --pulse-theme-input-glow-4: rgba(143, 247, 194, 0.28); --pulse-theme-btn-bg: rgba(86, 242, 163, 0.09); --pulse-theme-btn-border: rgba(86, 242, 163, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(86, 242, 163, 0.12); --pulse-theme-btn-hover-bg: rgba(86, 242, 163, 0.18); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(86, 242, 163, 0.30); --pulse-theme-bubble-user-bg: #067a55; --pulse-theme-bubble-user-text: #d7fff0; --pulse-theme-bubble-ai-bg: rgba(2, 22, 16, 0.88); --pulse-theme-bubble-ai-border: rgba(86, 242, 163, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #d7fff0; --pulse-theme-canvas-glow-1: rgba(86, 242, 163, 0.09); --pulse-theme-canvas-glow-2: rgba(34, 211, 238, 0.06); --pulse-theme-canvas-glow-1b: rgba(86, 242, 163, 0.18); --pulse-theme-canvas-glow-2b: rgba(34, 211, 238, 0.12); --pulse-theme-sweep-color: rgba(86, 242, 163, 0.20); --pulse-theme-sweep-duration: 9s; --pulse-theme-glow-color: rgba(86, 242, 163, 0.50); --pulse-theme-solid-bg: rgba(2, 16, 12, 0.97); --pulse-theme-solid-input-bg: rgba(1, 12, 9, 0.98); --pulse-theme-solid-btn-bg: rgba(86, 242, 163, 0.12); --pulse-theme-gel-bg: rgba(2, 20, 15, 0.52); --pulse-theme-gel-input-bg: rgba(1, 14, 10, 0.58); } /* ── 17. Amberwave ───────────────────────────────────────────────────────── */ :root[data-pulse-theme="amberwave"] { --pulse-theme-primary: #ffb000; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ffc94d; --pulse-theme-teal: #ff3864; --pulse-theme-teal-light: #ff6f8f; --pulse-theme-purple: #a855f7; --pulse-theme-purple-light: #c084fc; --pulse-theme-danger: #ff2d55; --pulse-theme-text: #fff0da; --pulse-theme-text-muted: #b08060; --pulse-theme-page-bg-a: #170a00; --pulse-theme-page-bg-b: #1b1023; --pulse-theme-page-bg-c: #100a14; --pulse-theme-page-bg-d: #0d0710; --pulse-theme-orb-1: rgba(255, 176, 0, 0.20); --pulse-theme-orb-2: rgba(255, 56, 100, 0.13); --pulse-theme-orb-3: rgba(168, 85, 247, 0.13); --pulse-theme-glass-bg: rgba(24, 14, 10, 0.82); --pulse-theme-glass-border: rgba(255, 176, 0, 0.22); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.60); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(255, 176, 0, 0.20); --pulse-theme-header-border: rgba(255, 176, 0, 0.16); --pulse-theme-chat-dot-color: rgba(255, 176, 0, 0.09); --pulse-theme-activity-bg: rgba(16, 9, 6, 0.80); --pulse-theme-divider-color: rgba(255, 176, 0, 0.28); --pulse-theme-input-bg: rgba(16, 9, 6, 0.82); --pulse-theme-input-bg-focus: rgba(22, 13, 8, 0.92); --pulse-theme-input-border: rgba(255, 176, 0, 0.28); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(255, 176, 0, 0.55); --pulse-theme-input-glow-2: rgba(255, 176, 0, 0.22); --pulse-theme-input-glow-3: rgba(255, 201, 77, 0.65); --pulse-theme-input-glow-4: rgba(255, 201, 77, 0.28); --pulse-theme-btn-bg: rgba(255, 176, 0, 0.10); --pulse-theme-btn-border: rgba(255, 176, 0, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(255, 176, 0, 0.14); --pulse-theme-btn-hover-bg: rgba(255, 176, 0, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(255, 176, 0, 0.32); --pulse-theme-bubble-user-bg: #b35f00; --pulse-theme-bubble-user-text: #fff0da; --pulse-theme-bubble-ai-bg: rgba(22, 13, 18, 0.88); --pulse-theme-bubble-ai-border: rgba(255, 56, 100, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #fff0da; --pulse-theme-canvas-glow-1: rgba(255, 176, 0, 0.10); --pulse-theme-canvas-glow-2: rgba(168, 85, 247, 0.06); --pulse-theme-canvas-glow-1b: rgba(255, 176, 0, 0.20); --pulse-theme-canvas-glow-2b: rgba(168, 85, 247, 0.12); --pulse-theme-sweep-color: rgba(255, 176, 0, 0.22); --pulse-theme-sweep-duration: 5s; --pulse-theme-glow-color: rgba(255, 176, 0, 0.55); --pulse-theme-solid-bg: rgba(16, 9, 7, 0.97); --pulse-theme-solid-input-bg: rgba(12, 7, 5, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 176, 0, 0.14); --pulse-theme-gel-bg: rgba(24, 14, 10, 0.50); --pulse-theme-gel-input-bg: rgba(16, 9, 6, 0.56); } /* ── 18. Nebula Drift ────────────────────────────────────────────────────── */ :root[data-pulse-theme="nebula-drift"] { --pulse-theme-primary: #8b6bff; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ad96ff; --pulse-theme-teal: #4c1d95; --pulse-theme-teal-light: #6d3fc4; --pulse-theme-purple: #c4b5fd; --pulse-theme-purple-light: #ded9fe; --pulse-theme-danger: #ff4d6d; --pulse-theme-text: #ece8ff; --pulse-theme-text-muted: #8676b8; --pulse-theme-page-bg-a: #08051a; --pulse-theme-page-bg-b: #0c0722; --pulse-theme-page-bg-c: #050313; --pulse-theme-page-bg-d: #030210; --pulse-theme-orb-1: rgba(139, 107, 255, 0.20); --pulse-theme-orb-2: rgba(76, 29, 149, 0.14); --pulse-theme-orb-3: rgba(196, 181, 253, 0.10); --pulse-theme-glass-bg: rgba(12, 8, 28, 0.82); --pulse-theme-glass-border: rgba(139, 107, 255, 0.20); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.60); --pulse-theme-glass-blur: 22px; --pulse-theme-chat-border: rgba(139, 107, 255, 0.18); --pulse-theme-header-border: rgba(139, 107, 255, 0.14); --pulse-theme-chat-dot-color: rgba(139, 107, 255, 0.09); --pulse-theme-activity-bg: rgba(8, 5, 18, 0.82); --pulse-theme-divider-color: rgba(139, 107, 255, 0.28); --pulse-theme-input-bg: rgba(8, 5, 18, 0.84); --pulse-theme-input-bg-focus: rgba(12, 8, 26, 0.92); --pulse-theme-input-border: rgba(139, 107, 255, 0.26); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.50); --pulse-theme-input-glow-1: rgba(139, 107, 255, 0.55); --pulse-theme-input-glow-2: rgba(139, 107, 255, 0.22); --pulse-theme-input-glow-3: rgba(173, 150, 255, 0.65); --pulse-theme-input-glow-4: rgba(173, 150, 255, 0.28); --pulse-theme-btn-bg: rgba(139, 107, 255, 0.10); --pulse-theme-btn-border: rgba(139, 107, 255, 0.30); --pulse-theme-btn-shadow: 0 1px 6px rgba(139, 107, 255, 0.14); --pulse-theme-btn-hover-bg: rgba(139, 107, 255, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(139, 107, 255, 0.35); --pulse-theme-bubble-user-bg: #4c1d95; --pulse-theme-bubble-user-text: #ece8ff; --pulse-theme-bubble-ai-bg: rgba(14, 9, 30, 0.90); --pulse-theme-bubble-ai-border: rgba(139, 107, 255, 0.50); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #ece8ff; --pulse-theme-canvas-glow-1: rgba(139, 107, 255, 0.10); --pulse-theme-canvas-glow-2: rgba(196, 181, 253, 0.06); --pulse-theme-canvas-glow-1b: rgba(139, 107, 255, 0.20); --pulse-theme-canvas-glow-2b: rgba(196, 181, 253, 0.12); --pulse-theme-sweep-color: rgba(139, 107, 255, 0.22); --pulse-theme-sweep-duration: 12s; --pulse-theme-glow-color: rgba(139, 107, 255, 0.55); --pulse-theme-solid-bg: rgba(9, 6, 20, 0.97); --pulse-theme-solid-input-bg: rgba(6, 4, 14, 0.98); --pulse-theme-solid-btn-bg: rgba(139, 107, 255, 0.13); --pulse-theme-gel-bg: rgba(12, 8, 28, 0.50); --pulse-theme-gel-input-bg: rgba(8, 5, 18, 0.56); } /* ── 19. Kanso Ink ───────────────────────────────────────────────────────── */ :root[data-pulse-theme="kanso-ink"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.74:1) -- darker amber verified at 5.75:1 against this theme's real page-bg-a (#EDE7DA). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 5.79:1. */ --pulse-accuracy-tier-high: #166534; --pulse-theme-primary: #B8391F; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- this theme's own page background is LIGHT, so stays flat #000 rather than var(--pulse-theme-page-bg-a) (see the --pulse-theme-on-teal comment on Cloud Nine for the full rationale). */ --pulse-theme-on-primary: #000; --pulse-theme-primary-light: #d4674a; --pulse-theme-teal: #2b2b28; --pulse-theme-teal-light: #4a4a45; --pulse-theme-purple: #C9A876; --pulse-theme-purple-light: #ddc094; --pulse-theme-danger: #b3261e; --pulse-theme-text: #2b2320; --pulse-theme-text-muted: #857a6e; --pulse-theme-page-bg-a: #EDE7DA; --pulse-theme-page-bg-b: #F7F3E9; --pulse-theme-page-bg-c: #E4DDC8; --pulse-theme-page-bg-d: #FBF8F1; --pulse-theme-orb-1: rgba(184, 57, 31, 0.12); --pulse-theme-orb-2: rgba(43, 43, 40, 0.08); --pulse-theme-orb-3: rgba(201, 168, 118, 0.14); --pulse-theme-glass-bg: rgba(250, 246, 236, 0.72); --pulse-theme-glass-border: rgba(184, 57, 31, 0.25); --pulse-theme-glass-shadow: 0 8px 32px rgba(90, 50, 20, 0.10); --pulse-theme-glass-blur: 16px; --pulse-theme-chat-border: rgba(184, 57, 31, 0.20); --pulse-theme-header-border: rgba(184, 57, 31, 0.16); --pulse-theme-chat-dot-color: rgba(184, 57, 31, 0.08); --pulse-theme-activity-bg: rgba(244, 238, 224, 0.78); --pulse-theme-divider-color: rgba(184, 57, 31, 0.22); --pulse-theme-input-bg: rgba(252, 249, 241, 0.90); --pulse-theme-input-bg-focus: rgba(255, 253, 248, 0.97); --pulse-theme-input-border: rgba(184, 57, 31, 0.28); --pulse-theme-input-shadow: 0 2px 8px rgba(90, 50, 20, 0.06); --pulse-theme-input-glow-1: rgba(184, 57, 31, 0.40); --pulse-theme-input-glow-2: rgba(184, 57, 31, 0.16); --pulse-theme-input-glow-3: rgba(212, 103, 74, 0.50); --pulse-theme-input-glow-4: rgba(212, 103, 74, 0.20); --pulse-theme-btn-bg: rgba(252, 249, 241, 0.85); --pulse-theme-btn-border: rgba(184, 57, 31, 0.28); --pulse-theme-btn-shadow: 0 1px 4px rgba(90, 50, 20, 0.08); --pulse-theme-btn-hover-bg: rgba(184, 57, 31, 0.10); --pulse-theme-btn-hover-shadow: 0 2px 8px rgba(184, 57, 31, 0.20); --pulse-theme-bubble-user-bg: #B8391F; --pulse-theme-bubble-user-text: #FBF3E7; --pulse-theme-bubble-ai-bg: rgba(252, 249, 241, 0.82); --pulse-theme-bubble-ai-border: rgba(184, 57, 31, 0.35); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(90, 50, 20, 0.08); --pulse-theme-bubble-ai-text: #2b2320; --pulse-theme-canvas-glow-1: rgba(184, 57, 31, 0.06); --pulse-theme-canvas-glow-2: rgba(201, 168, 118, 0.06); --pulse-theme-canvas-glow-1b: rgba(184, 57, 31, 0.12); --pulse-theme-canvas-glow-2b: rgba(201, 168, 118, 0.10); --pulse-theme-sweep-color: rgba(184, 57, 31, 0.16); --pulse-theme-sweep-duration: 14s; --pulse-theme-glow-color: rgba(184, 57, 31, 0.30); --pulse-theme-solid-bg: rgba(240, 233, 217, 0.97); --pulse-theme-solid-input-bg: rgba(248, 244, 234, 0.98); --pulse-theme-solid-btn-bg: rgba(184, 57, 31, 0.10); --pulse-theme-gel-bg: rgba(250, 246, 236, 0.50); --pulse-theme-gel-input-bg: rgba(252, 249, 241, 0.58); } /* ── 20. Glitch City ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="glitch-city"] { --pulse-theme-primary: #ff2ec4; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- see the --pulse-theme-on-teal comment on Neon Obsidian for the full rationale. */ --pulse-theme-on-primary: var(--pulse-theme-page-bg-a); --pulse-theme-primary-light: #ff70d9; --pulse-theme-teal: #00e5ff; --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); /* white fails contrast here too; this theme's page bg is dark, so same "deep background" swap as Neon Obsidian -- see its comment above */ --pulse-theme-teal-light: #66f0ff; --pulse-theme-purple: #39ff14; --pulse-theme-purple-light: #85ff70; --pulse-theme-danger: #ff2d55; --pulse-theme-text: #f5e6ff; --pulse-theme-text-muted: #a070b0; --pulse-theme-page-bg-a: #0d0512; --pulse-theme-page-bg-b: #170b2e; --pulse-theme-page-bg-c: #0a0618; --pulse-theme-page-bg-d: #06030d; --pulse-theme-orb-1: rgba(255, 46, 196, 0.20); --pulse-theme-orb-2: rgba(0, 229, 255, 0.13); --pulse-theme-orb-3: rgba(57, 255, 20, 0.10); --pulse-theme-glass-bg: rgba(16, 8, 26, 0.82); --pulse-theme-glass-border: rgba(255, 46, 196, 0.22); --pulse-theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.60); --pulse-theme-glass-blur: 20px; --pulse-theme-chat-border: rgba(255, 46, 196, 0.20); --pulse-theme-header-border: rgba(255, 46, 196, 0.16); --pulse-theme-chat-dot-color: rgba(255, 46, 196, 0.09); --pulse-theme-activity-bg: rgba(10, 6, 18, 0.80); --pulse-theme-divider-color: rgba(255, 46, 196, 0.28); --pulse-theme-input-bg: rgba(10, 6, 18, 0.82); --pulse-theme-input-bg-focus: rgba(16, 9, 26, 0.92); --pulse-theme-input-border: rgba(255, 46, 196, 0.28); --pulse-theme-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(255, 46, 196, 0.55); --pulse-theme-input-glow-2: rgba(255, 46, 196, 0.22); --pulse-theme-input-glow-3: rgba(0, 229, 255, 0.55); --pulse-theme-input-glow-4: rgba(0, 229, 255, 0.24); --pulse-theme-btn-bg: rgba(255, 46, 196, 0.10); --pulse-theme-btn-border: rgba(255, 46, 196, 0.32); --pulse-theme-btn-shadow: 0 1px 6px rgba(255, 46, 196, 0.14); --pulse-theme-btn-hover-bg: rgba(255, 46, 196, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 14px rgba(255, 46, 196, 0.35); --pulse-theme-bubble-user-bg: #9b0f76; --pulse-theme-bubble-user-text: #f5e6ff; --pulse-theme-bubble-ai-bg: rgba(14, 9, 24, 0.88); --pulse-theme-bubble-ai-border: rgba(0, 229, 255, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.55); --pulse-theme-bubble-ai-text: #f5e6ff; --pulse-theme-canvas-glow-1: rgba(255, 46, 196, 0.10); --pulse-theme-canvas-glow-2: rgba(57, 255, 20, 0.06); --pulse-theme-canvas-glow-1b: rgba(255, 46, 196, 0.20); --pulse-theme-canvas-glow-2b: rgba(57, 255, 20, 0.12); --pulse-theme-sweep-color: rgba(255, 46, 196, 0.22); --pulse-theme-sweep-duration: 6s; --pulse-theme-glow-color: rgba(255, 46, 196, 0.55); --pulse-theme-solid-bg: rgba(11, 6, 18, 0.97); --pulse-theme-solid-input-bg: rgba(8, 4, 13, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 46, 196, 0.14); --pulse-theme-gel-bg: rgba(16, 8, 26, 0.50); --pulse-theme-gel-input-bg: rgba(10, 6, 18, 0.56); } /* ── 21. Confetti Pop ────────────────────────────────────────────────────── */ :root[data-pulse-theme="confetti-pop"] { /* Flat #f59e0b amber fails 3:1 on this light-page theme (measured ~1.95:1) -- darker amber verified at 6.44:1 against this theme's real page-bg-a (#fff0f8). */ --pulse-accuracy-tier-mid: #92400e; /* Same page-bg-a -- flat #16a34a green (tier-high) verified at 6.48:1. */ --pulse-accuracy-tier-high: #166534; --pulse-theme-primary: #FF2E93; /* Same "on-teal" swap as above, applied to --pulse-theme-primary -- this theme's own page background is LIGHT, so stays flat #000 rather than var(--pulse-theme-page-bg-a) (see the --pulse-theme-on-teal comment on Cloud Nine for the full rationale). */ --pulse-theme-on-primary: #000; --pulse-theme-primary-light: #ff6fb5; --pulse-theme-teal: #FFC93C; --pulse-theme-on-teal: #000; /* white fails contrast here too, but unlike the other fixed themes this one's own page background is LIGHT (see --pulse-theme-page-bg-a below) -- var(--pulse-theme-page-bg-a) would be light-on-light here, so this stays flat black rather than following Neon Obsidian's "deep background" swap */ --pulse-theme-teal-light: #ffdb7a; --pulse-theme-purple: #5B5FFF; --pulse-theme-purple-light: #8a8dff; --pulse-theme-danger: #e11d48; /* This theme's teal (#FFC93C) is already yellow-gold, same hue family as the flat default warning amber - shifted to orange so warning reads as its own color against both teal and the pink primary/danger. */ --pulse-theme-warning: #f97316; --pulse-theme-text: #2b1030; --pulse-theme-text-muted: #8a6f95; --pulse-theme-page-bg-a: #fff0f8; --pulse-theme-page-bg-b: #fffaf0; --pulse-theme-page-bg-c: #f0f0ff; --pulse-theme-page-bg-d: #ffffff; --pulse-theme-orb-1: rgba(255, 46, 147, 0.16); --pulse-theme-orb-2: rgba(255, 201, 60, 0.14); --pulse-theme-orb-3: rgba(91, 95, 255, 0.12); --pulse-theme-glass-bg: rgba(255, 255, 255, 0.74); --pulse-theme-glass-border: rgba(255, 46, 147, 0.30); --pulse-theme-glass-shadow: 0 8px 32px rgba(150, 40, 110, 0.12); --pulse-theme-glass-blur: 18px; --pulse-theme-chat-border: rgba(255, 46, 147, 0.26); --pulse-theme-header-border: rgba(255, 46, 147, 0.20); --pulse-theme-chat-dot-color: rgba(255, 46, 147, 0.10); --pulse-theme-activity-bg: rgba(255, 248, 251, 0.78); --pulse-theme-divider-color: rgba(255, 46, 147, 0.26); --pulse-theme-input-bg: rgba(255, 252, 253, 0.88); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 0.97); --pulse-theme-input-border: rgba(255, 46, 147, 0.32); --pulse-theme-input-shadow: 0 2px 8px rgba(150, 40, 110, 0.08); --pulse-theme-input-glow-1: rgba(255, 46, 147, 0.45); --pulse-theme-input-glow-2: rgba(255, 46, 147, 0.18); --pulse-theme-input-glow-3: rgba(91, 95, 255, 0.50); --pulse-theme-input-glow-4: rgba(91, 95, 255, 0.20); --pulse-theme-btn-bg: rgba(255, 252, 253, 0.85); --pulse-theme-btn-border: rgba(255, 46, 147, 0.32); --pulse-theme-btn-shadow: 0 1px 4px rgba(150, 40, 110, 0.10); --pulse-theme-btn-hover-bg: rgba(255, 46, 147, 0.12); --pulse-theme-btn-hover-shadow: 0 2px 10px rgba(255, 46, 147, 0.25); --pulse-theme-bubble-user-bg: #FF2E93; --pulse-theme-bubble-user-text: #fff5fa; --pulse-theme-bubble-ai-bg: rgba(255, 252, 253, 0.82); --pulse-theme-bubble-ai-border: rgba(91, 95, 255, 0.40); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(150, 40, 110, 0.08); --pulse-theme-bubble-ai-text: #2b1030; --pulse-theme-canvas-glow-1: rgba(255, 46, 147, 0.08); --pulse-theme-canvas-glow-2: rgba(91, 95, 255, 0.06); --pulse-theme-canvas-glow-1b: rgba(255, 46, 147, 0.16); --pulse-theme-canvas-glow-2b: rgba(91, 95, 255, 0.10); --pulse-theme-sweep-color: rgba(255, 201, 60, 0.30); --pulse-theme-sweep-duration: 5s; --pulse-theme-glow-color: rgba(255, 46, 147, 0.40); --pulse-theme-solid-bg: rgba(255, 240, 248, 0.97); --pulse-theme-solid-input-bg: rgba(255, 250, 252, 0.98); --pulse-theme-solid-btn-bg: rgba(255, 46, 147, 0.12); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.52); --pulse-theme-gel-input-bg: rgba(255, 252, 253, 0.58); } /* ══════════════════════════════════════════════════════════ MATERIAL DESIGN THEMES (2026-08-09, founder-requested) — 3 presets built around Material's own "elevation" language: opaque near-solid surfaces (minimal --pulse-theme-glass-blur, high glass-bg alpha) instead of this app's usual frosted glass, plus a triple-layer box-shadow per surface (contact shadow + diffuse shadow + a colour-tinted ambient glow) standing in for Material's dp-based elevation shadow. Approved via founder mockup review before implementation. See also: the new 'lift' animation in pulseai.css (Carbon Lift's default), which pulses this same layered shadow deeper/shallower — box-shadow only, never transform, so it can't move any real interactive content (a transform-based draft was caught and rejected during mockup review for exactly that reason). ══════════════════════════════════════════════════════════ */ /* ── 22. Paper Stack ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="paper-stack"] { --pulse-theme-primary: #3F51B5; --pulse-theme-primary-light: #7986CB; --pulse-theme-teal: #009688; --pulse-theme-teal-light: #4DB6AC; --pulse-theme-purple: #FF4081; --pulse-theme-purple-light: #FF80AB; --pulse-theme-danger: #D32F2F; --pulse-theme-text: #212121; --pulse-theme-text-muted: #757575; --pulse-theme-page-bg-a: #EDEDED; --pulse-theme-page-bg-b: #F7F7F7; --pulse-theme-page-bg-c: #F0F0F0; --pulse-theme-page-bg-d: #FAFAFA; --pulse-theme-orb-1: rgba(63, 81, 181, 0.10); --pulse-theme-orb-2: rgba(0, 150, 136, 0.08); --pulse-theme-orb-3: rgba(255, 64, 129, 0.07); --pulse-theme-glass-bg: rgba(255, 255, 255, 0.97); --pulse-theme-glass-border: rgba(0, 0, 0, 0.06); --pulse-theme-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 3px 6px rgba(0, 0, 0, 0.14), 0 10px 22px -8px rgba(63, 81, 181, 0.35); --pulse-theme-glass-blur: 2px; --pulse-theme-chat-border: rgba(0, 0, 0, 0.08); --pulse-theme-header-border: rgba(0, 0, 0, 0.06); --pulse-theme-chat-dot-color: rgba(63, 81, 181, 0.05); --pulse-theme-activity-bg: rgba(245, 245, 245, 0.85); --pulse-theme-divider-color: rgba(0, 0, 0, 0.10); --pulse-theme-input-bg: rgba(255, 255, 255, 0.94); --pulse-theme-input-bg-focus: rgba(255, 255, 255, 1.00); --pulse-theme-input-border: rgba(0, 0, 0, 0.14); --pulse-theme-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 4px 10px -4px rgba(63, 81, 181, 0.20); --pulse-theme-input-glow-1: rgba(63, 81, 181, 0.40); --pulse-theme-input-glow-2: rgba(63, 81, 181, 0.16); --pulse-theme-input-glow-3: rgba(121, 134, 203, 0.50); --pulse-theme-input-glow-4: rgba(121, 134, 203, 0.20); --pulse-theme-btn-bg: rgba(255, 255, 255, 0.92); --pulse-theme-btn-border: rgba(63, 81, 181, 0.22); --pulse-theme-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 4px 10px -3px rgba(63, 81, 181, 0.30); --pulse-theme-btn-hover-bg: rgba(63, 81, 181, 0.08); --pulse-theme-btn-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 8px 16px -4px rgba(63, 81, 181, 0.40); --pulse-theme-bubble-user-bg: #3F51B5; --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(255, 255, 255, 0.96); --pulse-theme-bubble-ai-border: rgba(63, 81, 181, 0.30); --pulse-theme-bubble-ai-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 16px -6px rgba(63, 81, 181, 0.35); --pulse-theme-bubble-ai-text: #212121; --pulse-theme-canvas-glow-1: rgba(63, 81, 181, 0.05); --pulse-theme-canvas-glow-2: rgba(255, 64, 129, 0.03); --pulse-theme-canvas-glow-1b: rgba(63, 81, 181, 0.10); --pulse-theme-canvas-glow-2b: rgba(255, 64, 129, 0.06); --pulse-theme-sweep-color: rgba(63, 81, 181, 0.14); --pulse-theme-sweep-duration: 10s; --pulse-theme-glow-color: rgba(63, 81, 181, 0.35); --pulse-theme-solid-bg: rgba(255, 255, 255, 0.99); --pulse-theme-solid-input-bg: rgba(250, 250, 250, 0.99); --pulse-theme-solid-btn-bg: rgba(63, 81, 181, 0.10); --pulse-theme-gel-bg: rgba(255, 255, 255, 0.55); --pulse-theme-gel-input-bg: rgba(255, 255, 255, 0.62); } /* ── 23. Carbon Lift ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="carbon-lift"] { --pulse-theme-primary: #7C4DFF; --pulse-theme-primary-light: #B388FF; --pulse-theme-teal: #03DAC6; /* White text on a solid fill of this teal computes to ~1.8:1 -- same reasoning/fix as Neon Obsidian's own --pulse-theme-on-teal above: swap to this theme's own near-black page background instead of flat white. */ --pulse-theme-on-teal: var(--pulse-theme-page-bg-a); --pulse-theme-teal-light: #66FFF9; --pulse-theme-purple: #FF4081; --pulse-theme-purple-light: #FF80AB; --pulse-theme-danger: #FF5252; --pulse-theme-text: #ECECEC; --pulse-theme-text-muted: #A0A0A0; --pulse-theme-page-bg-a: #0D0D0D; --pulse-theme-page-bg-b: #161616; --pulse-theme-page-bg-c: #121212; --pulse-theme-page-bg-d: #1A1A1A; --pulse-theme-orb-1: rgba(124, 77, 255, 0.16); --pulse-theme-orb-2: rgba(3, 218, 198, 0.10); --pulse-theme-orb-3: rgba(255, 64, 129, 0.10); --pulse-theme-glass-bg: rgba(30, 30, 30, 0.94); --pulse-theme-glass-border: rgba(255, 255, 255, 0.08); --pulse-theme-glass-shadow: 0 2px 4px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.50), 0 20px 40px -10px rgba(124, 77, 255, 0.45); --pulse-theme-glass-blur: 4px; --pulse-theme-chat-border: rgba(255, 255, 255, 0.08); --pulse-theme-header-border: rgba(255, 255, 255, 0.06); --pulse-theme-chat-dot-color: rgba(124, 77, 255, 0.07); --pulse-theme-activity-bg: rgba(24, 24, 24, 0.80); --pulse-theme-divider-color: rgba(255, 255, 255, 0.10); --pulse-theme-input-bg: rgba(22, 22, 22, 0.88); --pulse-theme-input-bg-focus: rgba(28, 28, 28, 0.95); --pulse-theme-input-border: rgba(124, 77, 255, 0.28); --pulse-theme-input-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --pulse-theme-input-glow-1: rgba(124, 77, 255, 0.55); --pulse-theme-input-glow-2: rgba(124, 77, 255, 0.22); --pulse-theme-input-glow-3: rgba(179, 136, 255, 0.65); --pulse-theme-input-glow-4: rgba(179, 136, 255, 0.28); --pulse-theme-btn-bg: rgba(124, 77, 255, 0.10); --pulse-theme-btn-border: rgba(124, 77, 255, 0.32); --pulse-theme-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.40), 0 4px 10px -3px rgba(124, 77, 255, 0.30); --pulse-theme-btn-hover-bg: rgba(124, 77, 255, 0.20); --pulse-theme-btn-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 18px -4px rgba(124, 77, 255, 0.50); --pulse-theme-bubble-user-bg: #5E35B1; --pulse-theme-bubble-user-text: #ffffff; --pulse-theme-bubble-ai-bg: rgba(28, 28, 28, 0.90); --pulse-theme-bubble-ai-border: rgba(124, 77, 255, 0.45); --pulse-theme-bubble-ai-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 10px 24px -8px rgba(124, 77, 255, 0.35); --pulse-theme-bubble-ai-text: #ECECEC; --pulse-theme-canvas-glow-1: rgba(124, 77, 255, 0.09); --pulse-theme-canvas-glow-2: rgba(3, 218, 198, 0.05); --pulse-theme-canvas-glow-1b: rgba(124, 77, 255, 0.18); --pulse-theme-canvas-glow-2b: rgba(3, 218, 198, 0.10); --pulse-theme-sweep-color: rgba(124, 77, 255, 0.22); --pulse-theme-sweep-duration: 8s; --pulse-theme-glow-color: rgba(124, 77, 255, 0.50); --pulse-theme-solid-bg: rgba(24, 24, 24, 0.97); --pulse-theme-solid-input-bg: rgba(18, 18, 18, 0.98); --pulse-theme-solid-btn-bg: rgba(124, 77, 255, 0.14); --pulse-theme-gel-bg: rgba(30, 30, 30, 0.55); --pulse-theme-gel-input-bg: rgba(22, 22, 22, 0.60); } /* ── 24. Clay Podium ─────────────────────────────────────────────────────── */ :root[data-pulse-theme="clay-podium"] { --pulse-theme-primary: #C4622D; --pulse-theme-primary-light: #E08D5B; --pulse-theme-teal: #7D8B5A; --pulse-theme-teal-light: #A3B27E; --pulse-theme-purple: #D9A441; --pulse-theme-purple-light: #E8C275; --pulse-theme-danger: #B3261E; --pulse-theme-text: #3B2E28; --pulse-theme-text-muted: #8A7A6D; --pulse-theme-page-bg-a: #F0E6D8; --pulse-theme-page-bg-b: #FBF6EF; --pulse-theme-page-bg-c: #F6EFE7; --pulse-theme-page-bg-d: #FDFAF5; --pulse-theme-orb-1: rgba(196, 98, 45, 0.12); --pulse-theme-orb-2: rgba(125, 139, 90, 0.08); --pulse-theme-orb-3: rgba(217, 164, 65, 0.12); --pulse-theme-glass-bg: rgba(253, 250, 245, 0.96); --pulse-theme-glass-border: rgba(196, 98, 45, 0.18); --pulse-theme-glass-shadow: 0 1px 3px rgba(90, 50, 20, 0.20), 0 6px 14px rgba(90, 50, 20, 0.16), 0 18px 34px -10px rgba(196, 98, 45, 0.40); --pulse-theme-glass-blur: 4px; --pulse-theme-chat-border: rgba(196, 98, 45, 0.16); --pulse-theme-header-border: rgba(196, 98, 45, 0.12); --pulse-theme-chat-dot-color: rgba(196, 98, 45, 0.06); --pulse-theme-activity-bg: rgba(246, 239, 231, 0.82); --pulse-theme-divider-color: rgba(196, 98, 45, 0.18); --pulse-theme-input-bg: rgba(253, 250, 245, 0.90); --pulse-theme-input-bg-focus: rgba(255, 253, 249, 0.97); --pulse-theme-input-border: rgba(196, 98, 45, 0.26); --pulse-theme-input-shadow: 0 2px 8px rgba(90, 50, 20, 0.10); --pulse-theme-input-glow-1: rgba(196, 98, 45, 0.38); --pulse-theme-input-glow-2: rgba(196, 98, 45, 0.15); --pulse-theme-input-glow-3: rgba(224, 141, 91, 0.48); --pulse-theme-input-glow-4: rgba(224, 141, 91, 0.20); --pulse-theme-btn-bg: rgba(253, 250, 245, 0.88); --pulse-theme-btn-border: rgba(196, 98, 45, 0.26); --pulse-theme-btn-shadow: 0 1px 3px rgba(90, 50, 20, 0.14), 0 4px 10px -3px rgba(196, 98, 45, 0.28); --pulse-theme-btn-hover-bg: rgba(196, 98, 45, 0.10); --pulse-theme-btn-hover-shadow: 0 2px 6px rgba(90, 50, 20, 0.18), 0 8px 16px -4px rgba(196, 98, 45, 0.38); --pulse-theme-bubble-user-bg: #C4622D; --pulse-theme-bubble-user-text: #FBF3E7; --pulse-theme-bubble-ai-bg: rgba(253, 250, 245, 0.92); --pulse-theme-bubble-ai-border: rgba(196, 98, 45, 0.30); --pulse-theme-bubble-ai-shadow: 0 4px 14px rgba(90, 50, 20, 0.16), 0 10px 22px -8px rgba(196, 98, 45, 0.30); --pulse-theme-bubble-ai-text: #3B2E28; --pulse-theme-canvas-glow-1: rgba(196, 98, 45, 0.06); --pulse-theme-canvas-glow-2: rgba(217, 164, 65, 0.05); --pulse-theme-canvas-glow-1b: rgba(196, 98, 45, 0.12); --pulse-theme-canvas-glow-2b: rgba(217, 164, 65, 0.09); --pulse-theme-sweep-color: rgba(196, 98, 45, 0.14); --pulse-theme-sweep-duration: 12s; --pulse-theme-glow-color: rgba(196, 98, 45, 0.30); --pulse-theme-solid-bg: rgba(248, 242, 232, 0.98); --pulse-theme-solid-input-bg: rgba(252, 247, 240, 0.98); --pulse-theme-solid-btn-bg: rgba(196, 98, 45, 0.12); --pulse-theme-gel-bg: rgba(253, 250, 245, 0.52); --pulse-theme-gel-input-bg: rgba(255, 253, 249, 0.58); }