@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.64

package/dist/design-system/themes/core/elevation/_elevation-tokens.scss

@@ -0,0 +1,67 @@
+// ============================================================================
+// ELEVATION TOKENS (Box Shadows)
+// ============================================================================
+// Source: Figma UI Kit Production — node-id=40237-4324
+// 8 elevation types: level 1–4 (down), top, both, focus, inner
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHADOW COLOR TOKENS
+  // ambient-01..05: progressively darker drop shadows
+  // highlight-01..04: white highlights (for dark-mode lift) + inner
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-shadow-ambient-01: rgba(0, 0, 0, 0.04);
+  --er-shadow-ambient-02: rgba(0, 0, 0, 0.06);
+  --er-shadow-ambient-03: rgba(0, 0, 0, 0.08);
+  --er-shadow-ambient-04: rgba(0, 0, 0, 0.1);
+  --er-shadow-ambient-05: rgba(0, 0, 0, 0.12);
+  --er-shadow-highlight-01: rgba(255, 255, 255, 0);
+  --er-shadow-highlight-02: rgba(255, 255, 255, 0);
+  --er-shadow-highlight-03: rgba(255, 255, 255, 0);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION — default direction (downward)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // level 1 — subtle card / list item
+  --er-elevation-level-1:
+    0px 1px 2px 0px var(--er-shadow-ambient-01), 0px 2px 6px 0px var(--er-shadow-ambient-02),
+    0px -1px 2px 0px var(--er-shadow-highlight-01);
+
+  // level 2 — popovers, dropdowns
+  --er-elevation-level-2:
+    0px 2px 4px 0px var(--er-shadow-ambient-02), 0px 6px 16px 0px var(--er-shadow-ambient-03),
+    0px -1px 3px 0px var(--er-shadow-highlight-01);
+
+  // level 3 — dialogs, modals
+  --er-elevation-level-3:
+    0px 4px 8px 0px var(--er-shadow-ambient-03), 0px 12px 28px 0px var(--er-shadow-ambient-04),
+    0px -1px 4px 0px var(--er-shadow-highlight-02);
+
+  // level 4 — drawers, prominent overlays
+  --er-elevation-level-4:
+    0px 8px 16px 0px var(--er-shadow-ambient-04), 0px 20px 48px 0px var(--er-shadow-ambient-05),
+    0px -2px 6px 0px var(--er-shadow-highlight-03);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION — special directions
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // top — upward shadow (bottom sheets, toast)
+  --er-elevation-top:
+    0px -6px 12px 0px var(--er-shadow-ambient-03), 0px -16px 32px 0px var(--er-shadow-ambient-04),
+    0px 1px 3px 0px var(--er-shadow-highlight-01);
+
+  // both — bidirectional (sticky headers, floating bars)
+  --er-elevation-both:
+    0px 10px 24px 0px var(--er-shadow-ambient-03), 0px -6px 16px 0px var(--er-shadow-ambient-02),
+    0px 0px 40px 0px var(--er-shadow-ambient-04), 0px -1px 3px 0px var(--er-shadow-highlight-02);
+
+  // focus — focused interactive elements
+  --er-elevation-focus:
+    0px 0px 0px 1px var(--er-shadow-ambient-03), 0px 8px 24px 0px var(--er-shadow-ambient-04);
+
+  // inner — inset / pressed state
+  --er-elevation-inner: inset 0px 2px 4px 0px var(--er-shadow-ambient-02);
+}

package/dist/design-system/themes/core/elevation/_elevation-utils.scss

