@almadar/ui 6.29.0 → 6.31.0

package/themes/prism.css

@@ -1,51 +1,20 @@
 /**
- * Prism Theme
- *
- * Compact tech aesthetic — Linear-influenced but louder. Tight 4pt rhythm,
- * mono-heavy numerics, electric violet + lime accents, mechanical linear motion.
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/prism.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
 [data-theme="prism-light"] {
-    /* Shadows - Flat-ish, hairline-led */
-    --shadow-none: none;
-    --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
-    --shadow-main: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
-    --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
-    --shadow-inner: inset 0 1px 1px rgba(15, 23, 42, 0.04);
-    --shadow-hover: 0 2px 6px rgba(124, 58, 237, 0.12);
-    --shadow-active: 0 1px 2px rgba(124, 58, 237, 0.08);
-
-    /* Border radius - Mixed: containers sharp-ish, interactive softer */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 10px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width - Hairline */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Electric violet primary, lime accent, clean off-white */
     --color-primary: #7c3aed;
     --color-primary-hover: #6d28d9;
     --color-primary-foreground: #ffffff;
-
     --color-secondary: #f1f5f9;
     --color-secondary-hover: #e2e8f0;
     --color-secondary-foreground: #0f172a;
-
     --color-accent: #84cc16;
     --color-accent-foreground: #1a2e05;
-
     --color-muted: #f1f5f9;
     --color-muted-foreground: #59677c;
-
     --color-background: #fafafa;
     --color-foreground: #0f172a;
     --color-card: #ffffff;
@@ -54,8 +23,6 @@
     --color-border: #e2e8f0;
     --color-input: #cbd5e1;
     --color-ring: #7c3aed;
-
-    /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
     --color-success: #15803d;
@@ -64,99 +31,70 @@
     --color-warning-foreground: #ffffff;
     --color-info: #2563eb;
     --color-info-foreground: #ffffff;
-
-    /* Icon styling - Thin */
-    --icon-stroke-width: 1.5;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --icon-color: currentColor;
-
-    /* Transitions - Snappy, mechanical linear */
     --transition-fast: 80ms;
     --transition-normal: 120ms;
     --transition-slow: 180ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms - Subtle */
     --hover-scale: 1.0;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring - Electric violet */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #7c3aed;
-
-    /* Motion axis - snappy, mechanical linear */
+    --shadow-none: none;
+    --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
+    --shadow-main: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
+    --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
+    --shadow-inner: inset 0 1px 1px rgba(15, 23, 42, 0.04);
+    --shadow-hover: 0 2px 6px rgba(124, 58, 237, 0.12);
+    --shadow-active: 0 1px 2px rgba(124, 58, 237, 0.08);
     --duration-instant: 0ms;
     --duration-fast: 80ms;
     --duration-normal: 120ms;
     --duration-slow: 180ms;
     --duration-dramatic: 240ms;
-    /* Motion axis - everything linear, mechanical */
     --easing-linear: linear;
     --easing-standard: linear;
     --easing-emphasized: linear;
     --easing-spring: linear;
-    /* Iconography axis - thin lucide */
     --icon-family: lucide;
+    --icon-stroke-width: 1.5;
     --icon-default-size: 14px;
-    /* Elevation axis - flat-ish */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-main);
     --elevation-toast: var(--shadow-sm);
-    /* Geometry axis - containers sharp-ish, interactive softer, pill full */
     --radius-container: 6px;
     --radius-interactive: 10px;
     --radius-pill: 9999px;
