@eaera-com/eaera-widgets-v2 0.1.80 → 0.1.81

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

@@ -0,0 +1,318 @@
+// ============================================================================
+// 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%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ORANGE PALETTE
+  // Source: CORE TOKENS (PUBLISH) — Orange core scale (var-set 9541:64774)
+  // File: https://www.figma.com/design/F4HxJOrQoKf8hs5IWTZphW
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-orange-50: #fff7ed;
+  --er-orange-100: #ffedd5;
+  --er-orange-200: #fed7aa;
+  --er-orange-300: #fdba74;
+  --er-orange-400: #fb923c;
+  --er-orange-500: #f97316; // Base color
+  --er-orange-600: #ea580c;
+  --er-orange-700: #c2410c;
+  --er-orange-800: #9a3412;
+  --er-orange-900: #7c2d12;
+  --er-orange-950: #431407;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ORANGE ALPHA PALETTE
+  // Figma: Orange Alpha scale — #F97316 (orange-500) with alpha percentages
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-orange-alpha-50: #f973160a; // #F97316 @ 3.92%
+  --er-orange-alpha-75: #f973160f; // #F97316 @ 6%
+  --er-orange-alpha-100: #f9731614; // #F97316 @ 7.84%
+  --er-orange-alpha-200: #f973161f; // #F97316 @ 12.16%
+  --er-orange-alpha-300: #f9731633; // #F97316 @ 20%
+  --er-orange-alpha-400: #f9731647; // #F97316 @ 27.84%
+  --er-orange-alpha-500: #f9731666; // #F97316 @ 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 = Orange (remapped in layer2-alias)
+  // ─────────────────────────────────────────────────────────────────────────
+  --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%
+}

package/dist/design-system/themes/netr/layers/_layer2-alias.scss

