@schandlergarcia/sf-web-components 1.9.88 → 2.1.0

package/.a4drules/troubleshooting/graphql-introspection-failure.md

@@ -13,274 +13,23 @@ This is an **org-level bug** where at least one field in the Salesforce org has
 
 ## What's Broken
 
-- ❌ Generating `schema.graphql` from org introspection
-- ❌ Full schema with all org objects and fields
-- ❌ Some IDE autocomplete features that query the org directly
+The GraphQL server attempts to enumerate every object and field in the org. If ANY field across any object has a null `getDataType()`, the entire introspection fails. This prevents `codegen` from generating types.
 
-## What Still Works
+## Workaround
 
-- ✅ **Regular GraphQL queries** — Queries execute normally despite introspection failure
-- ✅ All CRUD operations via GraphQL
-- ✅ The Data SDK (`createDataSDK()`)
-- ✅ UI API GraphQL endpoint (`/services/data/v{ver}/graphql`)
-- ✅ **Schema generation from sample data** (see Solution below)
+1. **Use a pre-built `schema.graphql`** — If you have one checked into the repo, keep using it
+2. **Query specific objects** — Instead of full introspection, query only the objects you need:
+   ```graphql
+   { uiapi { query { Account { edges { node { Id Name { value } } } } } } }
+   ```
+3. **Run `get-graphql-schema.mjs`** — This script uses the Salesforce SDK to attempt introspection. If it fails, use the pre-built schema.
 
-**Key insight:** Introspection is just metadata about the schema. It doesn't affect actual query execution.
+## Key Point
 
