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

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);
+}

package/dist/design-system/themes/netr/layers/_layer3-tokens.scss

@@ -0,0 +1,242 @@
+// ============================================================================
+// LAYER 3: COMPONENT TOKENS
+// ============================================================================
+// Usage-specific tokens mapped from Layer 2 aliases
+// Source: Figma UI Kit Core - Color Guidance - Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Node: Color Guidance - Component Tokens (36925:1463)
+//
+// IMPORTANT: Only tokens defined in Figma are included here
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION (Buttons, interactive elements)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Action tokens — Primary (Figma: action/primary-*)
+  --er-action-primary-default: var(
+    --er-primary-600
+  ); // Figma: action/primary-default = primary/600
+  --er-action-primary-hover: var(
+    --er-primary-700
+  ); // Figma: action/primary-hover = primary/700
+  --er-action-primary-pressed: var(
+    --er-primary-800
+  ); // Figma: action/primary-pressed = primary/800
+  --er-action-primary-subtle: var(
+    --er-primary-alpha-100
+  ); // Figma: action/primary-subtle = primary alpha/100
+  --er-action-primary-subtle-hover: var(
+    --er-primary-alpha-200
+  ); // Figma: action/primary-subtle-hover = primary alpha/200
+  --er-action-primary-subtle-pressed: var(
+    --er-primary-alpha-300
+  ); // Figma: action/primary-subtle-pressed = primary alpha/300
+
+  // Action tokens — Neutral (Figma: action/neutral-*)
+  --er-action-neutral-default: var(
+    --er-neutral-950
+  ); // Figma: action/neutral-default = neutral/950 = #09090B
+  --er-action-neutral-hover: var(
+    --er-neutral-600
+  ); // Figma: action/neutral-hover = neutral/600 = #52525B
+  --er-action-neutral-pressed: var(
+    --er-neutral-800
+  ); // Figma: action/neutral-pressed = neutral/800 = #27272A
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-white
+  ); // Figma: action/neutral-subtle-default = neutral/white = #FFFFFF
+  --er-action-neutral-subtle-hover: var(
+    --er-neutral-alpha-50
+  ); // Figma: action/neutral-subtle-hover = neutral alpha/50 = #11161C @ 3.92%
+  --er-action-neutral-subtle-pressed: var(
+    --er-neutral-alpha-100
+  ); // Figma: action/neutral-subtle-pressed = neutral alpha/100 = #11161C @ 7.84%
+
+  // Action tokens — Danger (Figma: action/danger-*)
+  --er-action-danger-default: var(
+    --er-danger-600
+  ); // Figma: action/danger-default = danger/600
+  --er-action-danger-hover: var(
+    --er-danger-700
+  ); // Figma: action/danger-hover = danger/700
+  --er-action-danger-pressed: var(
+    --er-danger-800
+  ); // Figma: action/danger-pressed = danger/800
+  --er-action-danger-subtle-default: var(
+    --er-danger-alpha-100
+  ); // Figma: action/danger-subtle-default = danger alpha/100
+  --er-action-danger-subtle-hover: var(
+    --er-danger-alpha-200
+  ); // Figma: action/danger-subtle-hover = danger alpha/200
+  --er-action-danger-subtle-pressed: var(
+    --er-danger-alpha-300
+  ); // Figma: action/danger-subtle-pressed = danger alpha/300
+
+  // Action tokens — Success (local extension — not in Figma UI Kit, mirrors danger)
+  --er-action-success-default: var(
+    --er-success-default
+  ); // action/success-default = success/default = #10B981
+  --er-action-success-hover: var(
+    --er-success-600
+  ); // action/success-hover = success/600 = #059669
+  --er-action-success-pressed: var(
+    --er-success-700
+  ); // action/success-pressed = success/700 = #047857
+  --er-action-success-subtle-default: var(
+    --er-success-alpha-50
+  ); // action/success-subtle-default = success alpha/50 = #10B981 @ 3.92%
+  --er-action-success-subtle-hover: var(
+    --er-success-alpha-100
+  ); // action/success-subtle-hover = success alpha/100 = #10B981 @ 7.84%
+  --er-action-success-subtle-pressed: var(
+    --er-success-alpha-200
+  ); // action/success-subtle-pressed = success alpha/200 = #10B981 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE (Backgrounds, cards, panels)
+  // Frame 36984:1625 - Surface section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(
+    --er-neutral-white
+  ); // Figma: surface/page = neutral/white = #FFFFFF (main app canvas)
+  --er-surface-container: var(
+    --er-neutral-white
+  ); // Figma: surface/container = neutral/white = #FFFFFF (cards, panels)
+  --er-surface-elevated: var(
+    --er-neutral-white
+  ); // Figma: surface/elevated = neutral/white = #FFFFFF (modals, dropdowns, tooltips)
+  --er-surface-subtle: var(
+    --er-neutral-50
+  ); // Figma: surface/subtle = neutral/50 = #FAFAFA (alternating rows, quiet sections)
+  --er-surface-muted: var(
+    --er-neutral-100
+  ); // Figma: surface/muted = neutral/100 = #F4F4F5 (default/neutral tag bg)
+  --er-surface-track: var(
+    --er-neutral-100
+  ); // Figma: surface/track = elevation/50 = #F8F9FB @ 3.92%
+  --er-surface-inverse: var(
+    --er-neutral-900
+  ); // Figma: surface/inverse = neutral/900 = #18181B (dark headers, inverted sections)
+  --er-surface-neutral-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: surface/neutral-subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-surface-brand-subtle: var(
+    --er-primary-alpha-100
+  ); // Figma: surface/brand-subtle = primary alpha/100 = #F97316 @ 7.84%
+  --er-surface-success-subtle: var(
+    --er-success-alpha-100
+  ); // Figma: surface/success-subtle = success alpha/100 = #10B981 @ 7.84%
+  --er-surface-warning-subtle: var(
+    --er-warning-alpha-100
+  ); // Figma: surface/warning-subtle = warning alpha/100 = #F59E0B @ 7.84%
+  --er-surface-danger-subtle: var(
+    --er-danger-alpha-100
+  ); // Figma: surface/danger-subtle = danger alpha/100 = #EF4444 @ 7.84%
+  --er-surface-information-subtle: var(
+    --er-information-alpha-100
+  ); // Figma: surface/information-subtle = information alpha/100 = #0EA5E9 @ 7.84%
+  --er-surface-fixed-white: var(
+    --er-neutral-white
+  ); // Figma: surface/fixed-white = neutral/white = #FFFFFF
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT (Typography, labels, content)
+  // Frame 36984:1701 - Text section
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: text/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-text-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: text/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-text-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: text/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-text-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: text/muted = neutral alpha/600 = #11161C @ 40%
+  --er-text-inverse: var(--er-neutral-50); // Figma: text/inverse = neutral/50 = #FAFAFA
+  --er-text-brand: var(--er-primary-600); // Figma: text/brand = primary/600
+  --er-text-on-action: var(--er-neutral-50); // Figma: text/on-action = neutral/50 = #FAFAFA
+  --er-text-success: var(--er-success-700); // Figma: text/success = success/700
+  --er-text-warning: var(--er-warning-700); // Figma: text/warning = warning/700
+  --er-text-danger: var(--er-danger-700); // Figma: text/danger = danger/700
+  --er-text-information: var(
+    --er-information-700
+  ); // Figma: text/information = information/700
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON (Icons, decorative elements)
+  // Frame 36984:1770 - Icon section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(
+    --er-neutral-alpha-950
+  ); // Figma: icon/primary = neutral alpha/950 = #11161C @ 96.08%
+  --er-icon-secondary: var(
+    --er-neutral-alpha-800
+  ); // Figma: icon/secondary = neutral alpha/800 = #11161C @ 72.16%
+  --er-icon-tertiary: var(
+    --er-neutral-alpha-700
+  ); // Figma: icon/tertiary = neutral alpha/700 = #11161C @ 56.08%
+  --er-icon-muted: var(
+    --er-neutral-alpha-600
+  ); // Figma: icon/muted = neutral alpha/600 = #11161C @ 40%
+  --er-icon-inverse: var(--er-neutral-50); // Figma: icon/inverse = neutral/50 = #FAFAFA
+  --er-icon-brand: var(--er-primary-600); // Figma: icon/brand = primary/600
+  --er-icon-on-action: var(--er-neutral-50); // Figma: icon/on-action = neutral/50 = #FAFAFA
+  --er-icon-success: var(--er-success-700); // Figma: icon/success = success/700
+  --er-icon-warning: var(--er-warning-700); // Figma: icon/warning = warning/700
+  --er-icon-danger: var(--er-danger-700); // Figma: icon/danger = danger/700
+  --er-icon-information: var(
+    --er-information-700
+  ); // Figma: icon/information = information/700
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER (Borders, outlines, dividers)
+  // Frame 36984:1817 - Border section in Figma Component Tokens
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(
+    --er-neutral-alpha-200
+  ); // Figma: border/default = neutral alpha/200 = #11161C @ 12.16%
+  --er-border-subtle: var(
+    --er-neutral-alpha-100
+  ); // Figma: border/subtle = neutral alpha/100 = #11161C @ 7.84%
+  --er-border-strong: var(
+    --er-neutral-alpha-400
+  ); // Figma: border/strong = neutral alpha/400 = #11161C @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // Figma: border/on-action = neutral/50 = #FAFAFA
+  --er-border-brand: var(--er-primary-default); // Figma: border/brand = primary/default = #F97316
+  --er-border-brand-subtle: var(
+    --er-primary-alpha-300
+  ); // Figma: border/brand-subtle = primary alpha/300 = #F97316 @ 20%
+  --er-border-success: var(--er-success-default); // Figma: border/success = success/default = #10B981
+  --er-border-success-subtle: var(
+    --er-success-alpha-300
+  ); // Figma: border/success-subtle = success alpha/300 = #10B981 @ 20%
+  --er-border-warning: var(--er-warning-default); // Figma: border/warning = warning/default = #F59E0B
+  --er-border-warning-subtle: var(
+    --er-warning-alpha-300
+  ); // Figma: border/warning-subtle = warning alpha/300 = #F59E0B @ 20%
+  --er-border-danger: var(--er-danger-default); // Figma: border/danger = danger/default = #EF4444
+  --er-border-danger-subtle: var(
+    --er-danger-alpha-300
+  ); // Figma: border/danger-subtle = danger alpha/300 = #EF4444 @ 20%
+  --er-border-information: var(
+    --er-information-default
+  ); // Figma: border/information = information/default = #0EA5E9
+  --er-border-information-subtle: var(
+    --er-information-alpha-300
+  ); // Figma: border/information-subtle = information alpha/300 = #0EA5E9 @ 20%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(--er-action-neutral-subtle-hover);
+  --er-component-segmented-item-active: var(
+    --er-action-neutral-subtle-default
+  ); // segmented item active = action/neutral-subtle-default
+  --er-surface-overlay: rgb(0, 0, 0, 0.5);
+}