@@ -0,0 +1,250 @@
+// ============================================================================
+// LAYER 2: ALIAS TOKENS (Semantic Mappings)
+// ============================================================================
+// Maps Layer 1 tonal palettes to meaningful semantic names
+// Override these in per-project themes to customize brand colors
+// Source: Figma Color Guidance - Component Tokens mapping
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // NEUTRAL (Grayscale for text, borders, backgrounds)
+  // Mapping: Neutral → Gray
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-neutral-50: var(--er-gray-50);
+  --er-neutral-100: var(--er-gray-100);
+  --er-neutral-200: var(--er-gray-200);
+  --er-neutral-300: var(--er-gray-300);
+  --er-neutral-400: var(--er-gray-400);
+  --er-neutral-500: var(--er-gray-500);
+  --er-neutral-default: var(--er-gray-500);
+  --er-neutral-600: var(--er-gray-600);
+  --er-neutral-700: var(--er-gray-700);
+  --er-neutral-800: var(--er-gray-800);
+  --er-neutral-900: var(--er-gray-900);
+  --er-neutral-950: var(--er-gray-950);
+  --er-neutral-white: var(--er-gray-white); // #FFFFFF
+  --er-neutral-black: var(--er-gray-black); // #000000
+  --er-neutral-default: var(--er-gray-500); // Figma: neutral/default → color/gray/500
+
+  // Neutral Alpha → Gray Alpha (#11161C with alpha %)
+  --er-neutral-alpha-50: var(--er-gray-alpha-50);
+  --er-neutral-alpha-75: var(--er-gray-alpha-75);
+  --er-neutral-alpha-100: var(--er-gray-alpha-100);
+  --er-neutral-alpha-200: var(--er-gray-alpha-200);
+  --er-neutral-alpha-300: var(--er-gray-alpha-300);
+  --er-neutral-alpha-400: var(--er-gray-alpha-400);
+  --er-neutral-alpha-500: var(--er-gray-alpha-500);
+  --er-neutral-alpha-default: var(--er-gray-alpha-500);
+  --er-neutral-alpha-600: var(--er-gray-alpha-600);
+  --er-neutral-alpha-700: var(--er-gray-alpha-700);
+  --er-neutral-alpha-800: var(--er-gray-alpha-800);
+  --er-neutral-alpha-900: var(--er-gray-alpha-900);
+  --er-neutral-alpha-950: var(--er-gray-alpha-950);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ELEVATION (overlays on dark surfaces)
+  // Mapping: Elevation → White Alpha (#F8F9FB with alpha %)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-elevation-50: var(--er-white-alpha-50);
+  --er-elevation-100: var(--er-white-alpha-100);
+  --er-elevation-200: var(--er-white-alpha-200);
+  --er-elevation-300: var(--er-white-alpha-300);
+  --er-elevation-400: var(--er-white-alpha-400);
+  --er-elevation-500: var(--er-white-alpha-500);
+  --er-elevation-600: var(--er-white-alpha-600);
+  --er-elevation-700: var(--er-white-alpha-700);
+  --er-elevation-800: var(--er-white-alpha-800);
+  --er-elevation-900: var(--er-white-alpha-900);
+  --er-elevation-950: var(--er-white-alpha-950);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // PRIMARY (Main brand color)
+  // Mapping: Primary → Orange (Figma: CORE TOKENS var-set 13871:31857)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-primary-50: var(--er-orange-50);
+  --er-primary-100: var(--er-orange-100);
+  --er-primary-200: var(--er-orange-200);
+  --er-primary-300: var(--er-orange-300);
+  --er-primary-400: var(--er-orange-400);
+  --er-primary-500: var(--er-orange-500);
+  --er-primary-default: var(--er-orange-500);
+  --er-primary-600: var(--er-orange-600);
+  --er-primary-700: var(--er-orange-700);
+  --er-primary-800: var(--er-orange-800);
+  --er-primary-900: var(--er-orange-900);
+  --er-primary-950: var(--er-orange-950);
+  --er-primary-default: var(--er-orange-500); // Figma: primary/default → color/orange/500
+
+  // Primary Alpha → Orange Alpha (#F97316 with alpha %)
+  --er-primary-alpha-50: var(--er-orange-alpha-50);
+  --er-primary-alpha-75: var(--er-orange-alpha-75);
+  --er-primary-alpha-100: var(--er-orange-alpha-100);
+  --er-primary-alpha-200: var(--er-orange-alpha-200);
+  --er-primary-alpha-300: var(--er-orange-alpha-300);
+  --er-primary-alpha-400: var(--er-orange-alpha-400);
+  --er-primary-alpha-500: var(--er-orange-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SECONDARY (Accent color)
+  // Mapping: Secondary → Teal (Default, can be overridden in project themes)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-secondary-50: var(--er-teal-50);
+  --er-secondary-100: var(--er-teal-100);
+  --er-secondary-200: var(--er-teal-200);
+  --er-secondary-300: var(--er-teal-300);
+  --er-secondary-400: var(--er-teal-400);
+  --er-secondary-500: var(--er-teal-500);
+  --er-secondary-default: var(--er-teal-500);
+  --er-secondary-600: var(--er-teal-600);
+  --er-secondary-700: var(--er-teal-700);
+  --er-secondary-800: var(--er-teal-800);
+  --er-secondary-900: var(--er-teal-900);
+  --er-secondary-950: var(--er-teal-950);
+  --er-secondary-default: var(--er-teal-500); // Figma: secondary/default → color/teal/500
+
+  // Secondary Alpha → Teal Alpha (#27CCD6 with alpha %)
+  --er-secondary-alpha-50: var(--er-teal-alpha-50);
+  --er-secondary-alpha-100: var(--er-teal-alpha-100);
+  --er-secondary-alpha-200: var(--er-teal-alpha-200);
+  --er-secondary-alpha-300: var(--er-teal-alpha-300);
+  --er-secondary-alpha-400: var(--er-teal-alpha-400);
+  --er-secondary-alpha-500: var(--er-teal-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SUCCESS (Positive feedback)
+  // Mapping: Success → Green
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-success-50: var(--er-green-50);
+  --er-success-100: var(--er-green-100);
+  --er-success-200: var(--er-green-200);
+  --er-success-300: var(--er-green-300);
+  --er-success-400: var(--er-green-400);
+  --er-success-500: var(--er-green-500);
+  --er-success-default: var(--er-green-500);
+  --er-success-600: var(--er-green-600);
+  --er-success-700: var(--er-green-700);
+  --er-success-800: var(--er-green-800);
+  --er-success-900: var(--er-green-900);
+  --er-success-950: var(--er-green-950);
+  --er-success-default: var(--er-green-500); // Figma: success/default → color/green/500
+
+  // Success Alpha → Green Alpha (#10B981 with alpha %)
+  --er-success-alpha-50: var(--er-green-alpha-50);
+  --er-success-alpha-100: var(--er-green-alpha-100);
+  --er-success-alpha-200: var(--er-green-alpha-200);
+  --er-success-alpha-300: var(--er-green-alpha-300);
+  --er-success-alpha-400: var(--er-green-alpha-400);
+  --er-success-alpha-500: var(--er-green-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // WARNING (Caution states)
+  // Mapping: Warning → Yellow
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-warning-50: var(--er-yellow-50);
+  --er-warning-100: var(--er-yellow-100);
+  --er-warning-200: var(--er-yellow-200);
+  --er-warning-300: var(--er-yellow-300);
+  --er-warning-400: var(--er-yellow-400);
+  --er-warning-500: var(--er-yellow-500);
+  --er-warning-default: var(--er-yellow-500);
+  --er-warning-600: var(--er-yellow-600);
+  --er-warning-700: var(--er-yellow-700);
+  --er-warning-800: var(--er-yellow-800);
+  --er-warning-900: var(--er-yellow-900);
+  --er-warning-950: var(--er-yellow-950);
+  --er-warning-default: var(--er-yellow-500); // Figma: warning/default → color/yellow/500
+
+  // Warning Alpha → Yellow Alpha (#F59E0B with alpha %)
+  --er-warning-alpha-50: var(--er-yellow-alpha-50);
+  --er-warning-alpha-100: var(--er-yellow-alpha-100);
+  --er-warning-alpha-200: var(--er-yellow-alpha-200);
+  --er-warning-alpha-300: var(--er-yellow-alpha-300);
+  --er-warning-alpha-400: var(--er-yellow-alpha-400);
+  --er-warning-alpha-500: var(--er-yellow-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // DANGER (Destructive actions, errors)
+  // Mapping: Danger → Red
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-danger-50: var(--er-red-50);
+  --er-danger-100: var(--er-red-100);
+  --er-danger-200: var(--er-red-200);
+  --er-danger-300: var(--er-red-300);
+  --er-danger-400: var(--er-red-400);
+  --er-danger-500: var(--er-red-500);
+  --er-danger-default: var(--er-red-500);
+  --er-danger-600: var(--er-red-600);
+  --er-danger-700: var(--er-red-700);
+  --er-danger-800: var(--er-red-800);
+  --er-danger-900: var(--er-red-900);
+  --er-danger-950: var(--er-red-950);
+  --er-danger-default: var(--er-red-500); // Figma: danger/default → color/red/500
+
+  // Danger Alpha → Red Alpha (#EF4444 with alpha %)
+  --er-danger-alpha-50: var(--er-red-alpha-50);
+  --er-danger-alpha-100: var(--er-red-alpha-100);
+  --er-danger-alpha-200: var(--er-red-alpha-200);
+  --er-danger-alpha-300: var(--er-red-alpha-300);
+  --er-danger-alpha-400: var(--er-red-alpha-400);
+  --er-danger-alpha-500: var(--er-red-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // INFORMATION (Info messages, links)
+  // Mapping: Information → Sky Cyan
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-information-50: var(--er-sky-cyan-50);
+  --er-information-100: var(--er-sky-cyan-100);
+  --er-information-200: var(--er-sky-cyan-200);
+  --er-information-300: var(--er-sky-cyan-300);
+  --er-information-400: var(--er-sky-cyan-400);
+  --er-information-500: var(--er-sky-cyan-500);
+  --er-information-default: var(--er-sky-cyan-500);
+  --er-information-600: var(--er-sky-cyan-600);
+  --er-information-700: var(--er-sky-cyan-700);
+  --er-information-800: var(--er-sky-cyan-800);
+  --er-information-900: var(--er-sky-cyan-900);
+  --er-information-950: var(--er-sky-cyan-950);
+  --er-information-default: var(--er-sky-cyan-500); // Figma: information/default → color/sky cyan/500
+
+  // Information Alpha → Sky Cyan Alpha (#0EA5E9 with alpha %)
+  --er-information-alpha-50: var(--er-sky-cyan-alpha-50);
+  --er-information-alpha-100: var(--er-sky-cyan-alpha-100);
+  --er-information-alpha-200: var(--er-sky-cyan-alpha-200);
+  --er-information-alpha-300: var(--er-sky-cyan-alpha-300);
+  --er-information-alpha-400: var(--er-sky-cyan-alpha-400);
+  --er-information-alpha-500: var(--er-sky-cyan-alpha-500);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACCENT
+  // Mapping: Accent → Lavender (Default, can be overridden in project themes)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-accent-50: var(--er-lavender-50);
+  --er-accent-100: var(--er-lavender-100);
+  --er-accent-200: var(--er-lavender-200);
+  --er-accent-300: var(--er-lavender-300);
+  --er-accent-400: var(--er-lavender-400);
+  --er-accent-500: var(--er-lavender-500);
+  --er-accent-default: var(--er-lavender-500);
+  --er-accent-600: var(--er-lavender-600);
+  --er-accent-700: var(--er-lavender-700);
+  --er-accent-800: var(--er-lavender-800);
+  --er-accent-900: var(--er-lavender-900);
+  --er-accent-950: var(--er-lavender-950);
+  --er-accent-default: var(--er-lavender-500); // Figma: accent/default → color/lavender/500
+
+  // Accent Alpha → Lavender Alpha (#8749FF with alpha %)
+  --er-accent-alpha-50: var(--er-lavender-alpha-50);
+  --er-accent-alpha-100: var(--er-lavender-alpha-100);
+  --er-accent-alpha-200: var(--er-lavender-alpha-200);
+  --er-accent-alpha-300: var(--er-lavender-alpha-300);
+  --er-accent-alpha-400: var(--er-lavender-alpha-400);
+  --er-accent-alpha-500: var(--er-lavender-alpha-500);
+
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ALIASES FOR PURE COLORS (Backward compatibility)
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-white: var(--er-gray-white);
+  --er-black: var(--er-gray-black);
+}