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

package/dist/design-system/themes/netr/themes/_dark-mode.scss

@@ -0,0 +1,177 @@
+// ============================================================================
+// DARK MODE TOKEN OVERRIDES
+// ============================================================================
+// Source: Figma UI Kit Core — Color Guidance — Dark Component Tokens
+// File: https://www.figma.com/design/HSOs8VcK5CKL8s15AqD42x/UI-KIT-CORE
+// Nodes:
+//   action  — 40424:8223
+//   surface — 40424:8245
+//   text    — 40424:8258
+//   icon    — 40424:8271
+//   border  — 40424:8283
+//
+// Applied when:
+//   - html.dark          (global preference)
+//   - [data-theme="dark"] (attribute-based)
+//   - .dark              (class-based — used by showcase toggle)
+// ============================================================================
+
+html.dark,
+[data-theme='dark'],
+.dark {
+  // ─────────────────────────────────────────────────────────────────────────
+  // ACTION
+  // ─────────────────────────────────────────────────────────────────────────
+  // Primary action — unchanged between light/dark
+  --er-action-primary-default: var(--er-primary-600); // primary/600 (same as light)
+  --er-action-primary-hover: var(--er-primary-700); // primary/700 (same as light)
+  --er-action-primary-pressed: var(--er-primary-800); // primary/800 (same as light)
+
+  // Primary subtle — raised alpha steps for dark backgrounds
+  --er-action-primary-subtle: var(--er-primary-alpha-300); // primary alpha/300
+  --er-action-primary-subtle-hover: var(--er-primary-alpha-400); // primary alpha/400
+  --er-action-primary-subtle-pressed: var(--er-primary-alpha-500); // primary alpha/500
+
+  // Neutral action — inverted from dark to light
+  --er-action-neutral-default: var(
+    --er-neutral-white
+  ); // neutral/white = #FFFFFF (light: neutral/950)
+  --er-action-neutral-hover: var(--er-neutral-100); // neutral/100 = #F4F4F5 (light: neutral/600)
+  --er-action-neutral-pressed: var(--er-neutral-300); // neutral/300 = #D4D4D8 (light: neutral/800)
+
+  // Neutral subtle — black base + elevation (white alpha) overlays
+  --er-action-neutral-subtle-default: var(
+    --er-neutral-black
+  ); // neutral/black = #000000 (light: neutral/white)
+  --er-action-neutral-subtle-hover: var(
+    --er-elevation-50
+  ); // elevation/50 = #F8F9FB @ 3.92% (light: neutral alpha/50)
+  --er-action-neutral-subtle-pressed: var(
+    --er-elevation-100
+  ); // elevation/100 = #F8F9FB @ 7.84% (light: neutral alpha/100)
+
+  // Danger action
+  --er-action-danger-default: var(--er-danger-600); // danger/600 (same as light)
+  --er-action-danger-hover: var(--er-danger-700); // danger/700 (same as light)
+  --er-action-danger-pressed: var(--er-danger-800); // danger/800 (same as light)
+
+  // Danger subtle — raised alpha steps for dark backgrounds
+  --er-action-danger-subtle-default: var(--er-danger-alpha-300); // danger alpha/300
+  --er-action-danger-subtle-hover: var(--er-danger-alpha-400); // danger alpha/400
+  --er-action-danger-subtle-pressed: var(--er-danger-alpha-500); // danger alpha/500
+
+  // Success action — shifted to -600/-700/-800 in dark mode for better contrast (mirrors danger)
+  --er-action-success-default: var(--er-success-600); // success/600 = #059669 (light: success/500)
+  --er-action-success-hover: var(--er-success-700); // success/700 = #047857 (light: success/600)
+  --er-action-success-pressed: var(--er-success-800); // success/800 = #065F46 (light: success/700)
+
+  // Success subtle — unchanged (alpha-based, works on dark)
+  --er-action-success-subtle-default: var(--er-success-alpha-50); // success alpha/50 @ 3.92%
+  --er-action-success-subtle-hover: var(--er-success-alpha-100); // success alpha/100 @ 7.84%
+  --er-action-success-subtle-pressed: var(--er-success-alpha-200); // success alpha/200 @ 12.16%
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SURFACE
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-surface-page: var(--er-neutral-950); // surface/page = neutral/950 = #09090B
+  --er-surface-container: var(--er-neutral-900); // surface/container = neutral/900 = #18181B
+  --er-surface-elevated: var(--er-neutral-800); // surface/elevated = neutral/800 = #27272A
+  --er-surface-subtle: var(--er-neutral-800); // surface/subtle = neutral/800 = #27272A
+  --er-surface-muted: var(--er-neutral-700); // surface/muted = neutral/700 = #3F3F46
+  --er-surface-track: var(--er-elevation-100); // surface/track = elevation/50 (unchanged)
+  --er-surface-inverse: var(--er-neutral-50); // surface/inverse = neutral/50 = #FAFAFA
+
+  // Subtle surfaces — unchanged (alpha-based, work on dark)
+  --er-surface-neutral-subtle: var(--er-elevation-100); // surface/neutral-subtle = elevation/100 = #F8F9FB @ 7.84%
+  --er-surface-brand-subtle: var(--er-primary-alpha-100); // primary alpha/100 (unchanged)
+  --er-surface-success-subtle: var(--er-success-alpha-100); // success alpha/100 (unchanged)
+  --er-surface-warning-subtle: var(--er-warning-alpha-100); // warning alpha/100 (unchanged)
+  --er-surface-danger-subtle: var(--er-danger-alpha-100); // danger alpha/100 (unchanged)
+  --er-surface-information-subtle: var(--er-information-alpha-100); // information alpha/100 (unchanged)
+
+  // Fixed white — never changes between light/dark
+  --er-surface-fixed-white: var(--er-neutral-white); // always #FFFFFF
+
+  // Overlay / loading mask — dark translucent overlay so `.el-loading-mask`
+  // (v-loading / ElLoading) no longer washes out to white in dark mode.
+  // Maps to neutral/950 = #09090B at 90% (matches light-mode opacity).
+  --el-mask-color: rgba(9, 9, 11, 0.9);
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TEXT
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-text-primary: var(--er-elevation-950); // text/primary = elevation/950 = #F8F9FB @ 96.08%
+  --er-text-secondary: var(--er-elevation-800); // text/secondary = elevation/800 @ 72.16%
+  --er-text-tertiary: var(--er-elevation-600); // text/tertiary = elevation/600 @ 40%
+  --er-text-muted: var(--er-elevation-600); // text/muted = elevation/600 @ 40%
+  --er-text-inverse: var(--er-neutral-900); // text/inverse = neutral/900 = #18181B
+  --er-text-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-text-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-text-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-text-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-text-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-text-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // ICON
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-icon-primary: var(--er-elevation-950); // icon/primary = elevation/950
+  --er-icon-secondary: var(--er-elevation-800); // icon/secondary = elevation/800
+  --er-icon-tertiary: var(--er-elevation-700); // icon/tertiary = elevation/700 @ 56.08%
+  --er-icon-muted: var(--er-elevation-600); // icon/muted = elevation/600 @ 40%
+  --er-icon-inverse: var(--er-neutral-900); // icon/inverse = neutral/900 = #18181B
+  --er-icon-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-icon-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+  --er-icon-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-icon-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-icon-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-icon-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BORDER
+  // ─────────────────────────────────────────────────────────────────────────
+  --er-border-default: var(--er-elevation-200); // border/default = elevation/200 = #F8F9FB @ 12.16%
+  --er-border-subtle: var(--er-elevation-100); // border/subtle = elevation/100 @ 7.84%
+  --er-border-strong: var(--er-elevation-400); // border/strong = elevation/400 @ 23.92%
+  --er-border-on-action: var(--er-neutral-50); // neutral/50 = #FAFAFA (unchanged)
+
+  // Semantic borders — unchanged (alpha-based or solid brand hues)
+  --er-border-brand: var(--er-primary-default); // primary/default = #F97316 (unchanged)
+  --er-border-brand-subtle: var(--er-primary-alpha-300); // primary alpha/300 @ 20% (unchanged)
+
+  --er-border-success: var(--er-success-default); // success/default = #10B981 (unchanged)
+  --er-border-success-subtle: var(--er-success-alpha-300); // success alpha/300 @ 20% (unchanged)
+
+  --er-border-warning: var(--er-warning-default); // warning/default = #F59E0B (unchanged)
+  --er-border-warning-subtle: var(--er-warning-alpha-300); // warning alpha/300 @ 20% (unchanged)
+
+  --er-border-danger: var(--er-danger-default); // danger/default = #EF4444 (unchanged)
+  --er-border-danger-subtle: var(--er-danger-alpha-300); // danger alpha/300 @ 20% (unchanged)
+
+  --er-border-information: var(--er-information-default); // information/default = #0EA5E9 (unchanged)
+  --er-border-information-subtle: var(--er-information-alpha-300); // information alpha/300 @ 20% (unchanged)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHADOW
+  // ─────────────────────────────────────────────────────────────────────────
+  // Ambient shadows (black with varying opacity)
+  --er-shadow-ambient-01: rgba(0, 0, 0, 0.16); // 16% (light: 4%)
+  --er-shadow-ambient-02: rgba(0, 0, 0, 0.2); // 20% (light: 6%)
+  --er-shadow-ambient-03: rgba(0, 0, 0, 0.24); // 24% (light: 8%)
+  --er-shadow-ambient-04: rgba(0, 0, 0, 0.28); // 28% (light: 10%)
+  --er-shadow-ambient-05: rgba(0, 0, 0, 0.32); // 32% (light: 12%)
+
+  // Highlight shadows (white with varying opacity)
+  --er-shadow-highlight-01: rgba(255, 255, 255, 0.03); // 3% (light: 0%)
+  --er-shadow-highlight-02: rgba(255, 255, 255, 0.05); // 5% (light: 0%)
+  --er-shadow-highlight-03: rgba(255, 255, 255, 0.07); // 7% (light: 0%)
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // COMPONENT-SPECIFIC TOKENS
+  // ─────────────────────────────────────────────────────────────────────────
+  // Segmented control (Figma: component/segmented/*)
+  --er-component-segmented-item-hover: var(
+    --er-action-neutral-subtle-hover
+  ); // same as light
+  --er-component-segmented-item-active: var(--er-surface-muted); // surface/muted
+}