@@ -0,0 +1,94 @@
+// ============================================================================
+// ELEVATION UTILITIES (Mixins & Classes)
+// ============================================================================
+// SCSS mixins and utility classes for elevation system
+// Source: Figma UI Kit Production — node-id=40237-4324
+// ============================================================================
+
+@use 'elevation-tokens' as *;
+
+// ============================================================================
+// ELEVATION MIXINS
+// ============================================================================
+
+@mixin elevation-level-1 {
+  box-shadow: var(--er-elevation-level-1) !important;
+}
+@mixin elevation-level-2 {
+  box-shadow: var(--er-elevation-level-2) !important;
+}
+@mixin elevation-level-3 {
+  box-shadow: var(--er-elevation-level-3) !important;
+}
+@mixin elevation-level-4 {
+  box-shadow: var(--er-elevation-level-4) !important;
+}
+@mixin elevation-top {
+  box-shadow: var(--er-elevation-top) !important;
+}
+@mixin elevation-both {
+  box-shadow: var(--er-elevation-both) !important;
+}
+@mixin elevation-focus {
+  box-shadow: var(--er-elevation-focus) !important;
+}
+@mixin elevation-inner {
+  box-shadow: var(--er-elevation-inner) !important;
+}
+@mixin elevation-none {
+  box-shadow: none !important;
+}
+
+// ============================================================================
+// UTILITY CLASSES
+// ============================================================================
+
+.elevation-level-1 {
+  @include elevation-level-1;
+}
+.elevation-level-2 {
+  @include elevation-level-2;
+}
+.elevation-level-3 {
+  @include elevation-level-3;
+}
+.elevation-level-4 {
+  @include elevation-level-4;
+}
+.elevation-top {
+  @include elevation-top;
+}
+.elevation-both {
+  @include elevation-both;
+}
+.elevation-focus {
+  @include elevation-focus;
+}
+.elevation-inner {
+  @include elevation-inner;
+}
+.elevation-none {
+  @include elevation-none;
+}
+
+// ============================================================================
+// INTERACTIVE HELPERS
+// ============================================================================
+
+@mixin elevation-transition($duration: 0.2s) {
+  transition: box-shadow $duration ease-in-out;
+}
+
+.elevation-transition {
+  @include elevation-transition;
+}
+
+// Interactive hover: level-1 → level-2
+.elevation-interactive {
+  @include elevation-level-1;
+  @include elevation-transition;
+
+  &:hover {
+    @include elevation-level-2;
+  }
+}

package/dist/design-system/themes/core/index.scss