-    /* Geometry axis - hairline borders */
     --border-hairline: 1px;
     --border-standard: 1px;
     --border-heavy: 2px;
 }
 
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
 [data-theme="prism-dark"] {
-    /* Shadows - Flat, deep shadows */
-    --shadow-none: none;
-    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-main: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
-    --shadow-inner: inset 0 1px 1px rgba(0, 0, 0, 0.3);
-    --shadow-hover: 0 2px 8px rgba(167, 139, 250, 0.2);
-    --shadow-active: 0 1px 2px rgba(167, 139, 250, 0.15);
-
-    /* Border radius - Mixed: containers sharp-ish, interactive softer */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 10px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width - Hairline */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Brighter violet on very dark slate */
     --color-primary: #a78bfa;
     --color-primary-hover: #c4b5fd;
     --color-primary-foreground: #1e1b4b;
-
     --color-secondary: #1f1d3a;
     --color-secondary-hover: #2a2748;
     --color-secondary-foreground: #e2e8f0;
-
     --color-accent: #bef264;
     --color-accent-foreground: #1a2e05;
-
     --color-muted: #1f1d3a;
     --color-muted-foreground: #94a3b8;
-
     --color-background: #0c0a1a;
     --color-foreground: #e2e8f0;
     --color-card: #14122a;
@@ -165,8 +103,6 @@
     --color-border: #2a2748;
     --color-input: #3a3658;
     --color-ring: #a78bfa;
-
-    /* Semantic colors - Brighter for dark */
     --color-error: #f87171;
     --color-error-foreground: #000000;
     --color-success: #4ade80;
@@ -175,53 +111,54 @@
     --color-warning-foreground: #000000;
     --color-info: #60a5fa;
     --color-info-foreground: #000000;
-
-    /* Icon styling - Thin */
-    --icon-stroke-width: 1.5;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --icon-color: currentColor;
-
-    /* Transitions - Snappy linear */
     --transition-fast: 80ms;
     --transition-normal: 120ms;
     --transition-slow: 180ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms - Subtle */
     --hover-scale: 1.0;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring - Bright violet */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #a78bfa;
-
-    /* Motion axis - snappy, mechanical linear */
+    --shadow-none: none;
+    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-main: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-inner: inset 0 1px 1px rgba(0, 0, 0, 0.3);
+    --shadow-hover: 0 2px 8px rgba(167, 139, 250, 0.2);
+    --shadow-active: 0 1px 2px rgba(167, 139, 250, 0.15);
     --duration-instant: 0ms;
     --duration-fast: 80ms;
     --duration-normal: 120ms;
     --duration-slow: 180ms;
     --duration-dramatic: 240ms;
-    /* Motion axis - everything linear, mechanical */
     --easing-linear: linear;
     --easing-standard: linear;
     --easing-emphasized: linear;
     --easing-spring: linear;
-    /* Iconography axis - thin lucide */
     --icon-family: lucide;
+    --icon-stroke-width: 1.5;
     --icon-default-size: 14px;
-    /* Elevation axis - flat-ish */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-main);
     --elevation-toast: var(--shadow-sm);
-    /* Geometry axis - containers sharp-ish, interactive softer, pill full */
     --radius-container: 6px;
     --radius-interactive: 10px;
     --radius-pill: 9999px;
-    /* Geometry axis - hairline borders */
     --border-hairline: 1px;
     --border-standard: 1px;
     --border-heavy: 2px;

package/themes/retro.css

@@ -1,57 +1,20 @@
 /**
- * Retro Theme — "80s/90s Vaporwave Arcade"
- *
- * CRT-terminal energy: pixel display type (VT323) over deep indigo-purple,
- * hot magenta primary against electric cyan accents, hard offset shadows in
- * solid contrasting colors like a screen-printed arcade cabinet, razor-sharp
- * corners, and snappy linear micro-transitions that feel like a button press
- * on an 8-bit machine. Dark mode is the native habitat; light mode is a
- * lavender day-shift.
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/retro.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
 [data-theme="retro-light"] {
-    /* Shadows - Hard offset arcade silhouette, toned-down opacity */
-    --shadow-main: 4px 4px 0 0 rgba(196, 36, 107, 0.4);
-    --shadow-sm: 2px 2px 0 0 rgba(196, 36, 107, 0.3);
-    --shadow-lg:
-        6px 6px 0 0 rgba(196, 36, 107, 0.4);
-    --shadow-inner: inset 2px 2px 0 0 rgba(109, 40, 217, 0.12);
-    --shadow-none: none;
-    --shadow-hover:
-        6px 6px 0 0 rgba(0, 152, 170, 0.45);
-    --shadow-active: 1px 1px 0 0 rgba(196, 36, 107, 0.4);
-
-    /* Border radius - Sharp arcade corners */
-    --radius-none: 0px;
-    --radius-sm: 2px;
-    --radius-md: 4px;
-    --radius-lg: 4px;
-    --radius-xl: 4px;
-    --radius-full: 9999px;
-
-    /* Border width - Chunky outlined look */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - Lavender day-shift over deep indigo ink */
     --color-primary: #d12368;
     --color-primary-hover: #b81a57;
     --color-primary-foreground: #ffffff;