package/dist/design-system/themes/netr/tokens/_border-radius.scss

@@ -0,0 +1,28 @@
+// ============================================================================
+// BORDER RADIUS TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Corner radius scale
+// Node: 36930:106
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // CORNER RADIUS SCALE (13 values from Figma)
+  // Figma variables: shape/corner/* → SCSS: --er-shape-corner-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-corner-0: 0; // Figma: shape/corner/0 - core 0
+  --er-shape-corner-25: 2px; // Figma: shape/corner/25 - core 2
+  --er-shape-corner-50: 4px; // Figma: shape/corner/50 - core 4
+  --er-shape-corner-75: 6px; // Figma: shape/corner/75 - core 6
+  --er-shape-corner-100: 8px; // Figma: shape/corner/100 - core 8
+  --er-shape-corner-150: 12px; // Figma: shape/corner/150 - core 12
+  --er-shape-corner-200: 16px; // Figma: shape/corner/200 - core 16
+  --er-shape-corner-250: 20px; // Figma: shape/corner/250 - core 20
+  --er-shape-corner-300: 24px; // Figma: shape/corner/300 - core 24
+  --er-shape-corner-350: 28px; // Figma: shape/corner/350 - core 28
+  --er-shape-corner-400: 32px; // Figma: shape/corner/400 - core 32
+  --er-shape-corner-450: 48px; // Figma: shape/corner/450 - core 48
+  --er-shape-corner-full: 1000px; // Figma: shape/corner/full - core 1000, pill/stadium shape (CSS clamps to height/2)
+}

