/* [claude:opus-4.7-1m][hurc:v0.7.0] Neural-LLM brand tokens. * * Brand-only design tokens for Neural-LLM and the Power Claude product. * These are NAMESPACED with `--nllm-*` and `--pc-*` so they never collide * with the extension's own legacy UI palette (retained for VS Code * dark-sidebar compatibility) or with the `--vscode-*` tokens * (VS Code webview API). * * --nllm-* : Neural-LLM corporate identity (parent brand) * --pc-* : Power Claude product (child brand) * * USAGE: * Marketing site (neural-llm.com) → --nllm-* + --pc-* * VS Code extension chrome → existing UI palette (do NOT * replace; the VS Code UX must keep * its current dark-sidebar palette) * Marketplace listing artwork → SVG defs already inline these * colors; CSS not loaded by the * Marketplace renderer. * * WCAG (against #0f172a deep navy surface AND #ffffff): * See README.md → "Color palette" table. */ :root { /* ── Neural-LLM corporate palette ──────────────────────────────── */ /* Primary violet (the brand's anchor color). Use for headers, * CTAs, primary fills. */ --nllm-violet: #7c3aed; --nllm-violet-deep: #5b21b6; /* darker mid-range for hover */ --nllm-violet-soft: #a855f7; /* softer accent / hover */ --nllm-violet-pale: #c4b5fd; /* tints, badges */ --nllm-violet-bg: #1e1b4b; /* deep brand background */ /* Cyan accent (the gradient counterpart). Pairs with violet to * form the signature electric gradient. */ --nllm-cyan: #06b6d4; --nllm-cyan-bright: #22d3ee; /* glow / hover */ --nllm-cyan-pale: #a5f3fc; /* subtle highlights */ /* Surface (the "code editor at night" palette). */ --nllm-surface-deep: #0f172a; /* primary dark surface */ --nllm-surface: #1e293b; /* secondary surface */ --nllm-surface-soft: #334155; /* tertiary / dividers */ --nllm-surface-edge: #475569; /* borders against dark */ /* Text. */ --nllm-text: #f8fafc; /* primary text on dark surface */ --nllm-text-muted: #cbd5e1; /* secondary text */ --nllm-text-subtle: #94a3b8; /* captions, timestamps */ --nllm-text-on-light: #1e293b; /* text on light surface (whitepaper) */ /* Signature gradient (use as `background-image: var(--nllm-gradient);`) */ --nllm-gradient: linear-gradient(135deg, #7c3aed 0%, #5b21b6 55%, #06b6d4 100%); --nllm-gradient-soft: linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, #22d3ee 100%); /* ── Power Claude product accents ──────────────────────────────── */ /* Power Claude inherits the Neural-LLM violet/cyan but adds the * "bolt" hot palette as its distinguishing accent. Use these for * CTAs, energy moments, "active" states in the product UI. */ --pc-bolt-amber: #f59e0b; --pc-bolt-amber-pale: #fde68a; --pc-bolt-magenta: #ec4899; --pc-bolt-magenta-pale:#fbcfe8; /* Bolt gradient — applied to "Power" wordmark, primary CTAs, * health-pulse animations. */ --pc-bolt-gradient: linear-gradient(135deg, #fde68a 0%, #f59e0b 35%, #ec4899 75%, #a855f7 100%); /* Status colors specific to Power Claude product UI. * (These are SUGGESTIONS for marketing-site use; the VS Code * extension keeps its existing status palette so the * dark-sidebar treatment doesn't change.) */ --pc-status-flowing: #22c55e; /* "session is healthy" green */ --pc-status-cooldown: #f59e0b; /* rate-limited, recovering */ --pc-status-blocked: #dc2626; /* hard stop */ /* ── Money / value semantics (marketing emphasis) ───────────── * A dedicated GREEN family that reads as "money saved / capacity * gained" — kept distinct from the amber/magenta "energy" brand * gradient so a skimmer instantly separates the two ideas: * green = what you SAVE or GAIN (.nllm-save / .nllm-gain) * amber = product power/energy (.nllm-emph--bolt) * Built on the same #22c55e flowing-green as the healthy-session * status so the "good outcome" hue is consistent site-wide. */ --pc-save-strong: #22c55e; /* primary savings green (= flowing) */ --pc-save-text: #86efac; /* light green text on dark surfaces */ --pc-save-bg: #052e16; /* deep-green pill fill */ --pc-save-border: #16a34a; /* mid-green pill/ callout border */ --pc-gain-text: #5eead4; /* teal-green for "+capacity" chips */ --pc-loss-text: #fcd34d; /* amber — the worse alternative's cost */ /* ── Spacing scale (brand-namespaced) ── */ --nllm-space-xs: 0.25rem; --nllm-space-sm: 0.5rem; --nllm-space-md: 1rem; --nllm-space-lg: 1.5rem; --nllm-space-xl: 2rem; --nllm-space-2xl: 3rem; /* ── Radius ─────────────────────────────────────────────────── */ --nllm-radius-sm: 6px; --nllm-radius-md: 12px; --nllm-radius-lg: 20px; --nllm-radius-tile: 22px; /* Marketplace icon tile rounding */ --nllm-radius-full: 9999px; /* ── Typography ─────────────────────────────────────────────── */ /* 'Inter Fallback' is the metric-matched fallback declared in * brand/fonts/inter.css — Arial rendered with ascent/descent/ * size-adjust overrides so it occupies exactly Inter's pixel * footprint. When Inter doesn't load (font-display: optional * timeout), the browser swaps to this and the layout stays * byte-stable. The remaining entries are conservative system * fallbacks for environments where Arial isn't available. */ --nllm-font-sans: 'Inter', 'Inter Fallback', 'Helvetica Neue', 'Segoe UI', system-ui, -apple-system, sans-serif; --nllm-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace; /* Font weights (brand-level typographic scale). The semibold/bold/ * extrabold steps are the only non-`normal` weights the brand uses; * tokenizing them keeps emphasis consistent across surfaces. */ --nllm-font-weight-semibold: 600; --nllm-font-weight-bold: 700; --nllm-font-weight-extrabold: 800; /* Display sizes for marketing surfaces */ --nllm-text-display: 72px; --nllm-text-h1: 48px; --nllm-text-h2: 36px; --nllm-text-h3: 24px; --nllm-text-body: 16px; --nllm-text-sm: 14px; /* ── Shadows (for layering on dark surface) ─────────────────── */ --nllm-shadow-sm: 0 2px 8px rgba(124, 58, 237, 0.15); --nllm-shadow-md: 0 6px 20px rgba(124, 58, 237, 0.2); --nllm-shadow-lg: 0 12px 40px rgba(124, 58, 237, 0.3); --nllm-shadow-glow: 0 0 32px rgba(34, 211, 238, 0.45); /* ── Transitions ────────────────────────────────────────────── */ --nllm-transition-fast: 120ms ease-out; --nllm-transition-base: 220ms ease-out; --nllm-transition-slow: 360ms ease-out; } /* Light-mode override (for the marketing site's whitepapers / docs). */ @media (prefers-color-scheme: light) { :root.nllm-light-surface { --nllm-surface-deep: #ffffff; --nllm-surface: #f8fafc; --nllm-surface-soft: #e2e8f0; --nllm-text: #1e293b; --nllm-text-muted: #475569; --nllm-text-subtle: #64748b; } } /* [claude:opus-4.7-1m][hurc:v0.7.0] mod_hurc_account brand bridge — violet theme. * ---------------------------------------------------------------------------- * The account-menu module (hurc-lib package `hurc/mod-hurc-account`) reads * ONLY from the `--hurc-account-*` custom-property contract. It ships * brand-agnostic defaults (a light surface + Amazon-yellow CTA) in its own * media/css/tokens.css. This block is the CONSUMING-SITE half of that * contract: it maps Neural-LLM's `--nllm-*` brand tokens onto the contract so * the dropdown adopts the dark violet theme instead of the package defaults. * * Scoped to .hurc-account-menu (not :root) on purpose: a block-level selector * is more specific than the package's :root defaults, so these win regardless * of WAM stylesheet load order (the module's tokens.css and this file have no * declared dependency relationship). * * Only the colour tokens are overridden — the package's defaults for * typography / spacing / shape / motion are already sensible on any palette. * * Token contract reference: * hurc-lib .../mod_hurc_account/media/css/tokens.css */ .hurc-account-menu { /* surface */ --hurc-account-bg: var(--nllm-surface); --hurc-account-fg: var(--nllm-text); --hurc-account-muted: var(--nllm-text-muted); --hurc-account-border: rgba(255, 255, 255, 0.10); --hurc-account-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); /* trigger — transparent on the dark header bar */ --hurc-account-trigger-bg: transparent; --hurc-account-trigger-fg: var(--nllm-text); --hurc-account-trigger-border: transparent; --hurc-account-trigger-hover-bg: rgba(255, 255, 255, 0.08); /* panel */ --hurc-account-panel-bg: var(--nllm-surface); --hurc-account-panel-fg: var(--nllm-text); --hurc-account-panel-border: rgba(255, 255, 255, 0.10); /* links inside the panel */ --hurc-account-link-fg: var(--nllm-text); --hurc-account-link-hover-bg: rgba(124, 58, 237, 0.18); /* violet wash */ --hurc-account-link-hover-fg: var(--nllm-text); /* primary CTA — brand violet replaces the Amazon-yellow default */ --hurc-account-cta-bg: var(--nllm-violet); --hurc-account-cta-fg: #ffffff; --hurc-account-cta-border: var(--nllm-violet-deep); --hurc-account-cta-hover-bg: var(--nllm-violet-deep); /* avatar disc */ --hurc-account-avatar-bg: var(--nllm-violet); --hurc-account-avatar-fg: #ffffff; --hurc-account-avatar-border: transparent; /* section headings inside the panel */ --hurc-account-heading-fg: var(--nllm-text-subtle); }