-
     --color-secondary: #e9d5ff;
     --color-secondary-hover: #d8b4fe;
     --color-secondary-foreground: #3b1a63;
-
     --color-accent: #00798c;
     --color-accent-foreground: #ffffff;
-
     --color-muted: #e9d5ff;
     --color-muted-foreground: #6b4a9e;
-
     --color-background: #f3e8ff;
     --color-foreground: #2a1650;
     --color-card: #ffffff;
@@ -60,8 +23,6 @@
     --color-border: rgba(196, 36, 107, 0.3);
     --color-input: rgba(0, 152, 170, 0.35);
     --color-ring: #0098aa;
-
-    /* Semantic colors */
     --color-error: #dc2626;
     --color-error-foreground: #ffffff;
     --color-success: #15803d;
@@ -70,40 +31,41 @@
     --color-warning-foreground: #000000;
     --color-info: #0e7490;
     --color-info-foreground: #ffffff;
-
-    /* Typography - Mono body, pixel display, wide tracking */
-    --font-family:
-        "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 4px;
+    --radius-xl: 4px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.04em;
     --line-height: 1.5;
-
-    /* Icon styling - Chunky strokes */
-    --icon-stroke-width: 2.5;
     --icon-color: #d12368;
-
-    /* Transitions - Snappy, mechanical, linear */
     --transition-fast: 50ms;
     --transition-normal: 80ms;
     --transition-slow: 120ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms - Button-press feel via shadow shift */
     --hover-scale: 1.0;
     --hover-translate-y: 0;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 2px;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #0098aa;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 4px 4px 0 0 rgba(196, 36, 107, 0.4);
+    --shadow-sm: 2px 2px 0 0 rgba(196, 36, 107, 0.3);
+    --shadow-lg: 6px 6px 0 0 rgba(196, 36, 107, 0.4);
+    --shadow-inner: inset 2px 2px 0 0 rgba(109, 40, 217, 0.12);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0 0 rgba(0, 152, 170, 0.45);
+    --shadow-active: 1px 1px 0 0 rgba(196, 36, 107, 0.4);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -117,7 +79,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 30px;
     --button-height-md: 38px;
     --button-height-lg: 46px;