package/dist/design-system/themes/netr/tokens/_control-height.scss

@@ -0,0 +1,18 @@
+// ============================================================================
+// CONTROL / COMPONENT HEIGHT TOKENS
+// ============================================================================
+// Source: Figma UI Kit Production - Control height scale
+// Values alias the shape/spacing/* scale
+// Version: 1.1.0
+// ============================================================================
+
+:root {
+  --er-control-height-xxs: var(--er-shape-spacing-200); // 16px - Figma: xxs → shape/spacing/200
+  --er-control-height-xs: var(--er-shape-spacing-250); // 20px - Figma: xs → shape/spacing/250
+  --er-control-height-sm: var(--er-shape-spacing-300); // 24px - Figma: sm → shape/spacing/300
+  --er-control-height-md: var(--er-shape-spacing-400); // 32px - Figma: md → shape/spacing/400
+  --er-control-height-lg: var(--er-shape-spacing-500); // 40px - Figma: lg → shape/spacing/500
+  --er-control-height-xl: var(--er-shape-spacing-600); // 48px - Figma: xl → shape/spacing/600
+  --er-control-height-2xl: var(--er-shape-spacing-800); // 64px - Figma: 2xl → shape/spacing/800
+  --er-control-height-3xl: var(--er-shape-spacing-900); // 72px - Figma: 3xl → shape/spacing/900
+}