@@ -0,0 +1,130 @@
+// ============================================================================
+// DESIGN SYSTEM - MAIN ENTRY POINT
+// ============================================================================
+// Re-exports all design tokens and components
+// Updated to use @forward (Sass 3.0.0 compatible)
+// ============================================================================
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 1: Tonal Palettes (primitive colors - never changes)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer1-palettes';
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 2: Alias Tokens (semantic names - can override per project)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer2-alias';
+
+// ─────────────────────────────────────────────────────────────────────────
+// LAYER 3: Component Tokens (usage-specific - uses Layer 2)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './layers/layer3-tokens';
+
+// ─────────────────────────────────────────────────────────────────────────
+// TOKENS: Border Radius (shape/corner/*)
+// ─────────────────────────────────────────────────────────────────────────
+@forward './tokens/border-radius';
+@forward './tokens/control-height';
+@forward './tokens/screen-size';
+@forward './tokens/spacing';
+
+// ─────────────────────────────────────────────────────────────────────────
+// TYPOGRAPHY SYSTEM
+// ─────────────────────────────────────────────────────────────────────────
+@forward './typography/typography-primitives';
+@forward './typography/typography-semantic';
+@forward './typography/typography-tokens';
+@forward './typography/typography-utils';
+
+// ─────────────────────────────────────────────────────────────────────────
+// ELEVATION SYSTEM
+// ─────────────────────────────────────────────────────────────────────────
+@forward './elevation/elevation-tokens';
+@forward './elevation/elevation-utils';
+
+// ─────────────────────────────────────────────────────────────────────────
+// COMPONENTS
+// ─────────────────────────────────────────────────────────────────────────
+@forward '../../components/popper';
+@forward '../../components/badge';
+@forward '../../components/button';
+@forward '../../components/checkbox';
+@forward '../../components/checkbox-list';
+@forward '../../components/dialog';
+@forward '../../components/divider';
+@forward '../../components/input';
+@forward '../../components/input-tag';
+@forward '../../components/input-number';
+@forward '../../components/input-code';
+@forward '../../components/progress';
+@forward '../../components/radio';
+@forward '../../components/switch';
+@forward '../../components/switcher';
+@forward '../../components/tag';
+@forward '../../components/tabs';
+@forward '../../components/topbar-menu';
+@forward '../../components/timeline';
+@forward '../../components/breadcrumb';
+@forward '../../components/segmented';
+@forward '../../components/avatar';
+@forward '../../components/avatar-group';
+@forward '../../components/drawer';
+@forward '../../components/popconfirm';
+@forward '../../components/auto-complete';
+@forward '../../components/collapse';
+@forward '../../components/select';
+@forward '../../components/loading';
+@forward '../../components/spinner';
+@forward '../../components/link';
+@forward '../../components/slider';
+@forward '../../components/message';
+@forward '../../components/menu';
+@forward '../../components/tooltip';
+@forward '../../components/skeleton';
+@forward '../../components/carousel';
+@forward '../../components/color-picker';
+@forward '../../components/date-picker';
+@forward '../../components/tree';
+@forward '../../components/tree-select';
+@forward '../../components/pagination';
+@forward '../../components/upload';
+@forward '../../components/time-picker';
+@forward '../../components/time-select';
+@forward '../../components/card';
+@forward '../../components/form';
+@forward '../../components/cascader';
+@forward '../../components/dropdown';
+@forward '../../components/empty';
+@forward '../../components/message-box';
+@forward '../../components/steps';
+@forward '../../components/table';
+@forward '../../components/transfer';
+@forward '../../components/select-country';
+@forward '../../components/growth-balance-profit-widget';
+@forward '../../components/monthly-gain-widget';
+@forward '../../components/pl-calendar-widget';
+@forward '../../components/trade-volume-widget';
+// ─────────────────────────────────────────────────────────────────────────
+// BRIDGES: Element Plus CSS Variables
+// ─────────────────────────────────────────────────────────────────────────
+@forward './bridges/element-plus-bridge';
+
+// ─────────────────────────────────────────────────────────────────────────
+// THEMES: Dark Mode Support
+// ─────────────────────────────────────────────────────────────────────────
+@forward './themes/dark-mode';
+
+// ============================================================================
+// USAGE IN YOUR APP
+// ============================================================================
+// Import this file once in your main entry point:
+//   import '@eaera/design-system';
+//
+// For project-specific themes:
+//   import '@eaera/design-system/themes/projects/clientportal';
+// ============================================================================
+
+* {
+  box-sizing: border-box;
+  font-family: var(--er-font-brand);
+}

package/dist/design-system/themes/core/layers/_layer1-palettes.scss

