pi-kiosk-shared 2.2.32 → 2.2.35

package/scripts/applyMonorepoPatches.mjs

@@ -1,24 +1,24 @@
-import { existsSync } from 'node:fs';
-import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { spawnSync } from 'node:child_process';
-
-const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const patchDir = resolve(packageRoot, 'patches');
-
-if (!existsSync(patchDir)) {
-  process.exit(0);
-}
-
-const patchPackageEntry = join(packageRoot, 'node_modules', 'patch-package', 'index.js');
-if (!existsSync(patchPackageEntry)) {
-  process.exit(0);
-}
-
-const result = spawnSync(
-  process.execPath,
-  [patchPackageEntry, '--patch-dir', 'patches'],
-  { cwd: packageRoot, stdio: 'inherit' },
-);
-
-process.exit(result.status ?? 1);
+import { existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const patchDir = resolve(packageRoot, 'patches');
+
+if (!existsSync(patchDir)) {
+  process.exit(0);
+}
+
+const patchPackageEntry = join(packageRoot, 'node_modules', 'patch-package', 'index.js');
+if (!existsSync(patchPackageEntry)) {
+  process.exit(0);
+}
+
+const result = spawnSync(
+  process.execPath,
+  [patchPackageEntry, '--patch-dir', 'patches'],
+  { cwd: packageRoot, stdio: 'inherit' },
+);
+
+process.exit(result.status ?? 1);

package/src/tokens/__tests__/theme-exports.test.mjs

@@ -1,27 +1,27 @@
-import { readFileSync, existsSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-
-const tokensDir = join(dirname(fileURLToPath(import.meta.url)), '..');
-
-test('theme.css and admin-theme.css exist and export @theme tokens', () => {
-  const theme = readFileSync(join(tokensDir, 'theme.css'), 'utf8');
-  const admin = readFileSync(join(tokensDir, 'admin-theme.css'), 'utf8');
-  assert.match(theme, /@theme/);
-  assert.match(theme, /--color-surface/);
-  assert.match(theme, /\.light/);
-  assert.match(admin, /--color-an-bg/);
-  assert.match(admin, /--color-rail-sidebar-bg/);
-  assert.match(admin, /\.light/);
-  assert.match(admin, /\.dark/);
-});
-
-test('package.json exports token CSS paths', () => {
-  const pkgPath = join(tokensDir, '..', '..', 'package.json');
-  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
-  assert.ok(pkg.exports['./theme.css']);
-  assert.ok(pkg.exports['./admin-theme.css']);
-  assert.ok(existsSync(join(tokensDir, 'theme.css')));
-});
+import { readFileSync, existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+const tokensDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+test('theme.css and admin-theme.css exist and export @theme tokens', () => {
+  const theme = readFileSync(join(tokensDir, 'theme.css'), 'utf8');
+  const admin = readFileSync(join(tokensDir, 'admin-theme.css'), 'utf8');
+  assert.match(theme, /@theme/);
+  assert.match(theme, /--color-surface/);
+  assert.match(theme, /\.light/);
+  assert.match(admin, /--color-an-bg/);
+  assert.match(admin, /--color-rail-sidebar-bg/);
+  assert.match(admin, /\.light/);
+  assert.match(admin, /\.dark/);
+});
+
+test('package.json exports token CSS paths', () => {
+  const pkgPath = join(tokensDir, '..', '..', 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+  assert.ok(pkg.exports['./theme.css']);
+  assert.ok(pkg.exports['./admin-theme.css']);
+  assert.ok(existsSync(join(tokensDir, 'theme.css')));
+});

package/src/tokens/__tests__/theme-light-override.test.mjs

@@ -1,21 +1,21 @@
-import { readFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-
-const tokensDir = join(dirname(fileURLToPath(import.meta.url)), '..');
-
-test('theme.css defines explicit .light override block', () => {
-  const theme = readFileSync(join(tokensDir, 'theme.css'), 'utf8');
-  assert.match(theme, /\.light\s*\{/);
-  assert.match(theme, /\.light[\s\S]*--color-surface:\s*#ffffff/);
-});
-
-test('admin-theme.css defines explicit .light override with rail-violet dark neutrals', () => {
-  const admin = readFileSync(join(tokensDir, 'admin-theme.css'), 'utf8');
-  assert.match(admin, /\.light\s*\{/);
-  assert.match(admin, /\.light[\s\S]*--color-an-surface:\s*#ffffff/);
-  assert.match(admin, /\.dark[\s\S]*--color-an-bg:\s*#12102a/);
-  assert.match(admin, /\.dark[\s\S]*--color-an-surface:\s*#1e1b4b/);
-});
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+const tokensDir = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+test('theme.css defines explicit .light override block', () => {
+  const theme = readFileSync(join(tokensDir, 'theme.css'), 'utf8');
+  assert.match(theme, /\.light\s*\{/);
+  assert.match(theme, /\.light[\s\S]*--color-surface:\s*#ffffff/);
+});
+
+test('admin-theme.css defines explicit .light override with rail-violet dark neutrals', () => {
+  const admin = readFileSync(join(tokensDir, 'admin-theme.css'), 'utf8');
+  assert.match(admin, /\.light\s*\{/);
+  assert.match(admin, /\.light[\s\S]*--color-an-surface:\s*#ffffff/);
+  assert.match(admin, /\.dark[\s\S]*--color-an-bg:\s*#12102a/);
+  assert.match(admin, /\.dark[\s\S]*--color-an-surface:\s*#1e1b4b/);
+});

package/src/tokens/admin-theme.css

@@ -1,158 +1,158 @@
-/**
- * Admin analytics / shell design tokens — import from pi-kiosk-shared/admin-theme.css
- * Apps: @import "pi-kiosk-shared/admin-theme.css" in admin tailwind entry.
- *
- * MFE-v3-S-01: brand-bridge.css + design-tokens.css supply legacy/admin semantics.
- * MFE-v3-S-2: DECISION-2 C-Hybrid — focus/hover/disabled/elevated + dark via media + `.dark`.
- * Light/dark neutrals: admin dark is violet/indigo kin to the rail sidebar
- * (`#1e1b4b`); light stays slate neutrals. Primary / rail accents stay brand-scoped.
- */
-@import './brand-bridge.css';
-
-@theme {
-  --color-an-bg: #f8fafc;
-  --color-an-bg-elevated: #ffffff;
-  --color-an-surface: #ffffff;
-  --color-an-surface-muted: #f8fafc;
-  --color-an-surface-hover: #f1f5f9;
-  --color-an-surface-disabled: #f1f5f9;
-  --color-an-text: #0f172a;
-  --color-an-text-muted: #475569;
-  --color-an-text-disabled: #94a3b8;
-  --color-an-border: #e2e8f0;
-  --color-an-border-hover: #cbd5e1;
-  --color-an-primary: var(--color-primary);
-  --color-an-primary-hover: #4f46e5;
-  --color-an-primary-soft: var(--color-primary-light);
-  --color-an-focus-ring: var(--brand-admin-primary);
-  --color-an-danger: var(--color-error);
-  --color-an-success: var(--color-success);
-  --color-an-warn: var(--color-warning);
-  --color-an-info: var(--color-info);
-  --color-an-disabled-opacity: 0.55;
-  --color-an-chart-1: var(--brand-admin-primary);
-  --color-an-chart-2: #14b8a6;
-  --color-an-chart-3: #f59e0b;
-  --color-an-chart-4: #ef4444;
-  --color-an-chart-5: #8b5cf6;
-  --color-an-chart-6: #06b6d4;
-  --color-shell-bg: var(--color-an-bg);
-  --color-shell-surface: var(--color-an-surface);
-  --color-shell-border: var(--color-an-border);
-  --color-shell-text: var(--color-an-text);
-  --color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
-  --color-rail-sidebar-text: var(--brand-rail-sidebar-text);
-  --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
-  --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
-  --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
-  --color-rail-page-bg: #f1f5f9;
-  --color-rail-card-border: #e2e8f0;
-  --color-rail-kpi-up: var(--brand-rail-kpi-up);
-  --color-rail-kpi-down: var(--brand-rail-kpi-down);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Violet dark — kin to rail sidebar #1e1b4b (not consumer sailor blue) */
-    --color-an-bg: #12102a;
-    --color-an-bg-elevated: #1e1b4b;
-    --color-an-surface: #1e1b4b;
-    --color-an-surface-muted: #17153a;
-    --color-an-surface-hover: #2a2660;
-    --color-an-surface-disabled: #2a2660;
-    --color-an-text: #e0e7ff;
-    --color-an-text-muted: #a5b4fc;
-    --color-an-text-disabled: #818cf8;
-    --color-an-border: #2f2b55;
-    --color-an-border-hover: #3d3870;
-    --color-an-primary: #a78bfa;
-    --color-an-primary-hover: #c4b5fd;
-    --color-an-primary-soft: rgba(124, 58, 237, 0.22);
-    --color-an-focus-ring: #a78bfa;
-    --color-an-disabled-opacity: 0.5;
-    --color-an-chart-1: #a78bfa;
-    --color-an-chart-2: #2dd4bf;
-    --color-an-chart-3: #fbbf24;
-    --color-an-chart-4: #f87171;
-    --color-an-chart-5: #c4b5fd;
-    --color-an-chart-6: #22d3ee;
-    --color-shell-bg: #12102a;
-    --color-shell-surface: #1e1b4b;
-    --color-shell-border: #2f2b55;
-    --color-shell-text: #e0e7ff;
-    --color-rail-page-bg: #12102a;
-    --color-rail-card-border: #2f2b55;
-  }
-}
-
-/**
- * C-Hybrid user override — violet dark kin to `--brand-rail-sidebar-bg` (#1e1b4b).
- * Admin `applyInitialTheme()` / ThemeProvider toggles `.dark` on documentElement.
- */
-.dark {
-  color-scheme: dark;
-  --color-an-bg: #12102a;
-  --color-an-bg-elevated: #1e1b4b;
-  --color-an-surface: #1e1b4b;
-  --color-an-surface-muted: #17153a;
-  --color-an-surface-hover: #2a2660;
-  --color-an-surface-disabled: #2a2660;
-  --color-an-text: #e0e7ff;
-  --color-an-text-muted: #a5b4fc;
-  --color-an-text-disabled: #818cf8;
-  --color-an-border: #2f2b55;
-  --color-an-border-hover: #3d3870;
-  --color-an-primary: #a78bfa;
-  --color-an-primary-hover: #c4b5fd;
-  --color-an-primary-soft: rgba(124, 58, 237, 0.22);
-  --color-an-focus-ring: #a78bfa;
-  --color-an-disabled-opacity: 0.5;
-  --color-an-chart-1: #a78bfa;
-  --color-an-chart-2: #2dd4bf;
-  --color-an-chart-3: #fbbf24;
-  --color-an-chart-4: #f87171;
-  --color-an-chart-5: #c4b5fd;
-  --color-an-chart-6: #22d3ee;
-  --color-shell-bg: #12102a;
-  --color-shell-surface: #1e1b4b;
-  --color-shell-border: #2f2b55;
-  --color-shell-text: #e0e7ff;
-  --color-rail-page-bg: #12102a;
-  --color-rail-card-border: #2f2b55;
-}
-
-/**
- * Explicit light override — wins over `@media (prefers-color-scheme: dark)` when
- * user selects Light while OS is dark (same contract as consumer `theme.css`).
- */
-.light {
-  color-scheme: light;
-  --color-an-bg: #f8fafc;
-  --color-an-bg-elevated: #ffffff;
-  --color-an-surface: #ffffff;
-  --color-an-surface-muted: #f8fafc;
-  --color-an-surface-hover: #f1f5f9;
-  --color-an-surface-disabled: #f1f5f9;
-  --color-an-text: #0f172a;
-  --color-an-text-muted: #475569;
-  --color-an-text-disabled: #94a3b8;
-  --color-an-border: #e2e8f0;
-  --color-an-border-hover: #cbd5e1;
-  --color-an-primary: var(--color-primary);
-  --color-an-primary-hover: #4f46e5;
-  --color-an-primary-soft: var(--color-primary-light);
-  --color-an-focus-ring: var(--brand-admin-primary);
-  --color-an-disabled-opacity: 0.55;
-  --color-an-chart-1: var(--brand-admin-primary);
-  --color-an-chart-2: #14b8a6;
-  --color-an-chart-3: #f59e0b;
-  --color-an-chart-4: #ef4444;
-  --color-an-chart-5: #8b5cf6;
-  --color-an-chart-6: #06b6d4;
-  --color-shell-bg: #f8fafc;
-  --color-shell-surface: #ffffff;
-  --color-shell-border: #e2e8f0;
-  --color-shell-text: #0f172a;
-  --color-rail-page-bg: #f1f5f9;
-  --color-rail-card-border: #e2e8f0;
-}
+/**
+ * Admin analytics / shell design tokens — import from pi-kiosk-shared/admin-theme.css
+ * Apps: @import "pi-kiosk-shared/admin-theme.css" in admin tailwind entry.
+ *
+ * MFE-v3-S-01: brand-bridge.css + design-tokens.css supply legacy/admin semantics.
+ * MFE-v3-S-2: DECISION-2 C-Hybrid — focus/hover/disabled/elevated + dark via media + `.dark`.
+ * Light/dark neutrals: admin dark is violet/indigo kin to the rail sidebar
+ * (`#1e1b4b`); light stays slate neutrals. Primary / rail accents stay brand-scoped.
+ */
+@import './brand-bridge.css';
+
+@theme {
+  --color-an-bg: #f8fafc;
+  --color-an-bg-elevated: #ffffff;
+  --color-an-surface: #ffffff;
+  --color-an-surface-muted: #f8fafc;
+  --color-an-surface-hover: #f1f5f9;
+  --color-an-surface-disabled: #f1f5f9;
+  --color-an-text: #0f172a;
+  --color-an-text-muted: #475569;
+  --color-an-text-disabled: #94a3b8;
+  --color-an-border: #e2e8f0;
+  --color-an-border-hover: #cbd5e1;
+  --color-an-primary: var(--color-primary);
+  --color-an-primary-hover: #4f46e5;
+  --color-an-primary-soft: var(--color-primary-light);
+  --color-an-focus-ring: var(--brand-admin-primary);
+  --color-an-danger: var(--color-error);
+  --color-an-success: var(--color-success);
+  --color-an-warn: var(--color-warning);
+  --color-an-info: var(--color-info);
+  --color-an-disabled-opacity: 0.55;
+  --color-an-chart-1: var(--brand-admin-primary);
+  --color-an-chart-2: #14b8a6;
+  --color-an-chart-3: #f59e0b;
+  --color-an-chart-4: #ef4444;
+  --color-an-chart-5: #8b5cf6;
+  --color-an-chart-6: #06b6d4;
+  --color-shell-bg: var(--color-an-bg);
+  --color-shell-surface: var(--color-an-surface);
+  --color-shell-border: var(--color-an-border);
+  --color-shell-text: var(--color-an-text);
+  --color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
+  --color-rail-sidebar-text: var(--brand-rail-sidebar-text);
+  --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
+  --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
+  --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
+  --color-rail-page-bg: #f1f5f9;
+  --color-rail-card-border: #e2e8f0;
+  --color-rail-kpi-up: var(--brand-rail-kpi-up);
+  --color-rail-kpi-down: var(--brand-rail-kpi-down);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Violet dark — kin to rail sidebar #1e1b4b (not consumer sailor blue) */
+    --color-an-bg: #12102a;
+    --color-an-bg-elevated: #1e1b4b;
+    --color-an-surface: #1e1b4b;
+    --color-an-surface-muted: #17153a;
+    --color-an-surface-hover: #2a2660;
+    --color-an-surface-disabled: #2a2660;
+    --color-an-text: #e0e7ff;
+    --color-an-text-muted: #a5b4fc;
+    --color-an-text-disabled: #818cf8;
+    --color-an-border: #2f2b55;
+    --color-an-border-hover: #3d3870;
+    --color-an-primary: #a78bfa;
+    --color-an-primary-hover: #c4b5fd;
+    --color-an-primary-soft: rgba(124, 58, 237, 0.22);
+    --color-an-focus-ring: #a78bfa;
+    --color-an-disabled-opacity: 0.5;
+    --color-an-chart-1: #a78bfa;
+    --color-an-chart-2: #2dd4bf;
+    --color-an-chart-3: #fbbf24;
+    --color-an-chart-4: #f87171;
+    --color-an-chart-5: #c4b5fd;
+    --color-an-chart-6: #22d3ee;
+    --color-shell-bg: #12102a;
+    --color-shell-surface: #1e1b4b;
+    --color-shell-border: #2f2b55;
+    --color-shell-text: #e0e7ff;
+    --color-rail-page-bg: #12102a;
+    --color-rail-card-border: #2f2b55;
+  }
+}
+
+/**
+ * C-Hybrid user override — violet dark kin to `--brand-rail-sidebar-bg` (#1e1b4b).
+ * Admin `applyInitialTheme()` / ThemeProvider toggles `.dark` on documentElement.
+ */
+.dark {
+  color-scheme: dark;
+  --color-an-bg: #12102a;
+  --color-an-bg-elevated: #1e1b4b;
+  --color-an-surface: #1e1b4b;
+  --color-an-surface-muted: #17153a;
+  --color-an-surface-hover: #2a2660;
+  --color-an-surface-disabled: #2a2660;
+  --color-an-text: #e0e7ff;
+  --color-an-text-muted: #a5b4fc;
+  --color-an-text-disabled: #818cf8;
+  --color-an-border: #2f2b55;
+  --color-an-border-hover: #3d3870;
+  --color-an-primary: #a78bfa;
+  --color-an-primary-hover: #c4b5fd;
+  --color-an-primary-soft: rgba(124, 58, 237, 0.22);
+  --color-an-focus-ring: #a78bfa;
+  --color-an-disabled-opacity: 0.5;
+  --color-an-chart-1: #a78bfa;
+  --color-an-chart-2: #2dd4bf;
+  --color-an-chart-3: #fbbf24;
+  --color-an-chart-4: #f87171;
+  --color-an-chart-5: #c4b5fd;
+  --color-an-chart-6: #22d3ee;
+  --color-shell-bg: #12102a;
+  --color-shell-surface: #1e1b4b;
+  --color-shell-border: #2f2b55;
+  --color-shell-text: #e0e7ff;
+  --color-rail-page-bg: #12102a;
+  --color-rail-card-border: #2f2b55;
+}
+
+/**
+ * Explicit light override — wins over `@media (prefers-color-scheme: dark)` when
+ * user selects Light while OS is dark (same contract as consumer `theme.css`).
+ */
+.light {
+  color-scheme: light;
+  --color-an-bg: #f8fafc;
+  --color-an-bg-elevated: #ffffff;
+  --color-an-surface: #ffffff;
+  --color-an-surface-muted: #f8fafc;
+  --color-an-surface-hover: #f1f5f9;
+  --color-an-surface-disabled: #f1f5f9;
+  --color-an-text: #0f172a;
+  --color-an-text-muted: #475569;
+  --color-an-text-disabled: #94a3b8;
+  --color-an-border: #e2e8f0;
+  --color-an-border-hover: #cbd5e1;
+  --color-an-primary: var(--color-primary);
+  --color-an-primary-hover: #4f46e5;
+  --color-an-primary-soft: var(--color-primary-light);
+  --color-an-focus-ring: var(--brand-admin-primary);
+  --color-an-disabled-opacity: 0.55;
+  --color-an-chart-1: var(--brand-admin-primary);
+  --color-an-chart-2: #14b8a6;
+  --color-an-chart-3: #f59e0b;
+  --color-an-chart-4: #ef4444;
+  --color-an-chart-5: #8b5cf6;
+  --color-an-chart-6: #06b6d4;
+  --color-shell-bg: #f8fafc;
+  --color-shell-surface: #ffffff;
+  --color-shell-border: #e2e8f0;
+  --color-shell-text: #0f172a;
+  --color-rail-page-bg: #f1f5f9;
+  --color-rail-card-border: #e2e8f0;
+}

package/src/tokens/brand-bridge.css

@@ -1,49 +1,49 @@
-/**
- * Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
- *
- * DECISION-1 Option C: --brand-consumer-accent (Canva) + --brand-admin-accent (PO mockups)
- * Import before theme.css or admin-theme.css once MFE-v3-S-01 wires consumers.
- *
- * @see rpappp/up-backend/docs/FRONTEND/brand-palette.md
- * @source https://www.canva.com/colors/color-palettes/up-above/
- */
-:root {
-  /* ── Canva Up Above (provisional — pending PO hex confirmation) ── */
-  --brand-canva-sailor-blue: #00203f;
-  --brand-canva-mint: #adefd1;
-
-  /* ── Semantic brand accents (DECISION-1 Option C) ── */
-  --brand-consumer-accent: var(--brand-canva-sailor-blue);
-  --brand-consumer-accent-soft: var(--brand-canva-mint);
-  --brand-consumer-accent-foreground: #ffffff;
-  --brand-admin-accent: #7c3aed;
-  --brand-admin-primary: #6365f0;
-
-  /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE harmonization) ── */
-  --brand-rail-sidebar-bg: #1e1b4b;
-  --brand-rail-sidebar-bg-deep: #0f172a;
-  --brand-rail-sidebar-text: #e0e7ff;
-  --brand-rail-sidebar-muted: #a5b4fc;
-  --brand-rail-sidebar-active: var(--brand-admin-accent);
-  --brand-rail-sidebar-hover: rgba(124, 58, 237, 0.2);
-  --brand-rail-page-bg: #f1f5f9;
-  --brand-rail-card-border: #e2e8f0;
-  --brand-rail-kpi-up: #05805a;
-  --brand-rail-kpi-down: #da2325;
-
-  /* ── Bridge → theme.css (consumer / kiosk / pickup) — wired in MFE-v3-S-01 ── */
-  --color-accent: var(--brand-consumer-accent);
-  --color-focus-ring: var(--brand-consumer-accent);
-
-  /* ── Bridge → admin-theme.css — wired in MFE-v3-S-01 ── */
-  --color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
-  --color-rail-sidebar-text: var(--brand-rail-sidebar-text);
-  --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
-  --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
-  --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
-  --color-rail-page-bg: var(--brand-rail-page-bg);
-  --color-rail-card-border: var(--brand-rail-card-border);
-  --color-rail-kpi-up: var(--brand-rail-kpi-up);
-  --color-rail-kpi-down: var(--brand-rail-kpi-down);
-  --color-an-chart-1: var(--brand-admin-primary);
-}
+/**
+ * Brand bridge — Canva Up Above SSOT → theme.css / admin-theme.css consumers
+ *
+ * DECISION-1 Option C: --brand-consumer-accent (Canva) + --brand-admin-accent (PO mockups)
+ * Import before theme.css or admin-theme.css once MFE-v3-S-01 wires consumers.
+ *
+ * @see rpappp/up-backend/docs/FRONTEND/brand-palette.md
+ * @source https://www.canva.com/colors/color-palettes/up-above/
+ */
+:root {
+  /* ── Canva Up Above (provisional — pending PO hex confirmation) ── */
+  --brand-canva-sailor-blue: #00203f;
+  --brand-canva-mint: #adefd1;
+
+  /* ── Semantic brand accents (DECISION-1 Option C) ── */
+  --brand-consumer-accent: var(--brand-canva-sailor-blue);
+  --brand-consumer-accent-soft: var(--brand-canva-mint);
+  --brand-consumer-accent-foreground: #ffffff;
+  --brand-admin-accent: #7c3aed;
+  --brand-admin-primary: #6365f0;
+
+  /* ── Admin rail palette (MOCKUP_VISUAL_SPEC_CACHE harmonization) ── */
+  --brand-rail-sidebar-bg: #1e1b4b;
+  --brand-rail-sidebar-bg-deep: #0f172a;
+  --brand-rail-sidebar-text: #e0e7ff;
+  --brand-rail-sidebar-muted: #a5b4fc;
+  --brand-rail-sidebar-active: var(--brand-admin-accent);
+  --brand-rail-sidebar-hover: rgba(124, 58, 237, 0.2);
+  --brand-rail-page-bg: #f1f5f9;
+  --brand-rail-card-border: #e2e8f0;
+  --brand-rail-kpi-up: #05805a;
+  --brand-rail-kpi-down: #da2325;
+
+  /* ── Bridge → theme.css (consumer / kiosk / pickup) — wired in MFE-v3-S-01 ── */
+  --color-accent: var(--brand-consumer-accent);
+  --color-focus-ring: var(--brand-consumer-accent);
+
+  /* ── Bridge → admin-theme.css — wired in MFE-v3-S-01 ── */
+  --color-rail-sidebar-bg: var(--brand-rail-sidebar-bg);
+  --color-rail-sidebar-text: var(--brand-rail-sidebar-text);
+  --color-rail-sidebar-muted: var(--brand-rail-sidebar-muted);
+  --color-rail-sidebar-active: var(--brand-rail-sidebar-active);
+  --color-rail-sidebar-hover: var(--brand-rail-sidebar-hover);
+  --color-rail-page-bg: var(--brand-rail-page-bg);
+  --color-rail-card-border: var(--brand-rail-card-border);
+  --color-rail-kpi-up: var(--brand-rail-kpi-up);
+  --color-rail-kpi-down: var(--brand-rail-kpi-down);
+  --color-an-chart-1: var(--brand-admin-primary);
+}