package/dist/design-system/themes/netr/tokens/_screen-size.scss

@@ -0,0 +1,10 @@
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (13 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-screen-desktop: 1376px;
+  --er-screen-tablet: 744px;
+  --er-screen-lg: 393px;
+}

package/dist/design-system/themes/netr/tokens/_spacing.scss

@@ -0,0 +1,29 @@
+// ============================================================================
+// SPACING TOKENS (Shape / Spacing)
+// ============================================================================
+// Source: Figma UI Kit Production - Shape - Spacing scale
+// Node: (from design tokens) — values follow Figma spacing scale
+// Version: 1.0.0
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // SHAPE / SPACING SCALE (14 values from Figma)
+  // Figma variables: shape/spacing/* → CSS: --er-shape-spacing-*
+  // ─────────────────────────────────────────────────────────────────────────
+
+  --er-shape-spacing-50: 4px; // Figma: shape/spacing/50 - core 4
+  --er-shape-spacing-75: 6px; // Figma: shape/spacing/75 - core 6
+  --er-shape-spacing-100: 8px; // Figma: shape/spacing/100 - core 8
+  --er-shape-spacing-150: 12px; // Figma: shape/spacing/150 - core 12
+  --er-shape-spacing-200: 16px; // Figma: shape/spacing/200 - core 16
+  --er-shape-spacing-250: 20px; // Figma: shape/spacing/250 - core 20
+  --er-shape-spacing-300: 24px; // Figma: shape/spacing/300 - core 24
+  --er-shape-spacing-400: 32px; // Figma: shape/spacing/400 - core 32
+  --er-shape-spacing-450: 36px; // Figma: shape/spacing/450 - core 36
+  --er-shape-spacing-500: 40px; // Figma: shape/spacing/500 - core 40
+  --er-shape-spacing-600: 48px; // Figma: shape/spacing/600 - core 48
+  --er-shape-spacing-700: 56px; // Figma: shape/spacing/700 - core 56
+  --er-shape-spacing-800: 64px; // Figma: shape/spacing/800 - core 64
+  --er-shape-spacing-900: 72px; // Figma: shape/spacing/900 - core 72
+}

package/dist/design-system/themes/netr/typography/_typography-primitives.scss

@@ -0,0 +1,11 @@
+:root {
+  // typography-primitives.scss
+  --er-font-brand: 'Geist';
+  --er-font-plain: 'Geist';
+
+  --er-font-weight-400: 500;
+  --er-font-weight-500: 500;
+  --er-font-weight-600: 600;
+  --er-font-weight-700: 700;
+  --er-font-weight-800: 800;
+}