@@ -0,0 +1,289 @@
+// ============================================================================
+// LAYER 1: TONAL PALETTES (Primitive Colors)
+// ============================================================================
+// Foundation colors extracted from Figma Design System
+// Source: UI Kit Core - Color Guidance v1.0.0
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Node: Color Guidance (36925:1463)
+//
+// Each palette contains 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
+// Additional: Gray palette includes "white" (#FFFFFF) and "black" (#000000)
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // BLUE PALETTE
+  // Figma: Blue core scale (11 shades)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-blue-50: #eff6ff;
+  --er-blue-100: #dbeafe;
+  --er-blue-200: #bfdbfe;
+  --er-blue-300: #93c5fd;
+  --er-blue-400: #60a5fa;
+  --er-blue-500: #3b82f6; // Base color
+  --er-blue-600: #2563eb;
+  --er-blue-700: #1d4ed8;
+  --er-blue-800: #1e40af;
+  --er-blue-900: #1e3a8a;
+  --er-blue-950: #172554;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BLUE ALPHA PALETTE
+  // Figma: Blue Alpha scale — #3B82F6 (blue-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-blue-alpha-50: #3b82f60a; // #3B82F6 @ 3.92%
+  --er-blue-alpha-75: #3b82f60f; // #3B82F6 @ 6%
+  --er-blue-alpha-100: #3b82f614; // #3B82F6 @ 7.84%
+  --er-blue-alpha-200: #3b82f61f; // #3B82F6 @ 12.16%
+  --er-blue-alpha-300: #3b82f633; // #3B82F6 @ 20%
+  --er-blue-alpha-400: #3b82f647; // #3B82F6 @ 27.84%
+  --er-blue-alpha-500: #3b82f666; // #3B82F6 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // GRAY PALETTE (Neutral)
+  // Frame ID: 36984:1523 & 36992:1160 (Extended with White/Black)
+  // Mapping: Neutral = Gray
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-gray-50: #fafafa;
+  --er-gray-100: #f4f4f5;
+  --er-gray-200: #e4e4e7;
+  --er-gray-300: #d4d4d8;
+  --er-gray-400: #a1a1aa;
+  --er-gray-500: #71717a; // Base color
+  --er-gray-600: #52525b;
+  --er-gray-700: #3f3f46;
+  --er-gray-800: #27272a;
+  --er-gray-900: #18181b;
+  --er-gray-950: #09090b;
+  --er-gray-black: #000000; // Black (Frame 36992:1160)
+  --er-gray-white: #ffffff; // White (Frame 36992:1160)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // GRAY ALPHA PALETTE
+  // Figma: Gray Alpha scale — #11161C with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-gray-alpha-50: #11161c0a; // #11161C @ 3.92%
+  --er-gray-alpha-75: #11161c0f; // #11161C @ 6%
+  --er-gray-alpha-100: #11161c14; // #11161C @ 7.84%
+  --er-gray-alpha-200: #11161c1f; // #11161C @ 12.16%
+  --er-gray-alpha-300: #11161c2e; // #11161C @ 18.04%
+  --er-gray-alpha-400: #11161c3d; // #11161C @ 23.92%
+  --er-gray-alpha-500: #11161c52; // #11161C @ 32.16%
+  --er-gray-alpha-600: #11161c66; // #11161C @ 40%
+  --er-gray-alpha-700: #11161c8f; // #11161C @ 56.08%
+  --er-gray-alpha-800: #11161cb8; // #11161C @ 72.16%
+  --er-gray-alpha-900: #11161ce0; // #11161C @ 87.84%
+  --er-gray-alpha-950: #11161cf5; // #11161C @ 96.08%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEAL PALETTE (Secondary)
+  // Frame ID: 36984:1330
+  // Mapping: Secondary = Teal
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-teal-50: #e6f9fb;
+  --er-teal-100: #c2f0f4;
+  --er-teal-200: #9be6ec;
+  --er-teal-300: #6ed9e2;
+  --er-teal-400: #4fd2da;
+  --er-teal-500: #27ccd6; // Base color
+  --er-teal-600: #1fb3bc;
+  --er-teal-700: #198f96;
+  --er-teal-800: #136b70;
+  --er-teal-900: #0d4a4f;
+  --er-teal-950: #072f33;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEAL ALPHA PALETTE
+  // Figma: Teal Alpha scale — #27CCD6 (teal-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-teal-alpha-50: #27ccd60a; // #27CCD6 @ 3.92%
+  --er-teal-alpha-100: #27ccd614; // #27CCD6 @ 7.84%
+  --er-teal-alpha-200: #27ccd61f; // #27CCD6 @ 12.16%
+  --er-teal-alpha-300: #27ccd633; // #27CCD6 @ 20%
+  --er-teal-alpha-400: #27ccd647; // #27CCD6 @ 27.84%
+  --er-teal-alpha-500: #27ccd666; // #27CCD6 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // LAVENDER PALETTE
+  // Mapping: Lavender = Purple/Violet
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-lavender-50: #f8f4ff;
+  --er-lavender-100: #e4d7fe;
+  --er-lavender-200: #d5c0fe;
+  --er-lavender-300: #ba95fd;
+  --er-lavender-400: #9f6afd;
+  --er-lavender-500: #8749ff; // Base color
+  --er-lavender-600: #7029ff;
+  --er-lavender-700: #5207df;
+  --er-lavender-800: #3d0099;
+  --er-lavender-900: #2a0066;
+  --er-lavender-950: #150033;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // LAVENDER ALPHA PALETTE
+  // Figma: Lavender Alpha scale — #8749FF (lavender-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-lavender-alpha-50: #8749ff0a; // #8749FF @ 3.92%
+  --er-lavender-alpha-100: #8749ff14; // #8749FF @ 7.84%
+  --er-lavender-alpha-200: #8749ff1f; // #8749FF @ 12.16%
+  --er-lavender-alpha-300: #8749ff33; // #8749FF @ 20%
+  --er-lavender-alpha-400: #8749ff47; // #8749FF @ 27.84%
+  --er-lavender-alpha-500: #8749ff66; // #8749FF @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // GREEN PALETTE (Success)
+  // Frame ID: 36984:1382
+  // Mapping: Success = Green
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-green-50: #ecfdf5;
+  --er-green-100: #d1fae5;
+  --er-green-200: #a7f3d0;
+  --er-green-300: #6ee7b7;
+  --er-green-400: #34d399;
+  --er-green-500: #10b981; // Base color
+  --er-green-600: #059669;
+  --er-green-700: #047857;
+  --er-green-800: #065f46;
+  --er-green-900: #064e3b;
+  --er-green-950: #022c22;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // GREEN ALPHA PALETTE
+  // Figma: Green Alpha scale — #10B981 (green-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-green-alpha-50: #10b9810a; // #10B981 @ 3.92%
+  --er-green-alpha-100: #10b98114; // #10B981 @ 7.84%
+  --er-green-alpha-200: #10b9811f; // #10B981 @ 12.16%
+  --er-green-alpha-300: #10b98133; // #10B981 @ 20%
+  --er-green-alpha-400: #10b98147; // #10B981 @ 27.84%
+  --er-green-alpha-500: #10b98166; // #10B981 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // YELLOW PALETTE (Warning)
+  // Frame ID: 36984:1476
+  // Mapping: Warning = Yellow
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-yellow-50: #fffbeb;
+  --er-yellow-100: #fef3c7;
+  --er-yellow-200: #fde68a;
+  --er-yellow-300: #fcd34d;
+  --er-yellow-400: #fbbf24;
+  --er-yellow-500: #f59e0b; // Base color
+  --er-yellow-600: #d97706;
+  --er-yellow-700: #b45309;
+  --er-yellow-800: #92400e;
+  --er-yellow-900: #78350f;
+  --er-yellow-950: #451a03;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // YELLOW ALPHA PALETTE
+  // Figma: Yellow Alpha scale — #F59E0B (yellow-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-yellow-alpha-50: #f59e0b0a; // #F59E0B @ 3.92%
+  --er-yellow-alpha-100: #f59e0b14; // #F59E0B @ 7.84%
+  --er-yellow-alpha-200: #f59e0b1f; // #F59E0B @ 12.16%
+  --er-yellow-alpha-300: #f59e0b33; // #F59E0B @ 20%
+  --er-yellow-alpha-400: #f59e0b47; // #F59E0B @ 27.84%
+  --er-yellow-alpha-500: #f59e0b66; // #F59E0B @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // RED PALETTE (Error)
+  // Frame ID: 36984:1429
+  // Mapping: Error = Red
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-red-50: #fef2f2;
+  --er-red-100: #fee2e2;
+  --er-red-200: #fecaca;
+  --er-red-300: #fca5a5;
+  --er-red-400: #f87171;
+  --er-red-500: #ef4444; // Base color
+  --er-red-600: #dc2626;
+  --er-red-700: #b91c1c;
+  --er-red-800: #991b1b;
+  --er-red-900: #7f1d1d;
+  --er-red-950: #450a0a;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // RED ALPHA PALETTE
+  // Figma: Red Alpha scale — #EF4444 (red-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-red-alpha-50: #ef44440a; // #EF4444 @ 3.92%
+  --er-red-alpha-100: #ef444414; // #EF4444 @ 7.84%
+  --er-red-alpha-200: #ef44441f; // #EF4444 @ 12.16%
+  --er-red-alpha-300: #ef444433; // #EF4444 @ 20%
+  --er-red-alpha-400: #ef444447; // #EF4444 @ 27.84%
+  --er-red-alpha-500: #ef444466; // #EF4444 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SKY CYAN PALETTE (Information)
+  // Frame ID: 36985:66
+  // Mapping: Information = Sky Cyan
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-sky-cyan-50: #f0f9ff;
+  --er-sky-cyan-100: #e0f2fe;
+  --er-sky-cyan-200: #bae6fd;
+  --er-sky-cyan-300: #7dd3fc;
+  --er-sky-cyan-400: #38bdf8;
+  --er-sky-cyan-500: #0ea5e9; // Base color
+  --er-sky-cyan-600: #0284c7;
+  --er-sky-cyan-700: #0369a1;
+  --er-sky-cyan-800: #075985;
+  --er-sky-cyan-900: #0c4a6e;
+  --er-sky-cyan-950: #082f49;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SKY CYAN ALPHA PALETTE
+  // Figma: Sky Cyan Alpha scale — #0EA5E9 (sky-cyan-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-sky-cyan-alpha-50: #0ea5e90a; // #0EA5E9 @ 3.92%
+  --er-sky-cyan-alpha-100: #0ea5e914; // #0EA5E9 @ 7.84%
+  --er-sky-cyan-alpha-200: #0ea5e91f; // #0EA5E9 @ 12.16%
+  --er-sky-cyan-alpha-300: #0ea5e933; // #0EA5E9 @ 20%
+  --er-sky-cyan-alpha-400: #0ea5e947; // #0EA5E9 @ 27.84%
+  --er-sky-cyan-alpha-500: #0ea5e966; // #0EA5E9 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // NEON GREEN PALETTE (Primary)
+  // Frame ID:PALETTE 36984:1283
+  // Mapping: Primary = Neon Green
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-neon-green-50: #eafbf1;
+  --er-neon-green-100: #d5f7e3;
+  --er-neon-green-200: #abefc7;
+  --er-neon-green-300: #80e7ab;
+  --er-neon-green-400: #56df8f;
+  --er-neon-green-500: #2fcc63; // Base color
+  --er-neon-green-600: #26a34f;
+  --er-neon-green-700: #1d7a3c;
+  --er-neon-green-800: #166333;
+  --er-neon-green-900: #0f4f2b;
+  --er-neon-green-950: #124a2d;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // NEON GREEN ALPHA PALETTE
+  // Figma: Neon Green Alpha scale — #2FCC63 (neon-green-500) with alpha %
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-neon-green-alpha-50: #2fcc630a; // #2FCC63 @ 3.92%
+  --er-neon-green-alpha-75: #2fcc630f; // #2FCC63 @ 6%
+  --er-neon-green-alpha-100: #2fcc6314; // #2FCC63 @ 7.84%
+  --er-neon-green-alpha-200: #2fcc631f; // #2FCC63 @ 12.16%
+  --er-neon-green-alpha-300: #2fcc6333; // #2FCC63 @ 20%
+  --er-neon-green-alpha-400: #2fcc6347; // #2FCC63 @ 27.84%
+  --er-neon-green-alpha-500: #2fcc6366; // #2FCC63 @ 40%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // WHITE ALPHA PALETTE
+  // Figma: White Alpha scale — #F8F9FB with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-white-alpha-50: #f8f9fb0a; // #F8F9FB @ 3.92%
+  --er-white-alpha-100: #f8f9fb14; // #F8F9FB @ 7.84%
+  --er-white-alpha-200: #f8f9fb1f; // #F8F9FB @ 12.16%
+  --er-white-alpha-300: #f8f9fb2e; // #F8F9FB @ 18.04%
+  --er-white-alpha-400: #f8f9fb3d; // #F8F9FB @ 23.92%
+  --er-white-alpha-500: #f8f9fb52; // #F8F9FB @ 32.16%
+  --er-white-alpha-600: #f8f9fb66; // #F8F9FB @ 40%
+  --er-white-alpha-700: #f8f9fb8f; // #F8F9FB @ 56.08%
+  --er-white-alpha-800: #f8f9fbb8; // #F8F9FB @ 72.16%
+  --er-white-alpha-900: #f8f9fbe0; // #F8F9FB @ 87.84%
+  --er-white-alpha-950: #f8f9fbf5; // #F8F9FB @ 96.08%
+}