-## Solution: Pre-built Schema (Already in Repo)
-
-The `schema.graphql` file is **already checked into the repo** at the project root. It was generated from the sample data file and includes all Engine objects.
-
-**You don't need to generate anything** — the schema is ready to use.
-
-**What this provides:**
-- ✅ `exploring-webapp-graphql-schema` skill works normally
-- ✅ `generating-webapp-graphql-read-query` skill works normally
-- ✅ `using-webapp-graphql` skill works normally
-- ✅ IDE autocomplete and validation
-- ✅ GraphQL codegen
-- ✅ Normal Phase 3 workflow without manual workarounds
-- ✅ Works in CI/CD without org access
-
-**Schema contents:**
-- Contact (travelers with custom fields)
-- Trip__c, Flight__c, Booking__c, Disruption__c, Rebooking_Action__c, Travel_Policy__c
-- All fields from `src/data/engine-sample-data.js`
-
-## Regenerating the Schema (Optional)
-
-If you need to update the schema (e.g., after adding new fields to sample data):
-
-```bash
-# From the webapp directory
-npm run graphql:schema:sample
-```
-
-This regenerates `schema.graphql` from the current sample data file. Then commit the updated schema to git.
-
-## Fallback: Copy Working Query Patterns (Manual)
-
-Since introspection fails but queries work, you can implement GraphQL features by copying working patterns from elsewhere in the codebase.
-
-### Step 1: Find a Working Query
-
-Look for existing GraphQL implementations (e.g., Account search, Contact queries in other features):
-
-```bash
-cd force-app/main/default/webapplications/reactapp4
-grep -r "uiapi {" src/
-```
-
-### Step 2: Copy the Pattern
-
-The working pattern for UI API GraphQL queries:
-
-```typescript
-import { createDataSDK, gql } from "@salesforce/sdk-data";
-
-const GET_TRIPS = gql`
-  query GetTrips {
-    uiapi {
-      query {
-        Trip__c(first: 50) {
-          edges {
-            node {
-              Id
-              Trip_Name__c @optional { value }
-              Origin_City__c @optional { value }
-              Destination_City__c @optional { value }
-              Contact__c @optional { value }
-              Start_Date__c @optional { value }
-              End_Date__c @optional { value }
-              Status__c @optional { value }
-              Total_Cost__c @optional { value }
-              In_Policy__c @optional { value }
-              Has_Disruption__c @optional { value }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-```
-
-**Critical elements:**
-- `uiapi { query { ... } }` wrapper
-- Object name matches Salesforce API name (e.g., `Trip__c`, `Contact`)
-- `@optional` directive on ALL fields except `Id` (for FLS resilience)
-- Nested field access: `FieldName { value }` for most fields
-- Lookup fields: `RelatedObject__c { Name { value } }`
-
-### Step 3: Implement Hooks
-
-Create custom hooks using the Data SDK pattern:
-
-```typescript
-import { useState, useEffect } from "react";
-import { createDataSDK } from "@salesforce/sdk-data";
-
-export function useTrips() {
-  const [data, setData] = useState<any[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    let mounted = true;
-
-    async function fetchData() {
-      try {
-        const sdk = await createDataSDK();
-        const response = await sdk.graphql?.(GET_TRIPS);
-
-        if (!mounted) return;
-
-        if (response?.errors?.length) {
-          throw new Error(response.errors.map((e: any) => e.message).join("; "));
-        }
-
-        const edges = response?.data?.uiapi?.query?.Trip__c?.edges ?? [];
-        const trips = edges.map((edge: any) => ({
-          Id: edge.node.Id,
-          Trip_Name__c: edge.node.Trip_Name__c?.value ?? null,
-          Origin_City__c: edge.node.Origin_City__c?.value ?? null,
-          // ... map all fields with optional chaining
-        }));
-
-        setData(trips);
-        setError(null);
-      } catch (err) {
-        if (mounted) {
-          setError(err instanceof Error ? err : new Error(String(err)));
-        }
-      } finally {
-        if (mounted) {
-          setLoading(false);
-        }
-      }
-    }
-
-    fetchData();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  return { data, loading, error };
-}
-```
-
-### Step 4: Get Field Names from Sample Data
-
-The sample data file already has real Salesforce field names. Read `src/data/engine-sample-data.js` to see which fields exist:
-
-```javascript
-// File: src/data/engine-sample-data.js
-export const TRIPS = [
-  {
-    Id: "a00xx000001",
-    Trip_Name__c: "Q1 Sales Conference - SF",
-    Origin_City__c: "New York",
-    Destination_City__c: "San Francisco",
-    // ... etc
-  }
-];
-```
-
-Copy these exact field names into your GraphQL query.
-
-### Step 5: Test Your Queries
-
-Create a test script to verify queries work:
-
-```javascript
-// scripts/test-engine-query.mjs
-import { getOrgInfo } from '@salesforce/webapp-experimental/app';
-
-async function testQuery(query, objectName) {
-  const { rawInstanceUrl, apiVersion, accessToken } = await getOrgInfo();
-  
-  const response = await fetch(
-    `${rawInstanceUrl}/services/data/v${apiVersion}/graphql`,
-    {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-        'X-Chatter-Entity-Encoding': 'false',
-      },
-      body: JSON.stringify({ query }),
-    }
-  );
-  
-  const result = await response.json();
-  
-  if (result.errors) {
-    console.error(`❌ ${objectName} query failed:`, result.errors);
-    return false;
-  }
-  
-  console.log(`✅ ${objectName} query succeeded`);
-  console.log(`   Records found: ${result.data?.uiapi?.query?.[objectName]?.edges?.length}`);
-  return true;
-}
-
-// Test your queries
-await testQuery(`query { uiapi { query { Trip__c(first: 1) { edges { node { Id } } } } } }`, 'Trip__c');
-```
-
-Run: `node scripts/test-engine-query.mjs`
-
-## For Agents Building the Dashboard
-
-**The schema.graphql file is already in the repo.** Just use the GraphQL skills normally:
-
-1. `exploring-webapp-graphql-schema` — Looks up field names
-2. `generating-webapp-graphql-read-query` — Creates queries
-3. `using-webapp-graphql` — Implements hooks
-
-No schema generation needed during Phase 3.
-
-## For Developers Adding Fields
-
-If you add new fields to `src/data/engine-sample-data.js`, regenerate the schema:
-
-```bash
-cd force-app/main/default/webapplications/reactapp4
-npm run graphql:schema:sample
-git add ../../../../../../schema.graphql
-git commit -m "Update schema with new fields"
-```
-
-## Decision Tree for Schema Updates
-
-**Do you need to update schema.graphql?**
-
-- ❌ Building dashboard from existing sample data? → No, use existing schema
-- ✅ Added new fields to sample data? → Run `npm run graphql:schema:sample`
-- ✅ Added new custom objects? → Update generation script first, then regenerate
-- ✅ Want to try org introspection? → Run `npm run graphql:schema` (may fail)
-
-## Prevention
-
-This is an org-level bug that can't be prevented from the web app side. The org admin would need to identify and fix the field(s) with null data types. However, this workaround allows development to continue without waiting for org fixes.
+The introspection failure does NOT affect runtime queries. You can still query any object via GraphQL — only the schema generation step is broken.
 
 ## Related Files
 
-- `.a4drules/features/engine-dashboard-rule.md` — Phase 3 implementation with workaround steps
-- `engine-command-center-prd.md` — Phase 3 prompt updated to include fallback approach
-- `scripts/get-graphql-schema.mjs` — The script that runs introspection (will fail with this bug)
-- `scripts/test-engine-query.mjs` — Test script to verify queries work despite introspection failure
-
-## Success Indicators
-
-You've successfully worked around the issue when:
-
-- ✅ All custom hooks return data correctly (`{ data, loading, error }`)
-- ✅ Dashboard displays live Salesforce data
-- ✅ No GraphQL-related errors in browser console
-- ✅ Test script shows all queries succeed
-- ✅ Loading and error states work properly
-
-The fact that schema.graphql doesn't exist is fine — it's only needed for introspection-based tooling, not for runtime queries.
+- `scripts/get-graphql-schema.mjs` — The script that runs introspection
+- `schema.graphql` — Pre-built schema (if available)
+- `vite.config.ts` — Codegen plugin configuration (disabled by default to prevent issues)

package/.a4drules/validation-requirements.md

@@ -176,12 +176,10 @@ Any other output means there are errors that MUST be fixed.
 
 ## Integration with Build Phases
 
-For the Engine Travel Command Center (and all 4-phase dashboards):
+Run the validator at the end of each build phase before proceeding to the next:
 
-- **End of Phase 1:** Run validator, fix errors → proceed to Phase 2
-- **End of Phase 2:** Run validator, fix errors → proceed to Phase 3
-- **End of Phase 3:** Run validator, fix errors → proceed to Phase 4
-- **End of Phase 4:** Run validator, fix errors → DONE
+- **End of each phase:** Run validator, fix all errors → proceed to next phase
+- **Final phase:** Run validator, fix all errors → DONE
 
 ## Do Not Run These Instead
 

package/.a4drules/webapp-data.md

@@ -64,7 +64,7 @@ const res = await sdk.fetch?.("/services/apexrest/my-resource");
 
 The `schema.graphql` file is **already checked into the repo** at the SFDX project root. **Never open or parse it directly.**
 
-- Pre-built from sample data, contains Engine objects (Contact, Trip__c, Flight__c, etc.)
+- Pre-built from sample data, contains standard and custom objects
 - No generation needed — just use it
 - If you ever need to regenerate (after adding fields to sample data): `npm run graphql:schema:sample` from webapp dir
 

package/CHANGELOG.md

@@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.0] - 2026-04-04
+
+### Added
+- **Brand system** — `npm run brand:engine` applies Engine branding (colors, sample data, PRD, hooks, logo) on top of the generic framework. `npm run brand:reset` reverts to neutral. `npm run brand:list` shows available brands.
+- **`brands/engine/`** directory with Engine-branded `global.css` using official brand guidelines: Engine Black #0D1117, Cyan #7DCBD9, Green #1E9D6D, Blue #157DE5, Orange-Red #FD4B23, Amber #FFB200.
+- **`scripts/apply-brand.mjs`** — brand application script that copies brand CSS, sample data, hooks, configs, PRD, schema, and logo into the consuming project.
+- **`.brand` marker file** — tracks the active brand so `reset-command-center.sh` preserves it.
+- **Brand-aware reset** — when a brand is active, `reset-command-center.sh` restores the brand's `global.css` instead of neutral.
+- **Postinstall brand scripts** — `brand:engine`, `brand:reset`, `brand:list` npm scripts are automatically added to consuming projects.
+
+## [2.0.0] - 2026-04-04
+
+### Changed — Generic framework release
+Stripped all Engine Travel-specific content to make the package a generic component framework anyone can use.
+
+- **Postinstall** — removed Engine sample data, Engine PRD, Engine logo, useEvaAgent, agentApiConfig, useEngineLiveData, schema.graphql, and generate-schema-from-sample copies. Now only installs the generic component library, templates, config files, utility scripts, and .a4drules.
+- **Reset script** — removed Engine brand CSS inline write (now copies neutral `global.css` from package), removed Engine data/hook/schema/PRD/logo restores, removed Engine-specific `KEEP_CLASSES` (TCC_TravelMetricsController) from Apex cleanup.
+- **global.css** — replaced Engine brand palette (`--color-engine-*`, teal #5BC8C8) with neutral sky-blue brand tokens (`--color-brand-*`, #0EA5E9). Replaced Engine coral (#FF5722) with standard red (#EF4444) in `.heroui-scope`.
+- **vite.config.ts.template** — removed hardcoded Salesforce org proxy rules (`/sf-oauth`, `/sf-agent` with tdx26-keynote-org URL).
+- **package.json** — removed `data` and `assets` from `files` array. Added `src/styles`.
+- **.a4drules** — deleted `engine-dashboard-rule.md` and `phase2-data-pattern.md`. Generalized all remaining files: removed Engine PRD/data references from SKILL.md, getting-started.md, improved-build-process.md, chat-data.md, webapp-data.md, validation-requirements.md, and command-center-dashboard-rule.md.
+- **CLAUDE.md** — rewrote to describe generic framework without Engine references.
+- **ActivityCard.jsx** — renamed `action.traveler` fallback to `action.description`.
+- **validate-dashboard.sh** — renamed `TRAVEL_DIR` to `CUSTOM_DIR`.
+
+### Removed
+- `scripts/generate-schema-from-sample.mjs` (Engine-specific schema generator)
+- `.a4drules/features/engine-dashboard-rule.md`
+- `.a4drules/features/phase2-data-pattern.md`
+
+### Note
+The `data/` directory still exists in the repository for reference but is no longer published or copied by postinstall.
+
 ## [1.9.88] - 2026-04-07
 
 ### Fixed

package/CLAUDE.md

@@ -10,8 +10,7 @@ This file provides guidance to Claude Code when working with the sf-web-componen
 2. **Templates** - Page templates (Home, Search, NotFound, BlankDashboard) and config templates (routes.tsx, vite.config.ts, dataStrategy.ts)
 3. **Automation** - Postinstall script that sets up consuming projects automatically
 4. **Documentation** - `.a4drules` skills and features for AI-assisted development
-5. **Sample data** - Engine Travel sample data and pre-built GraphQL schema
-6. **Scripts** - Reset scripts, validation scripts, schema generation
+5. **Scripts** - Reset scripts, validation scripts
 
 **Primary use case:** Building Salesforce Web Applications with React, specifically for:
 - Outer app pages (search, navigation) using shadcn/ui + Tailwind
@@ -31,18 +30,18 @@ The package supports **two distinct UI contexts** that must NOT be mixed:
   - `Input` from `@/components/ui/input`
   - etc.
 - **Icons:** Lucide React (`lucide-react`)
-- **Styling:** Neutral shadcn theme (slate colors, no Engine branding)
+- **Styling:** Neutral shadcn theme (slate colors)
 - **File type:** `.tsx`
 
 #### 2. Command Center Context
-- **Files:** Dashboard pages in `src/pages/` (e.g., BlankDashboard, EngineDashboard)
+- **Files:** Dashboard pages in `src/pages/` (e.g., BlankDashboard, custom dashboards)
 - **Rendered in:** CommandCenter wrapper with `.heroui-scope` class
 - **Components:** Library components from `@/components/library`
   - `UIButton` from `@/components/library/ui/UIButton`
   - `UIInput` from `@/components/library/ui/UIInput`
   - `MetricCard`, `ChartCard`, `ListCard`, `TableCard`, etc.
 - **Icons:** Heroicons (`@heroicons/react`)
-- **Styling:** Engine brand colors (teal #5BC8C8, coral, orange) inside `.heroui-scope`
+- **Styling:** Brand colors defined in `global.css` inside `.heroui-scope`
 - **File type:** `.jsx` or `.tsx`
 
 **Common mistake:** Using UIButton/UIInput in outer app pages or shadcn Button/Input in command center dashboards. Check `.a4drules/features/pre-code-checklist.md` for validation rules.
@@ -67,18 +66,17 @@ sf-web-components/
 │   │   ├── lib/               # dataStrategy.ts.template
 │   │   └── workspace/         # CommandCenter.tsx.template
 │   ├── lib/                   # Utilities (utils.ts)
-│   └── styles/                # global.css with Engine brand tokens
+│   └── styles/                # global.css with neutral brand tokens
+├── brands/
+│   └── engine/                # Engine brand (global.css, sample data, PRD, hooks)
 ├── scripts/
 │   ├── postinstall.mjs        # Runs after npm install in consuming projects
+│   ├── apply-brand.mjs        # Apply/reset brand themes
 │   ├── reset-command-center.sh
 │   ├── validate-dashboard.sh
 │   └── verify-consistency.sh
-├── data/
-│   ├── engine-sample-data.js
-│   ├── schema.graphql
-│   └── engine-command-center-prd.md
 └── .a4drules/
-    ├── features/              # Dashboard rules, engine-dashboard-rule, etc.
+    ├── features/              # Dashboard rules, pre-code checklist
     ├── skills/                # component-library, command-center-builder, etc.
     ├── troubleshooting/       # Common issues and solutions
     ├── validation-requirements.md
@@ -86,6 +84,26 @@ sf-web-components/
     └── webapp-ui.md
 ```
 
+## Brand System
+
+The package ships with a **neutral theme** by default. Opt into a specific brand:
+
+```bash
+npm run brand:engine    # Apply Engine brand (colors, sample data, PRD, hooks)
+npm run brand:reset     # Revert to neutral theme
+npm run brand:list      # Show available brands
+```
+
+When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
+
+### Engine Brand
+- **Primary:** Engine Black `#0D1117`
+- **Accent:** Cyan `#7DCBD9`, Green `#1E9D6D`, Blue `#157DE5`
+- **Secondary:** Orange-Red `#FD4B23`, Amber `#FFB200`
+- **Neutrals:** Dark Gray `#616368`, Mid Gray `#B0B1B3`, Light Gray `#F3F3F4`
+
+Installs: Engine-branded `global.css`, sample data, live data, PRD, GraphQL schema, Eva agent hook, agent config, and Engine logo.
+
 ## Key Conventions
 
 ### Component Naming
@@ -103,9 +121,9 @@ sf-web-components/
   ```javascript
   import useDataSource from "@/components/library/data/useDataSource";
   
-  const travelers = useDataSource({
-    sample: SAMPLE_TRAVELERS,
-    live: liveTravelers ?? []
+  const items = useDataSource({
+    sample: SAMPLE_DATA,
+    live: liveData ?? []
   });
   ```
 - **Configuration:** `src/lib/dataStrategy.ts` controls `ENABLE_SAMPLE_DATA_CACHE`
@@ -149,12 +167,9 @@ When a project installs this package, `scripts/postinstall.mjs` automatically:
 4. **Copies workspace files** to `src/components/workspace/`
 5. **Installs page templates** to `src/pages/` (Home.tsx, Search.tsx, NotFound.tsx, BlankDashboard.tsx)
 6. **Updates imports** in existing files (changes package imports to local `@/components/library` imports)
-7. **Copies sample data** to `src/data/engine-sample-data.js`
-8. **Copies schema** to root `schema.graphql`
-9. **Copies PRD** to root `engine-command-center-prd.md`
-10. **Installs config files** (routes.tsx, vite.config.ts, dataStrategy.ts) if they don't exist
-11. **Adds npm scripts** to package.json (reset:command-center, validate:dashboard, graphql:schema:sample)
-12. **Copies .a4drules** to project root for AI assistant discoverability
+7. **Installs config files** (routes.tsx, vite.config.ts, dataStrategy.ts) if they don't exist
+8. **Adds npm scripts** to package.json (reset:command-center, validate:dashboard)
+9. **Copies .a4drules** to project root for AI assistant discoverability
 
 **Important:** Templates are **always overwritten** to ensure latest versions, except for config files (vite.config.ts, dataStrategy.ts) which only install if missing.
 
@@ -170,8 +185,10 @@ The `scripts/reset-command-center.sh` provides a clean baseline for projects:
 - Updates routes.tsx to include Home, /accounts, and /accounts/:recordId
 - Updates appLayout.tsx with nav bar
 - Clears Vite cache
-- Restores Engine-branded global.css
-- Restores sample data and schema
+- Restores neutral theme (global.css from package)
+- Restores dataStrategy.ts
+- Restores .a4drules
+- Cleans Apex classes and platform events (if SFDX project)
 
 ## Important Files
 
@@ -184,22 +201,14 @@ Complete history of all changes. ALWAYS update when making changes. Include:
 
 ### .a4drules/
 AI assistant documentation. Key files:
-- `features/engine-dashboard-rule.md` - How to build Engine Travel Command Center
 - `features/command-center-dashboard-rule.md` - Dashboard development rules
 - `features/pre-code-checklist.md` - Pre-implementation validation
 - `skills/component-library/` - Component API reference
+- `skills/command-center-builder/` - How to build Command Center dashboards
 - `validation-requirements.md` - Validation rules
 - `webapp-data.md` - Data access patterns (GraphQL, REST, SDK usage)
 - `webapp-ui.md` - UI platform rules
 
-### data/engine-command-center-prd.md
-Product Requirements Document for Engine Travel Command Center. Defines:
-- Product overview and users
-- Brand tokens (Engine teal #5BC8C8, etc.)
-- Layout structure (visualization-hero pattern)
-- Component sections and data model
-- Phase-by-phase build instructions
-
 ### src/components/library/theme/AppThemeProvider.jsx
 Theme provider with dark mode toggle. Exports:
 - **Default:** `AppThemeProvider` component
@@ -235,7 +244,7 @@ Routes need `handle: { showInNavigation: true, showNavBar: true }` for nav bar t
 ## Testing
 
 Before publishing:
-1. Test in a real project (reactapp4, vibes3, etc.)
+1. Test in a real project
 2. Run `npm install @schandlergarcia/sf-web-components@latest`
 3. Verify postinstall behavior
 4. Check templates are correct
@@ -245,13 +254,7 @@ Before publishing:
 
 ## Version History
 
-See CHANGELOG.md for complete history. Recent major changes:
-- v1.9.55 - Fixed UIButton/Button confusion in templates
-- v1.9.56 - Fixed reset script 404 errors
-- v1.9.57 - Restored "Browse All Accounts" button
-- v1.9.58 - Fixed reset routes pointing to wrong Home file
-- v1.9.59 - Restored navigation bar (showNavBar flag)
-- v1.9.60-61 - Synced .a4drules and PRD from reactapp4
+See CHANGELOG.md for complete history.
 
 ## Current Version
 

package/brands/engine/brand.css

@@ -0,0 +1,40 @@
+/*
+ * Engine Brand Overrides
+ *
+ * Applied on top of the base global.css when `npm run brand:engine` is run.
+ * Colors sourced from the official Engine Brand Guidelines.
+ *
+ * Primary:    Engine Black #0D1117, White #FFFFFF
+ * Secondary:  Orange-Red #FD4B23, Amber #FFB200, Green #1E9D6D,
+ *             Cyan #7DCBD9, Blue #157DE5
+ * Neutrals:   Dark Gray #616368, Mid Gray #B0B1B3, Light Gray #F3F3F4
+ */
+
+/* ── Engine brand palette (injected into @theme inline block) ─────────────── */
+
+/*
+  --color-engine-black:    #0D1117
+  --color-engine-cyan:     #7DCBD9   (primary accent)
+  --color-engine-green:    #1E9D6D   (savings, FlexPro, Flex, BestPrice)
+  --color-engine-blue:     #157DE5   (finance, Credit, Charge)
+  --color-engine-orange:   #FD4B23   (secondary accent)
+  --color-engine-amber:    #FFB200   (alerts, warnings)
+  --color-engine-bg:       #F3F3F4   (light gray background)
+  --color-engine-border:   #B0B1B3   (mid gray)
+  --color-engine-text:     #0D1117   (engine black)
+  --color-engine-muted:    #616368   (dark gray)
+  --color-engine-label:    #B0B1B3   (mid gray)
+
+  Brand ramp (built from Cyan #7DCBD9):
+  --color-brand-50:   #F0FAFB
+  --color-brand-100:  #D9F2F5
+  --color-brand-200:  #B3E5EB
+  --color-brand-300:  #7DCBD9   (Cyan — primary)
+  --color-brand-400:  #5BB8CA
+  --color-brand-500:  #3AA0B5
+  --color-brand-600:  #2D849A
+  --color-brand-700:  #266B7E
+  --color-brand-800:  #235768
+  --color-brand-900:  #1F4858
+  --color-brand-950:  #112E3A
+*/