package/dist/design-system/themes/netr/typography/_typography-semantic.scss

@@ -0,0 +1,5 @@
+:root{
+  --er-wg-regular: 400;
+  --er-wg-semi: 500;
+  --er-wg-bold: 600;
+}

package/dist/design-system/themes/netr/typography/_typography-tokens.scss

@@ -0,0 +1,185 @@
+// NOTE: Google Fonts (Geist) are loaded via <link> tags in nuxt.config.ts app.head
+// (preconnect + stylesheet) instead of a render-blocking CSS @import.
+
+// ============================================================================
+// TYPOGRAPHY TOKENS
+// ============================================================================
+// Typography system for clear, scalable, and consistent interfaces
+// Source: Figma UI Kit Production - Typography v1.0.0
+// File: https://www.figma.com/design/I9lA8XsNx4Tmn9d0dysJ2A/UI-KIT---PRODUCT
+// Frame: Typography (36924:101)
+//
+// Font: Geist
+// Naming: typo/{category}-{size}/{property}
+// Categories: dis (Display), head (Headline), title (Title), label (Label), body (Body)
+// Sizes: lg (Large), md (Medium), sm (Small)
+// Properties: font, sz, line-hg, wg, tracking
+// IMPORTANT: Variable names MUST match Figma exactly:
+// - font (NOT family)
+// - sz (NOT size)
+// - line-hg (NOT line-height)
+// - wg (NOT weight)
+// - tracking (NOT letter-spacing)
+// ============================================================================
+
+:root {
+  // ─────────────────────────────────────────────────────────────────────────
+  // DISPLAY (Largest text: Hero sections, marketing pages)
+  // Frame 36924:291 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Display Large - 57/64 Regular (Frame 36924:292)
+  // typo/dis-lg/{property}
+  --er-typo-dis-lg-font: var(--er-font-brand);
+  --er-typo-dis-lg-sz: 57px;
+  --er-typo-dis-lg-line-hg: 64px;
+  --er-typo-dis-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-lg-tracking: -0.25px;
+
+  // Display Medium - 45/52 Regular (Frame 36924:299)
+  // typo/dis-md/{property}
+  --er-typo-dis-md-font: var(--er-font-brand);
+  --er-typo-dis-md-sz: 45px;
+  --er-typo-dis-md-line-hg: 52px;
+  --er-typo-dis-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-md-tracking: 0;
+
+  // Display Small - 36/44 Regular (Frame 36924:306)
+  // typo/dis-sm/{property}
+  --er-typo-dis-sm-font: var(--er-font-brand);
+  --er-typo-dis-sm-sz: 36px;
+  --er-typo-dis-sm-line-hg: 44px;
+  --er-typo-dis-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-dis-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-dis-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // HEADLINE (Page titles, section headers)
+  // Frame 36924:313 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Headline Large - 32/40 Regular (Frame 36924:313)
+  // typo/head-lg/{property}
+  --er-typo-head-lg-font: var(--er-font-brand);
+  --er-typo-head-lg-sz: 32px;
+  --er-typo-head-lg-line-hg: 40px;
+  --er-typo-head-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-lg-tracking: 0;
+
+  // Headline Medium - 28/36 Regular (Frame 36924:320)
+  // typo/head-md/{property}
+  --er-typo-head-md-font: var(--er-font-brand);
+  --er-typo-head-md-sz: 28px;
+  --er-typo-head-md-line-hg: 36px;
+  --er-typo-head-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-md-tracking: 0;
+
+  // Headline Small - 24/32 Regular (Frame 36924:327)
+  // typo/head-sm/{property}
+  --er-typo-head-sm-font: var(--er-font-brand);
+  --er-typo-head-sm-sz: 24px;
+  --er-typo-head-sm-line-hg: 32px;
+  --er-typo-head-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-head-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-head-sm-tracking: 0;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // TITLE (Card titles, dialog headers, component headings)
+  // Frame 36924:334 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Title Large - 20/28 Regular (Frame 36924:334)
+  // typo/title-lg/{property}
+  --er-typo-title-lg-font: var(--er-font-brand);
+  --er-typo-title-lg-sz: 20px;
+  --er-typo-title-lg-line-hg: 28px;
+  --er-typo-title-lg-wg: var(--er-wg-semi); // Semi
+  --er-typo-title-lg-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-title-lg-tracking: 0;
+
+  // Title Medium - 16/24 Medium (Frame 36924:341)
+  // typo/title-md/{property}
+  --er-typo-title-md-font: var(--er-font-brand);
+  --er-typo-title-md-sz: 16px;
+  --er-typo-title-md-line-hg: 24px;
+  --er-typo-title-md-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-md-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-md-tracking: 0.15px;
+
+  // Title Small - 14/20 Medium (Frame 36924:348)
+  // typo/title-sm/{property}
+  --er-typo-title-sm-font: var(--er-font-brand);
+  --er-typo-title-sm-sz: 14px;
+  --er-typo-title-sm-line-hg: 20px;
+  --er-typo-title-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-title-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-title-sm-tracking: 0.1px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // LABEL (Form labels, button text, badges, chips)
+  // Frame 36924:355 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Label Large - 14/20 Medium (Frame 36924:355)
+  // typo/label-lg/{property}
+  --er-typo-label-lg-font: var(--er-font-brand);
+  --er-typo-label-lg-sz: 14px;
+  --er-typo-label-lg-line-hg: 20px;
+  --er-typo-label-lg-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-lg-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-lg-tracking: 0.1px;
+
+  // Label Medium - 12/16 Medium (Frame 36924:362)
+  // typo/label-md/{property}
+  --er-typo-label-md-font: var(--er-font-brand);
+  --er-typo-label-md-sz: 12px;
+  --er-typo-label-md-line-hg: 16px;
+  --er-typo-label-md-wg: var(--er-wg-semi); // Semi Bold
+  --er-typo-label-md-wg-em: var(--er-wg-bold); // Bold
+  --er-typo-label-md-tracking: 0.5px;
+
+  // Label Small - 11/16 Medium (Frame 36924:369)
+  // typo/label-sm/{property}
+  --er-typo-label-sm-font: var(--er-font-brand);
+  --er-typo-label-sm-sz: 11px;
+  --er-typo-label-sm-line-hg: 16px;
+  --er-typo-label-sm-wg: var(--er-wg-semi); // Medium
+  --er-typo-label-sm-wg-em: var(--er-wg-bold); // Semi Bold
+  --er-typo-label-sm-tracking: 0.5px;
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // BODY (Paragraphs, descriptions, table content)
+  // Frame 36924:376 onwards
+  // ─────────────────────────────────────────────────────────────────────────
+
+  // Body Large - 16/24 Regular (Frame 36924:376)
+  // typo/body-lg/{property}
+  --er-typo-body-lg-font: var(--er-font-brand);
+  --er-typo-body-lg-sz: 16px;
+  --er-typo-body-lg-line-hg: 24px;
+  --er-typo-body-lg-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-lg-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-lg-tracking: 0.5px;
+
+  // Body Medium - 14/20 Regular (Frame 36924:383)
+  // typo/body-md/{property}
+  --er-typo-body-md-font: var(--er-font-brand);
+  --er-typo-body-md-sz: 14px;
+  --er-typo-body-md-line-hg: 20px;
+  --er-typo-body-md-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-md-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-md-tracking: 0.25px;
+
+  // Body Small - 12/16 Regular (Frame 36924:390)
+  // typo/body-sm/{property}
+  --er-typo-body-sm-font: var(--er-font-brand);
+  --er-typo-body-sm-sz: 12px;
+  --er-typo-body-sm-line-hg: 16px;
+  --er-typo-body-sm-wg: var(--er-wg-regular); // Regular
+  --er-typo-body-sm-wg-em: var(--er-wg-semi); // Semi
+  --er-typo-body-sm-tracking: 0.4px;
+}