@vectramindnpm/unified-design-system 0.1.0

package/dist/tokens.css

@@ -0,0 +1,685 @@
+:root {
+  --color-background-card: var(--color-neutral-100);
+  --color-background-surface: var(--color-neutral-white);
+  --color-border-card: var(--color-neutral-450);
+  --color-border-default: var(--color-neutral-muted);
+  --color-brand-purple: #5D62B5;
+  --color-brand-purple-600: #4A4F99;
+  --color-brand-purple-700: #424784;
+  --color-gradient-brand: linear-gradient(145deg, #5D62B5 0%, #7B7FD4 50%, #8E92DD 100%);
+  --color-button-cancel: #e05c3a;
+  --color-button-cancel-hover-bg: #fef4f1;
+  --color-button-formcancel-bg: #FFEAEA;
+  --color-button-formcancel-hover-bg: #ffd5d5;
+  --color-button-formsubmit-hover-bg: #4D52A5;
+  --color-button-save-bg: #3d3f8f;
+  --color-button-save-hover-bg: #33357a;
+  --color-button-selected-gradient-mid: #3b4288;
+  --color-button-selected-gradient-start: #1f255a;
+  --color-button-submenu-text: #6d6a6a;
+  --color-toast-danger-bg: #EF4444;
+  --color-toast-info-bg: #eff6ff;
+  --color-toast-success-bg: #10B981;
+  --color-toast-warning-bg: #f7a23b;
+  --color-interactive-brand: var(--color-brand-purple);
+  --color-interactive-brand-active: var(--color-brand-purple-600);
+  --color-interactive-brand-hover: var(--color-brand-purple-700);
+  --color-neutral-100: #f9fafb;
+  --color-neutral-200: #f3f4f6;
+  --color-neutral-300: #e9eef6;
+  --color-neutral-350: #e5e7eb;
+  --color-neutral-400: #dddddd;
+  --color-neutral-450: #d1d5db;
+  --color-neutral-500: #ced4da;
+  --color-neutral-600: #9ca3af;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #263238;
+  --color-neutral-900: #111827;
+  --color-neutral-gray: #6b7280;
+  --color-neutral-muted: #f1f1f1;
+  --color-neutral-white: #ffffff;
+  --color-status-danger: #F2726F;
+  --color-status-success: #63B58F;
+  --color-status-warning: #F5A623;
+  --color-text-muted: var(--color-neutral-600);
+  --color-text-primary: var(--color-neutral-900);
+  --component-button-background: var(--color-interactive-brand);
+  --component-button-background-hover: var(--color-interactive-brand-hover);
+  --component-button-radius: var(--radius-control);
+  --component-button-shadow: var(--shadow-elevation-1);
+  --component-button-text-color: var(--color-background-surface);
+  --component-card-background: var(--color-background-card);
+  --component-card-border-color: var(--color-border-card);
+  --component-card-radius: var(--radius-card);
+  --component-pill-active-bg: var(--color-ext-edf9f4);
+  --component-pill-active-border: var(--color-ext-009d6430);
+  --component-pill-active-text: var(--color-ext-267352);
+  --component-pill-inactive-bg: var(--color-ext-fff2f2);
+  --component-pill-inactive-border: var(--color-ext-f6242430);
+  --component-pill-inactive-text: var(--color-brand-red);
+  --component-pill-tag-bg: #5D62B50D;
+  --component-pill-tag-border: #5D62B526;
+  --component-pill-tag-text: var(--color-brand-purple);
+  --component-table-action-activate-bg: var(--color-brand-blue);
+  --component-table-action-activate-hover: var(--color-ext-4a4faa);
+  --component-table-action-call-bg: var(--color-brand-green);
+  --component-table-action-call-hover: var(--color-ext-059669);
+  --component-table-action-end-bg: var(--color-brand-red);
+  --component-table-action-end-hover: var(--color-ext-dc2626);
+  --component-table-action-hold-bg: var(--color-ext-fbbf24);
+  --component-table-action-hold-hover: var(--color-ext-f59e0b);
+  --component-table-action-noshow-bg: var(--color-ext-f87171);
+  --component-table-action-noshow-hover: var(--color-toast-danger-bg);
+  --component-table-action-success-bg: var(--color-brand-green);
+  --component-table-action-success-hover: var(--color-ext-36a16f);
+  --component-table-action-transfer-bg: var(--color-brand-teal);
+  --component-table-action-transfer-hover: var(--color-ext-0f766e);
+  --component-table-border: var(--color-ext-eef0f3);
+  --component-table-header-bg: var(--color-neutral-100);
+  --component-table-header-text: var(--color-neutral-600);
+  --component-table-pill-hold-bg: var(--color-ext-fff7e6);
+  --component-table-pill-hold-border: var(--color-ext-ffc30040);
+  --component-table-pill-hold-text: var(--color-ext-ffc300);
+  --component-table-pill-neutral-text: var(--color-neutral-600);
+  --component-table-pill-noshow-bg: var(--color-ext-fee2e2);
+  --component-table-pill-noshow-text: var(--color-ext-dc2626);
+  --component-table-pill-success-bg: var(--color-ext-eaf8f4);
+  --component-table-pill-success-text: var(--color-brand-green);
+  --component-table-pill-transfer-bg: var(--color-ext-ede9fe);
+  --component-table-pill-transfer-text: var(--color-ext-6366f1);
+  --component-table-row-alt-bg: var(--color-ext-f8fafc);
+  --component-table-row-escalated-bg: var(--color-ext-fff2f1);
+  --component-table-row-escalated-border: var(--color-ext-f57070);
+  --component-table-row-escalated-hover-bg: var(--color-ext-ffe0e0);
+  --component-table-row-escalated-hover-border: var(--color-brand-red);
+  --component-table-row-hover-bg: var(--color-ext-eef0fb);
+  --ctrl-2xl: 3.5rem;
+  --ctrl-xl: 3rem;
+  --focus-ring-color: var(--color-interactive-brand);
+  --focus-ring-color-soft: #5D62B54D;
+  --font-family-base: Inter, Helvetica, Arial, sans-serif;
+  --font-lineheight-normal: 1.3;
+  --font-size-2xl: 1.5rem;
+  --font-size-2xs: 0.625rem;
+  --font-size-base: 1rem;
+  --font-size-hero: 2.5rem;
+  --font-size-lg: 1.125rem;
+  --font-size-md: 1.0625rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-xl: 1.3125rem;
+  --font-size-xs: 0.6875rem;
+  --font-weight-semibold: 600;
+  --motion-duration-fast: 150ms;
+  --motion-duration-normal: 200ms;
+  --opacity-mid: 0.18;
+  --radius-card: var(--radius-lg);
+  --radius-control: var(--radius-md);
+  --radius-modal: var(--radius-lg);
+  --radius-pill: 9999px;
+  --radius-xs: 0.375rem;
+  --shadow-elevation-1: var(--shadow-sm);
+  --shadow-elevation-2: var(--shadow-md);
+  --shadow-lg: 0 4px 24px rgba(0,0,0,0.08);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --spacing-button-x: var(--spacing-xl);
+  --spacing-component-gap: var(--spacing-md);
+  --spacing-form-control: var(--spacing-sm);
+  --spacing-lg: 1rem;
+  --spacing-md: 0.75rem;
+  --spacing-sm: 0.5rem;
+  --spacing-xl: 1.3125rem;
+  --spacing-xxl: 2rem;
+  --zindex-modal: 1111;
+  --zindex-overlay: 9999;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     Phase 2 color centralization additions.
+     --color-brand-* fill gaps versus the existing brand family already named
+     in src/designSystem/designTokens.js (blue/red/teal/green were used across
+     the app but had no CSS variable yet).
+     --color-ext-* are page/component one-off colors that had no existing
+     semantic name in the design-token hierarchy — named by their own hex value
+     rather than a guessed semantic label, since the same hex is reused across
+     unrelated contexts for different purposes and a wrong semantic name would
+     be worse than an honest literal one. Still centralizes every value here
+     as the single source of truth, per the "remove all hardcoded colors" pass.
+     ───────────────────────────────────────────────────────────────────────── */
+  --color-brand-blue-tint: #5c62bc14;
+  --color-brand-blue: #5c62bc;
+  --color-brand-green: #3eb78c;
+  --color-brand-red: #ff686a;
+  --color-brand-teal-tint: #00c6bf14;
+  --color-brand-teal: #00c6bf;
+  --color-ext-0000001a: #0000001a;
+  --color-ext-000000: #000;
+  --color-ext-004b81: #004b81;
+  --color-ext-009d6430: #009d6430;
+  --color-ext-009d64: #009d64;
+  --color-ext-00c48c: #00c48c;
+  --color-ext-00c6bf0d: #00C6BF0D;
+  --color-ext-00c6bf25: #00C6BF25;
+  --color-ext-0369a1: #0369a1;
+  --color-ext-037edf: #037EDF;
+  --color-ext-047857: #047857;
+  --color-ext-059669: #059669;
+  --color-ext-065f46: #065F46;
+  --color-ext-06b6d4: #06B6D4;
+  --color-ext-ff6a00: #ff6a00;
+  --color-ext-00cac0: #00cac0;
+  --color-ext-075985: #075985;
+  --color-ext-080e71: #080E71;
+  --color-ext-0891b2: #0891b2;
+  --color-ext-0b0d1a: #0b0d1a;
+  --color-ext-0bc4e8: #0bc4e8;
+  --color-ext-0d9488: #0d9488;
+  --color-ext-0e1120: #0e1120;
+  --color-ext-0ea5a5: #0ea5a5;
+  --color-ext-0ea5e904: #0ea5e904;
+  --color-ext-0ea5e9: #0ea5e9;
+  --color-ext-0ea5e915: #0ea5e915;
+  --color-ext-0f1324: #0f1324;
+  --color-ext-0f172a: #0f172a;
+  --color-ext-0f766e: #0f766e;
+  --color-ext-10162a: #10162a;
+  --color-ext-10b98104: #10b98104;
+  --color-ext-10b98115: #10b98115;
+  --color-ext-111111: #111;
+  --color-ext-111629: #111629;
+  --color-ext-134e4a: #134e4a;
+  --color-ext-13c3e7: #13c3e7;
+  --color-ext-14b8a6: #14b8a6;
+  --color-ext-151729: #151729;
+  --color-ext-15803d: #15803d;
+  --color-ext-166534: #166534;
+  --color-ext-16a34a: #16a34a;
+  --color-ext-171717: #171717;
+  --color-ext-19b8b0: #19B8B0;
+  --color-ext-1a1a1a: #1a1a1a;
+  --color-ext-1a1a2e: #1a1a2e;
+  --color-ext-1d4ed8: #1d4ed8;
+  --color-ext-1e1e1e: #1e1e1e;
+  --color-ext-1e2147: #1e2147;
+  --color-ext-1f2937: #1f2937;
+  --color-ext-1f9d55: #1f9d55;
+  --color-ext-20a987: #20a987;
+  --color-ext-22c55e: #22c55e;
+  --color-ext-24324a: #24324A;
+  --color-ext-24c087: #24c087;
+  --color-ext-252eb8: #252eb8;
+  --color-ext-2563eb: #2563eb;
+  --color-ext-267352: #267352;
+  --color-ext-28c7d9: #28C7D9;
+  --color-ext-2b3473: #2b3473;
+  --color-ext-2c9d70: #2c9d70;
+  --color-ext-2d2d2d: #2d2d2d;
+  --color-ext-2e3260: #2e3260;
+  --color-ext-2f345f: #2f345f;
+  --color-ext-2fb5c7: #2fb5c7;
+  --color-ext-2fd0f6: #2fd0f6;
+  --color-ext-32395f: #32395f;
+  --color-ext-333333: #333;
+  --color-ext-333674: #333674;
+  --color-ext-34d399: #34d399;
+  --color-ext-36a16f: #36a16f;
+  --color-ext-374151: #374151;
+  --color-ext-3a3f84: #3a3f84;
+  --color-ext-3a7bd5: #3a7bd5;
+  --color-ext-3b82f6: #3b82f6;
+  --color-ext-3c4aa3: #3c4aa3;
+  --color-ext-3d3a5c: #3d3a5c;
+  --color-ext-3d3d3d: #3d3d3d;
+  --color-ext-3d43a4: #3d43a4;
+  --color-ext-3eb78c0d: #3eb78c0d;
+  --color-ext-3eb78c14: #3EB78C14;
+  --color-ext-3f3d56: #3f3d56;
+  --color-ext-404aef: #404aef;
+  --color-ext-414884: #414884;
+  --color-ext-4338ca: #4338ca;
+  --color-ext-454ca0: #454ca0;
+  --color-ext-475569: #475569;
+  --color-ext-4a4faa: #4a4faa;
+  --color-ext-4a50a8: #4a50a8;
+  --color-ext-4a90d9: #4a90d9;
+  --color-ext-4ade80: #4ade80;
+  --color-ext-4b5563: #4B5563;
+  --color-ext-4caf7d: #4caf7d;
+  --color-ext-4e5299: #4E5299;
+  --color-ext-4f46e5: #4F46E5;
+  --color-ext-555555: #555;
+  --color-ext-5558e3: #5558E3;
+  --color-ext-596191: #596191;
+  --color-ext-5b21b6: #5b21b6;
+  --color-ext-5b50d6: #5b50d6;
+  --color-ext-5c62bc04: #5C62BC04;
+  --color-ext-5c62bc0d: #5c62bc0d;
+  --color-ext-5c62bc12: #5c62bc12;
+  --color-ext-5c62bc20: #5C62BC20;
+  --color-ext-5c62bc22: #5c62bc22;
+  --color-ext-5c62bc30: #5C62BC30;
+  --color-ext-5c62bc40: #5C62BC40;
+  --color-ext-5f6c7b: #5f6c7b;
+  --color-ext-636477: #636477;
+  --color-ext-6366f1: #6366F1;
+  --color-ext-64748b: #64748B;
+  --color-ext-666666: #666;
+  --color-ext-6b74d8: #6B74D8;
+  --color-ext-6d28d9: #6d28d9;
+  --color-ext-6f6e6e: #6f6e6e;
+  --color-ext-737b8c: #737B8C;
+  --color-ext-78350f: #78350f;
+  --color-ext-7a5200: #7a5200;
+  --color-ext-7c3aed: #7c3aed;
+  --color-ext-7c4dff: #7c4dff;
+  --color-ext-7d84b0: #7d84b0;
+  --color-ext-7dd3fc: #7dd3fc;
+  --color-ext-7e22ce: #7e22ce;
+  --color-ext-818cf8: #818cf8;
+  --color-ext-86efac: #86efac;
+  --color-ext-888888: #888;
+  --color-ext-8a91a0: #8A91A0;
+  --color-ext-8b5cf604: #8b5cf604;
+  --color-ext-8b5cf6: #8b5cf6;
+  --color-ext-8b5cf615: #8b5cf615;
+  --color-ext-8b95a7: #8B95A7;
+  --color-ext-8d7b68: #8d7b68;
+  --color-ext-92400e: #92400e;
+  --color-ext-9333ea: #9333ea;
+  --color-ext-93d2ff40: #93d2ff40;
+  --color-ext-94a3b8: #94a3b8;
+  --color-ext-9791b8: #9791b8;
+  --color-ext-991b1b: #991B1B;
+  --color-ext-999999: #999999;
+  --color-ext-99f6e4: #99f6e4;
+  --color-ext-9aa1c7: #9aa1c7;
+  --color-ext-9aa3be: #9aa3be;
+  --color-ext-9ea8d8: #9ea8d8;
+  --color-ext-a16207: #a16207;
+  --color-ext-a3b1c6: #A3B1C6;
+  --color-ext-a5b4fc: #a5b4fc;
+  --color-ext-a5f3fc: #a5f3fc;
+  --color-ext-a7f3d0: #a7f3d0;
+  --color-ext-aaaaaa: #aaa;
+  --color-ext-b0b3c6: #b0b3c6;
+  --color-ext-b45309: #b45309;
+  --color-ext-b7bdc8: #B7BDC8;
+  --color-ext-b91c1c: #b91c1c;
+  --color-ext-bae6fd: #bae6fd;
+  --color-ext-bbf7d0: #bbf7d0;
+  --color-ext-be123c: #be123c;
+  --color-ext-be185d: #be185d;
+  --color-ext-bfdbfe: #bfdbfe;
+  --color-ext-bff2f2: #bff2f2;
+  --color-ext-bff3ff: #bff3ff;
+  --color-ext-c026d3: #c026d3;
+  --color-ext-c0bcd8: #c0bcd8;
+  --color-ext-c2410c: #c2410c;
+  --color-ext-c394e4: #c394e4;
+  --color-ext-c6ccee: #c6ccee;
+  --color-ext-c7c4f0: #c7c4f0;
+  --color-ext-c7cae8: #C7CAE8;
+  --color-ext-c7d2fe: #c7d2fe;
+  --color-ext-c7dbff: #c7dbff;
+  --color-ext-c8efd8: #c8efd8;
+  --color-ext-c9c6e0: #c9c6e0;
+  --color-ext-c9cce8: #C9CCE8;
+  --color-ext-c9cdd4: #c9cdd4;
+  --color-ext-cbd5e1: #cbd5e1;
+  --color-ext-ccfbf1: #ccfbf1;
+  --color-ext-cfe0ff: #cfe0ff;
+  --color-ext-cfeffc: #CFEFFC;
+  --color-ext-d0d3ed: #D0D3ED;
+  --color-ext-d1d5db80: #d1d5db80;
+  --color-ext-d1fae5: #D1FAE5;
+  --color-ext-d4183d: #d4183d;
+  --color-ext-d49b00: #d49b00;
+  --color-ext-d54c5c: #d54c5c;
+  --color-ext-d6dcff: #d6dcff;
+  --color-ext-d8d4f0: #d8d4f0;
+  --color-ext-d8dbf5: #d8dbf5;
+  --color-ext-d8dcff: #D8DCFF;
+  --color-ext-d8dee6: #d8dee6;
+  --color-ext-d97706: #D97706;
+  --color-ext-d9d5ff: #d9d5ff;
+  --color-ext-d9d7ec: #d9d7ec;
+  --color-ext-d9dadc: #d9dadc;
+  --color-ext-d9ddfc: #D9DDFC;
+  --color-ext-d9dee8: #D9DEE8;
+  --color-ext-d9fdd3: #d9fdd3;
+  --color-ext-dbeafe: #dbeafe;
+  --color-ext-dc2626: #dc2626;
+  --color-ext-dcd9f3: #dcd9f3;
+  --color-ext-dcfce7: #dcfce7;
+  --color-ext-ddd6fe: #ddd6fe;
+  --color-ext-dde0f5: #DDE0F5;
+  --color-ext-dfe4ff: #dfe4ff;
+  --color-ext-dff6ea: #dff6ea;
+  --color-ext-e07a00: #e07a00;
+  --color-ext-e0d2ff: #e0d2ff;
+  --color-ext-e0e1f5: #e0e1f5;
+  --color-ext-e0e7ff: #e0e7ff;
+  --color-ext-e0f2fe: #e0f2fe;
+  --color-ext-e0f8f8: #E0F8F8;
+  --color-ext-e1e3ef: #e1e3ef;
+  --color-ext-e1e5ff: #E1E5FF;
+  --color-ext-e2e1ed: #e2e1ed;
+  --color-ext-e2e8f0: #e2e8f0;
+  --color-ext-e4e7f2: #E4E7F2;
+  --color-ext-e4e8f5: #E4E8F5;
+  --color-ext-e5484d: #e5484d;
+  --color-ext-e5e3f5: #e5e3f5;
+  --color-ext-e6fff6: #e6fff6;
+  --color-ext-e6fffb: #E6FFFB;
+  --color-ext-e85d75: #e85d75;
+  --color-ext-e8e7f3: #e8e7f3;
+  --color-ext-e8eaf6: #E8EAF6;
+  --color-ext-e8faf4: #e8faf4;
+  --color-ext-e9d5ff: #e9d5ff;
+  --color-ext-ea580c: #ea580c;
+  --color-ext-eaebf8: #eaebf8;
+  --color-ext-eaecf8: #EAECF8;
+  --color-ext-eaf8f4: #eaf8f4;
+  --color-ext-eafbfa: #EAFBFA;
+  --color-ext-ec4899: #ec4899;
+  --color-ext-ecebfa: #ecebfa;
+  --color-ext-ecedf8: #ecedf8;
+  --color-ext-eceef5: #ECEEF5;
+  --color-ext-eceefe: #ECEEFE;
+  --color-ext-ecfdf5: #ecfdf5;
+  --color-ext-ede9fe: #ede9fe;
+  --color-ext-edeaf7: #edeaf7;
+  --color-ext-ededfb: #ededfb;
+  --color-ext-edf9f4: #edf9f4;
+  --color-ext-eeedf8: #EEEDF8;
+  --color-ext-eef0f3: #eef0f3;
+  --color-ext-eef0fb: #eef0fb;
+  --color-ext-eef2f7: #eef2f7;
+  --color-ext-eef2ff: #EEF2FF;
+  --color-ext-eef9f4: #eef9f4;
+  --color-ext-ef4444: #ef4444;
+  --color-ext-ef444404: #ef444404;
+  --color-ext-ef444415: #ef444415;
+  --color-ext-ef9299: #ef9299;
+  --color-ext-efba1c: #efba1c;
+  --color-ext-eff3f6: #EFF3F6;
+  --color-ext-f0f0f0: #F0F0F0;
+  --color-ext-f0f0f5: #f0f0f5;
+  --color-ext-f0f0fb: #f0f0fb;
+  --color-ext-f0f9ff: #f0f9ff;
+  --color-ext-f0fdf4: #f0fdf4;
+  --color-ext-f1d0d0: #f1d0d0;
+  --color-ext-f1f1f8: #f1f1f8;
+  --color-ext-f1f5f9: #f1f5f9;
+  --color-ext-f2f3ff: #f2f3ff;
+  --color-ext-f2f4ff: #f2f4ff;
+  --color-ext-f39c12: #f39c12;
+  --color-ext-f3d0ff: #f3d0ff;
+  --color-ext-f3e8ff: #f3e8ff;
+  --color-ext-f3f2fa: #f3f2fa;
+  --color-ext-f3f3f3: #f3f3f3;
+  --color-ext-f3feff: #f3feff;
+  --color-ext-f4f4f4: #f4f4f4;
+  --color-ext-f4f5f8: #f4f5f8;
+  --color-ext-f4f5f9: #f4f5f9;
+  --color-ext-f4f8ff: #f4f8ff;
+  --color-ext-f4fcf7: #f4fcf7;
+  --color-ext-f4fdf7: #f4fdf7;
+  --color-ext-f4fefe: #f4fefe;
+  --color-ext-f4fffd: #f4fffd;
+  --color-ext-f57070: #f57070;
+  --color-ext-f59e0b: #f59e0b;
+  --color-ext-f59e0b04: #f59e0b04;
+  --color-ext-f59e0b15: #f59e0b15;
+  --color-ext-f5dfaf: #F5DFAF;
+  --color-ext-f5f3ff: #f5f3ff;
+  --color-ext-f5f4f9: #f5f4f9;
+  --color-ext-f5f4fc: #f5f4fc;
+  --color-ext-f5f5f5: #f5f5f5;
+  --color-ext-f5f5fb: #f5f5fb;
+  --color-ext-f5f6fa: #f5f6fa;
+  --color-ext-f5f6ff: #f5f6ff;
+  --color-ext-f5f7ff: #f5f7ff;
+  --color-ext-f5f9ff: #f5f9ff;
+  --color-ext-f5fcff: #F5FCFF;
+  --color-ext-f6242430: #f6242430;
+  --color-ext-f62424: #f62424;
+  --color-ext-f6f6fc: #f6f6fc;
+  --color-ext-f6f7ff: #f6f7ff;
+  --color-ext-f7f5ff: #f7f5ff;
+  --color-ext-f7f6ff: #F7F6FF;
+  --color-ext-f7f7fb: #f7f7fb;
+  --color-ext-f7f7fc: #f7f7fc;
+  --color-ext-f7f8ff: #F7F8FF;
+  --color-ext-f87171: #f87171;
+  --color-ext-f8f7fc: #f8f7fc;
+  --color-ext-f8f7ff: #f8f7ff;
+  --color-ext-f8f8fb: #f8f8fb;
+  --color-ext-f8f8ff: #F8F8FF;
+  --color-ext-f8f9ff: #f8f9ff;
+  --color-ext-f8fafc: #f8fafc;
+  --color-ext-f8fffe: #F8FFFE;
+  --color-ext-f97316: #f97316;
+  --color-ext-f9731604: #f9731604;
+  --color-ext-f9731615: #f9731615;
+  --color-ext-f9f8fd: #f9f8fd;
+  --color-ext-faf7ff: #faf7ff;
+  --color-ext-fafafa: #fafafa;
+  --color-ext-fafaff: #fafaff;
+  --color-ext-fafbfc: #fafbfc;
+  --color-ext-fafbff: #fafbff;
+  --color-ext-fbbf24: #fbbf24;
+  --color-ext-fbcfe8: #fbcfe8;
+  --color-ext-fbf7ff: #fbf7ff;
+  --color-ext-fca5a5: #fca5a5;
+  --color-ext-fcd34d: #fcd34d;
+  --color-ext-fcf6ff: #fcf6ff;
+  --color-ext-fde68a: #fde68a;
+  --color-ext-fde8e8: #fde8e8;
+  --color-ext-fdf4ff: #fdf4ff;
+  --color-ext-fecaca: #fecaca;
+  --color-ext-fecdd3: #fecdd3;
+  --color-ext-fed7aa: #fed7aa;
+  --color-ext-fee2e2: #fee2e2;
+  --color-ext-fee7ea: #fee7ea;
+  --color-ext-fef08a: #fef08a;
+  --color-ext-fef2f2: #fef2f2;
+  --color-ext-fef3c7: #fef3c7;
+  --color-ext-fef9c3: #fef9c3;
+  --color-ext-fef9e7: #fef9e7;
+  --color-ext-ff8b8c: #FF8B8C;
+  --color-ext-ffc30014: #FFC30014;
+  --color-ext-ffc300: #ffc300;
+  --color-ext-ffc9cc: #ffc9cc;
+  --color-ext-ffcb3b: #ffcb3b;
+  --color-ext-ffd7b3: #ffd7b3;
+  --color-ext-ffd9bd: #ffd9bd;
+  --color-ext-ffe0e0: #FFE0E0;
+  --color-ext-ffe49a: #ffe49a;
+  --color-ext-fff0f0: #fff0f0;
+  --color-ext-fff2f1: #FFF2F1;
+  --color-ext-fff2f2: #fff2f2;
+  --color-ext-fff3cd: #fff3cd;
+  --color-ext-fff3e0: #fff3e0;
+  --color-ext-fff4ed: #fff4ed;
+  --color-ext-fff4f5: #fff4f5;
+  --color-ext-fff5f5: #fff5f5;
+  --color-ext-fff6f7: #fff6f7;
+  --color-ext-fff6fb: #fff6fb;
+  --color-ext-fff7e6: #fff7e6;
+  --color-ext-fff7ed: #fff7ed;
+  --color-ext-fff7f0: #fff7f0;
+  --color-ext-fff8f2: #fff8f2;
+  --color-ext-fff8f8: #fff8f8;
+  --color-ext-fff9f4: #fff9f4;
+  --color-ext-fffbea: #fffbea;
+  --color-ext-fffbeb: #fffbeb;
+  --color-ext-fffbf2: #FFFBF2;
+  --color-ext-fffdf2: #fffdf2;
+
+  /* Phase 3a additions (chart-adjacent DOM/SVG files rendered via Recharts/D3/plain markup —
+     safe for CSS var(), unlike files that build real ECharts option objects). */
+  --color-ext-1e1b4b: #1e1b4b;
+  --color-ext-22d3ee: #22d3ee;
+  --color-ext-29c5e6: #29c5e6;
+  --color-ext-3b90f7: #3b90f7;
+  --color-ext-444444: #444;
+  --color-ext-6ee7b7: #6ee7b7;
+  --color-ext-74b9e8: #74b9e8;
+  --color-ext-a0a5dd: #a0a5dd;
+  --color-ext-a0aec0: #a0aec0;
+  --color-ext-a78bfa: #a78bfa;
+  --color-ext-a855f7: #a855f7;
+  --color-ext-b5e48c: #b5e48c;
+  --color-ext-bbbbbb: #bbb;
+  --color-ext-cccccc: #ccc;
+  --color-ext-d1faf7: #d1faf7;
+  --color-ext-f0fdfa: #f0fdfa;
+  --color-ext-f472b6: #f472b6;
+  --color-ext-f4a9b8: #f4a9b8;
+  --color-ext-f6f7fb: #f6f7fb;
+  --color-ext-f9c74f: #f9c74f;
+  --color-ext-faf5ff: #faf5ff;
+  --color-ext-fff1f2: #fff1f2;
+  --color-ext-ffffff08: #ffffff08;
+
+  /* Phase 3b additions (pages.scss hardcoded-color cleanup pass — colors with no prior
+     matching token; named by literal hex value per the --color-ext-* convention above). */
+  --color-ext-00000008: #00000008;
+  --color-ext-0000000a: #0000000a;
+  --color-ext-0000000d: #0000000d;
+  --color-ext-0000001f: #0000001f;
+  --color-ext-00000021: #00000021;
+  --color-ext-00000059: #00000059;
+  --color-ext-00000061: #00000061;
+  --color-ext-00000066: #00000066;
+  --color-ext-00000080: #00000080;
+  --color-ext-0078d4: #0078d4;
+  --color-ext-0078d414: #0078d414;
+  --color-ext-00c6bf28: #00c6bf28;
+  --color-ext-027eb5: #027eb5;
+  --color-ext-064d44: #064d44;
+  --color-ext-075e54: #075e54;
+  --color-ext-0b141a14: #0b141a14;
+  --color-ext-0b141a1a: #0b141a1a;
+  --color-ext-0b141a21: #0b141a21;
+  --color-ext-0b141a80: #0b141a80;
+  --color-ext-0f172a0f: #0f172a0f;
+  --color-ext-0f172a14: #0f172a14;
+  --color-ext-101828: #101828;
+  --color-ext-111b21: #111b21;
+  --color-ext-1a1d35: #1a1d35;
+  --color-ext-1d6f42: #1d6f42;
+  --color-ext-1d6f4214: #1d6f4214;
+  --color-ext-1e1f4b: #1e1f4b;
+  --color-ext-1e234626: #1e234626;
+  --color-ext-1e234640: #1e234640;
+  --color-ext-25d366: #25d366;
+  --color-ext-25d3664d: #25d3664d;
+  --color-ext-26735226: #26735226;
+  --color-ext-292929: #292929;
+  --color-ext-2a2d55: #2a2d55;
+  --color-ext-363a6a: #363a6a;
+  --color-ext-3d41a0: #3d41a0;
+  --color-ext-454980: #454980;
+  --color-ext-494848: #494848;
+  --color-ext-4a4f9a: #4a4f9a;
+  --color-ext-555a6d: #555a6d;
+  --color-ext-5c62bc05: #5c62bc05;
+  --color-ext-5c62bc08: #5c62bc08;
+  --color-ext-5c62bc0a: #5c62bc0a;
+  --color-ext-5c62bc10: #5c62bc10;
+  --color-ext-5c62bc33: #5c62bc33;
+  --color-ext-5c62bc70: #5c62bc70;
+  --color-ext-5c62bc80: #5c62bc80;
+  --color-ext-5c62bc99: #5c62bc99;
+  --color-ext-5d5fef: #5d5fef;
+  --color-ext-5d62b504: #5d62b504;
+  --color-ext-5d62b50f: #5d62b50f;
+  --color-ext-5d62b515: #5d62b515;
+  --color-ext-5d62b51a: #5d62b51a;
+  --color-ext-5d62b524: #5d62b524;
+  --color-ext-5d62b52e: #5d62b52e;
+  --color-ext-5d62b566: #5d62b566;
+  --color-ext-5d62b6: #5d62b6;
+  --color-ext-63b58f14: #63b58f14;
+  --color-ext-666666: #666666;
+  --color-ext-667781: #667781;
+  --color-ext-6b6fd6: #6b6fd6;
+  --color-ext-7d7d7e: #7d7d7e;
+  --color-ext-888888: #888888;
+  --color-ext-98a2b3: #98a2b3;
+  --color-ext-9ca3af30: #9ca3af30;
+  --color-ext-9ca3afb3: #9ca3afb3;
+  --color-ext-a1a1a1: #a1a1a1;
+  --color-ext-aaaaaa: #aaaaaa;
+  --color-ext-b0b8c8: #b0b8c8;
+  --color-ext-c7c9e8: #c7c9e8;
+  --color-ext-c9cbcf: #c9cbcf;
+  --color-ext-d5d6f3: #d5d6f3;
+  --color-ext-d8d9ff: #d8d9ff;
+  --color-ext-d9d9d9: #d9d9d9;
+  --color-ext-e05c7d: #e05c7d;
+  --color-ext-e0daf0: #e0daf0;
+  --color-ext-e0f7f7: #e0f7f7;
+  --color-ext-e11d48: #e11d48;
+  --color-ext-e1e3f0: #e1e3f0;
+  --color-ext-e53935: #e53935;
+  --color-ext-e5393514: #e5393514;
+  --color-ext-e5ddd5: #e5ddd5;
+  --color-ext-e5e5e5: #e5e5e5;
+  --color-ext-e8eaed: #e8eaed;
+  --color-ext-e9eaec: #e9eaec;
+  --color-ext-e9f2ff: #e9f2ff;
+  --color-ext-eaebf4: #eaebf4;
+  --color-ext-ebebfc: #ebebfc;
+  --color-ext-ebfbfa: #ebfbfa;
+  --color-ext-ededf5: #ededf5;
+  --color-ext-eeeeee: #eeeeee;
+  --color-ext-f0efff: #f0efff;
+  --color-ext-f0f0f4: #f0f0f4;
+  --color-ext-f0f0f8: #f0f0f8;
+  --color-ext-f0f2f5: #f0f2f5;
+  --color-ext-f1f0f9: #f1f0f9;
+  --color-ext-f1f0ff: #f1f0ff;
+  --color-ext-f2726f0f: #f2726f0f;
+  --color-ext-f2f3f9: #f2f3f9;
+  --color-ext-f59e0b30: #f59e0b30;
+  --color-ext-f5f4fe: #f5f4fe;
+  --color-ext-f5f5fc: #f5f5fc;
+  --color-ext-f5f5ff: #f5f5ff;
+  --color-ext-f5f6f6: #f5f6f6;
+  --color-ext-f8f8fc: #f8f8fc;
+  --color-ext-f8f9fa: #f8f9fa;
+  --color-ext-f8fbff: #f8fbff;
+  --color-ext-faf9ff: #faf9ff;
+  --color-ext-fcf8ec: #fcf8ec;
+  --color-ext-ff686a50: #ff686a50;
+  --color-ext-ffc30008: #ffc30008;
+  --color-ext-ffc30018: #ffc30018;
+  --color-ext-ffc30030: #ffc30030;
+  --color-ext-ffc30040: #ffc30040;
+  --color-ext-fff9f0: #fff9f0;
+  --color-ext-ffffff: #fff;
+  --color-ext-ffffff0d: #ffffff0d;
+  --color-ext-ffffff14: #ffffff14;
+  --color-ext-ffffff1a: #ffffff1a;
+  --color-ext-ffffff1f: #ffffff1f;
+  --color-ext-ffffff26: #ffffff26;
+  --color-ext-ffffff80: #ffffff80;
+  --color-ext-ffffff99: #ffffff99;
+  --color-ext-ffffffcc: #ffffffcc;
+
+  /* Added during full-app color-token migration completion pass */
+  --color-ext-dc262640: #dc262640;
+  --color-ext-e9eaf0: #e9eaf0;
+  --color-ext-eef0ff: #eef0ff;
+  --color-ext-0d9c8f: #0d9c8f;
+  --color-ext-eef0f4: #eef0f4;
+  --color-ext-3a448b: #3A448B;
+  --color-ext-cad1e0: #cad1e0;
+  --color-ext-ddd: #ddd;
+  --color-ext-e9ecef: #e9ecef;
+  --color-ext-6b6fc4: #6B6FC4;
+  --color-ext-7b7fd4: #7B7FD4;
+  --color-ext-8e92dd: #8E92DD;
+}