@@ -127,17 +88,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 18px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
     --font-family-display: "VT323", "Courier New", monospace;
     --font-family-body: var(--font-family);
     --font-family-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -158,7 +116,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -180,78 +137,41 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 400ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: linear;
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 2.5;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-sm);
     --radius-interactive: var(--radius-sm);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
 }
 
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
 [data-theme="retro-dark"] {
-    /* Shadows - Hard offset arcade silhouette, toned-down neon opacity */
-    --shadow-main: 4px 4px 0 0 rgba(58, 201, 216, 0.4);
-    --shadow-sm: 2px 2px 0 0 rgba(58, 201, 216, 0.3);
-    --shadow-lg:
-        6px 6px 0 0 rgba(58, 201, 216, 0.4);
-    --shadow-inner: inset 2px 2px 0 0 rgba(224, 76, 138, 0.18);
-    --shadow-none: none;
-    --shadow-hover:
-        6px 6px 0 0 rgba(224, 76, 138, 0.4);
-    --shadow-active: 1px 1px 0 0 rgba(58, 201, 216, 0.4);
-
-    /* Border radius - Sharp arcade corners */
-    --radius-none: 0px;
-    --radius-sm: 2px;
-    --radius-md: 4px;
-    --radius-lg: 4px;
-    --radius-xl: 4px;
-    --radius-full: 9999px;
-
-    /* Border width - Chunky outlined look */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - Deep indigo-purple vaporwave night, softened neon */
     --color-primary: #e04c8a;
     --color-primary-hover: #ec6a9f;
     --color-primary-foreground: #2b0216;
-
     --color-secondary: #2d1b4e;
     --color-secondary-hover: #3b2566;
     --color-secondary-foreground: #efe3ff;
-
     --color-accent: #3ac9d8;
     --color-accent-foreground: #00252b;
-
     --color-muted: #2d1b4e;
     --color-muted-foreground: #9d86d6;
-
     --color-background: #1a0b2e;
     --color-foreground: #efe3ff;
     --color-card: #241242;
@@ -260,8 +180,6 @@
     --color-border: rgba(224, 76, 138, 0.32);
     --color-input: rgba(58, 201, 216, 0.34);
     --color-ring: #3ac9d8;
-
-    /* Semantic colors - Neon-bright for dark mode */
     --color-error: #ff5252;
     --color-error-foreground: #1a0000;
     --color-success: #2ee66e;
@@ -270,40 +188,41 @@
     --color-warning-foreground: #2a1a00;
     --color-info: #3ac9d8;
     --color-info-foreground: #00252b;
-
-    /* Typography - Mono body, pixel display, wide tracking */
-    --font-family:
-        "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --radius-none: 0px;
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 4px;
+    --radius-xl: 4px;
+    --radius-full: 9999px;
+    --border-width: 2px;
+    --border-width-thin: 1px;
+    --border-width-thick: 3px;
+    --font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.04em;
     --line-height: 1.5;
-
-    /* Icon styling - Chunky strokes */
-    --icon-stroke-width: 2.5;
     --icon-color: #3ac9d8;
-
-    /* Transitions - Snappy, mechanical, linear */
     --transition-fast: 50ms;
     --transition-normal: 80ms;
     --transition-slow: 120ms;
     --transition-timing: linear;
-
-    /* Hover/Active transforms - Button-press feel via shadow shift */
     --hover-scale: 1.0;
     --hover-translate-y: 0;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 2px;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #3ac9d8;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 4px 4px 0 0 rgba(58, 201, 216, 0.4);
+    --shadow-sm: 2px 2px 0 0 rgba(58, 201, 216, 0.3);
+    --shadow-lg: 6px 6px 0 0 rgba(58, 201, 216, 0.4);
+    --shadow-inner: inset 2px 2px 0 0 rgba(224, 76, 138, 0.18);
+    --shadow-none: none;
+    --shadow-hover: 6px 6px 0 0 rgba(224, 76, 138, 0.4);
+    --shadow-active: 1px 1px 0 0 rgba(58, 201, 216, 0.4);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -317,7 +236,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 30px;
     --button-height-md: 38px;
     --button-height-lg: 46px;
@@ -327,17 +245,14 @@
     --row-height-compact: 32px;
     --row-height-normal: 40px;
     --row-height-spacious: 48px;
-    /* Density axis — per-element padding */
     --card-padding-sm: 12px;
     --card-padding-md: 18px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet (aliases existing --font-family for backward compat) */
     --font-family-display: "VT323", "Courier New", monospace;
     --font-family-body: var(--font-family);
     --font-family-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -358,7 +273,6 @@
     --leading-display-1: 52px;
     --text-display-2: 60px;
     --leading-display-2: 64px;
-    /* Type axis — intent mapping */
     --intent-heading-major-size: var(--text-2xl);
     --intent-heading-major-weight: var(--font-weight-bold);
     --intent-heading-major-leading: var(--leading-2xl);
@@ -380,30 +294,25 @@
     --intent-numeric-size: var(--text-sm);
     --intent-numeric-weight: var(--font-weight-medium);
     --intent-numeric-leading: var(--leading-sm);
-    /* Motion axis — duration palette */
     --duration-instant: 0ms;
     --duration-fast: var(--transition-fast);
     --duration-normal: var(--transition-normal);
     --duration-slow: var(--transition-slow);
     --duration-dramatic: 400ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: linear;
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 2.5;
     --icon-default-size: 16px;
-    /* Elevation axis — per-layer mapping */
     --elevation-card: var(--shadow-sm);
     --elevation-popover: var(--shadow-main);
     --elevation-dialog: var(--shadow-lg);
     --elevation-toast: var(--shadow-main);
-    /* Geometry axis — radius rhythm with intent */
     --radius-container: var(--radius-sm);
     --radius-interactive: var(--radius-sm);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);