@almadar/ui 6.29.0 → 6.31.0

package/themes/game-rpg.css

@@ -1,75 +1,28 @@
 /**
- * Game RPG Theme — "Wood & Gold"
- *
- * Kenney's RPG adventure UI pack (carved wood panels + long buttons with
- * normal/pressed art) as a real theme, same contract as every other theme.
- * Dark near-black background so the warm wood chrome and gold accents read
- * as a classic JRPG dialog/menu skin.
- *
- * Chrome sprites: --game-panel-border-image / --game-button-bg-image are CSS
- * 9-slice / stretched backgrounds sourced from kenney-ui-adventure-pack's
- * brown panel + long-button sprites, consumed by the `.chrome-panel` /
- * `.chrome-button` utilities (tailwind-preset.cjs) that Card/Button/
- * GameShell/GameHud/GameMenu already apply unconditionally.
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/game-rpg.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
-[data-theme="game-rpg-dark"] {
-    /* Shadows — warm gold glow */
-    --shadow-main: 0 4px 14px rgba(240, 200, 105, 0.14), 0 1px 3px rgba(0, 0, 0, 0.45);
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 8px 30px rgba(240, 200, 105, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.45);
-    --shadow-none: none;
-    --shadow-hover: 0 12px 40px rgba(240, 200, 105, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
-    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.4);
-
-    /* Border radius — carved wood, only lightly rounded */
-    --radius-none: 0px;
-    --radius-sm: 3px;
-    --radius-md: 5px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* ======================================================================
-     * CORE COLORS
-     * ====================================================================== */
 
-    /* Primary — amber CTA (from the button sprite's highlight edge) */
+[data-theme="game-rpg-dark"] {
     --color-primary: #d99a4e;
     --color-primary-hover: #e6ac66;
     --color-primary-foreground: #1a1108;
-
-    /* Secondary — dark wood */
     --color-secondary: #4a3520;
     --color-secondary-hover: #5a4227;
     --color-secondary-foreground: #f5e6cf;
-
-    /* Accent — gold trim */
     --color-accent: #f0c869;
     --color-accent-foreground: #1a1108;
-
-    /* Muted */
     --color-muted: #3a2a18;
     --color-muted-foreground: #e0cba8;
-
-    /* Surfaces */
     --color-background: #1a1108;
     --color-foreground: #f5e6cf;
     --color-card: #6e4f30;
     --color-card-foreground: #fff5e0;
     --color-surface: #2a1d10;
-
-    /* Borders & Inputs */
     --color-border: #886644;
     --color-input: #4a3520;
     --color-ring: #f0c869;
-
-    /* Semantic colors */
     --color-error: #d9534f;
     --color-error-foreground: #1a0808;
     --color-success: #7ba05b;
@@ -78,50 +31,45 @@
     --color-warning-foreground: #1a1108;
     --color-info: #d99a4e;
     --color-info-foreground: #1a1108;
-
-    /* ======================================================================
-     * CHROME — sprite-driven panel/button skin (kenney-ui-adventure-pack, brown)
-     * ====================================================================== */
+    --radius-none: 0px;
+    --radius-sm: 3px;
+    --radius-md: 5px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --game-panel-border-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-adventure-pack/ui/panel_brown.png');
     --game-panel-border-image-slice: 26 fill;
     --game-panel-border-image-width: 22px;
     --game-button-bg-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-adventure-pack/ui/buttonLong_brown.png');
-
-    /* ======================================================================
-     * TYPOGRAPHY
-     * ====================================================================== */
-    --font-family:
-        "Kenney Mini", ui-sans-serif, system-ui, sans-serif;
+    --font-family: "Kenney Mini", ui-sans-serif, system-ui, sans-serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.02em;
     --line-height: 1.5;
-
-    /* Icon styling — gold tint */
-    --icon-stroke-width: 1.75;
     --icon-color: #f0c869;
-
-    /* Transitions */
     --transition-fast: 100ms;
     --transition-normal: 200ms;
     --transition-slow: 400ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
     --hover-scale: 1.01;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring — gold */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #f0c869;
-
-    /* Layer 1 — backfill (see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 0 4px 14px rgba(240, 200, 105, 0.14), 0 1px 3px rgba(0, 0, 0, 0.45);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 30px rgba(240, 200, 105, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.45);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(240, 200, 105, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.4);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -135,7 +83,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -145,17 +92,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: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -176,7 +120,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);
@@ -198,30 +141,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: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --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-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);

package/themes/game-sci-fi.css

@@ -1,79 +1,28 @@
 /**
- * Game Sci-Fi Theme — "Deep Space HUD"
- *
- * Kenney sci-fi UI pack (glass/metal HUD panels, cyan/blue accents) as a real
- * theme, following the same contract every other theme uses. Dark mode only —
- * this is a game UI, not a productivity app (see trait-wars.css precedent).
- *
- * Chrome sprites: --game-panel-border-image is a CSS 9-slice (border-image)
- * sourced from kenney-ui-pack-sci-fi's `metalPanel_blue` sprite, consumed by
- * the `.bg-chrome-panel` utility (tailwind-preset.cjs) that Card/GameShell/
- * GameHud/GameMenu already apply unconditionally. This pack ships no button
- * sprites, so --game-button-bg-image is left undeclared — Button renders with
- * flat theme-colored chrome instead (a legitimate sci-fi HUD look, and the
- * `.bg-chrome-button` utility's `none` fallback already handles this cleanly).
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/game-sci-fi.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
-[data-theme="game-sci-fi-dark"] {
-    /* Shadows — cool cyan glow */
-    --shadow-main:
-        0 4px 14px rgba(62, 166, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.35);
-    --shadow-sm: 0 2px 4px rgba(62, 166, 255, 0.08);
-    --shadow-lg:
-        0 8px 30px rgba(62, 166, 255, 0.20), 0 4px 10px rgba(0, 0, 0, 0.30);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.35);
-    --shadow-none: none;
-    --shadow-hover:
-        0 12px 40px rgba(62, 166, 255, 0.25), 0 4px 12px rgba(79, 195, 247, 0.12);
-    --shadow-active: 0 2px 8px rgba(62, 166, 255, 0.18);
-
-    /* Border radius — HUD panels are only lightly rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
 
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* ======================================================================
-     * CORE COLORS
-     * ====================================================================== */
-
-    /* Primary — HUD cyan (actions, interactive elements) */
+[data-theme="game-sci-fi-dark"] {
     --color-primary: #3ea6ff;
     --color-primary-hover: #6cc3ff;
     --color-primary-foreground: #071018;
-
-    /* Secondary — deep space panel */
     --color-secondary: #182338;
     --color-secondary-hover: #22314c;
     --color-secondary-foreground: #dceaf7;
-
-    /* Accent — energy yellow (score/highlight) */
     --color-accent: #ffcc4d;
     --color-accent-foreground: #1a1408;
-
-    /* Muted — dim HUD grey */
     --color-muted: #22314c;
     --color-muted-foreground: #8b9bb6;
-
-    /* Surfaces */
     --color-background: #0a0e1a;
     --color-foreground: #e8f4fb;
     --color-card: #141d30;
     --color-card-foreground: #e8f4fb;
     --color-surface: #141d30;
-
-    /* Borders & Inputs */
     --color-border: #3a4a66;
     --color-input: #182338;
     --color-ring: #3ea6ff;
-
-    /* Semantic colors */
     --color-error: #ff5c5c;
     --color-error-foreground: #1a0808;
     --color-success: #4ade80;
@@ -82,49 +31,44 @@
     --color-warning-foreground: #1a1408;
     --color-info: #3ea6ff;
     --color-info-foreground: #071018;
-
-    /* ======================================================================
-     * CHROME — sprite-driven panel skin (kenney-ui-pack-sci-fi/metalPanel_blue)
-     * ====================================================================== */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --game-panel-border-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack-sci-fi/ui/metalPanel_blue.png');
     --game-panel-border-image-slice: 26 fill;
     --game-panel-border-image-width: 22px;
-
-    /* ======================================================================
-     * TYPOGRAPHY
-     * ====================================================================== */
-    --font-family:
-        "Kenney Future", "Orbitron", "Rajdhani", ui-sans-serif, system-ui, sans-serif;
+    --font-family: "Kenney Future", "Orbitron", "Rajdhani", ui-sans-serif, system-ui, sans-serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.02em;
     --line-height: 1.5;
-
-    /* Icon styling — cyan tint */
-    --icon-stroke-width: 1.75;
     --icon-color: #3ea6ff;
-
-    /* Transitions — snappy HUD response */
     --transition-fast: 100ms;
     --transition-normal: 200ms;
     --transition-slow: 400ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
     --hover-scale: 1.01;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring — cyan */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #3ea6ff;
-
-    /* Layer 1 — backfill (see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 0 4px 14px rgba(62, 166, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.35);
+    --shadow-sm: 0 2px 4px rgba(62, 166, 255, 0.08);
+    --shadow-lg: 0 8px 30px rgba(62, 166, 255, 0.20), 0 4px 10px rgba(0, 0, 0, 0.30);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.35);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(62, 166, 255, 0.25), 0 4px 12px rgba(79, 195, 247, 0.12);
+    --shadow-active: 0 2px 8px rgba(62, 166, 255, 0.18);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -138,7 +82,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -148,17 +91,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: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -179,7 +119,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);
@@ -201,30 +140,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: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --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-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);

package/themes/game-ui-pack.css

@@ -1,76 +1,28 @@
 /**
- * Game UI Pack Theme — "Neutral Flat HUD"
- *
- * Kenney's grey/neutral UI pack (light, flat chip-style panels + buttons) as a
- * real theme, same contract as every other theme. Dark-mode background so the
- * light sprite chrome pops as high-contrast HUD chips (the sprite art itself
- * is near-white — pairing it with a light page background is what produced
- * the original washed-out look this project fixed).
- *
- * Chrome sprites: --game-panel-border-image / --game-button-bg-image are CSS
- * 9-slice / stretched backgrounds sourced from kenney-ui-pack's grey sheet,
- * consumed by the `.chrome-panel` / `.chrome-button` utilities
- * (tailwind-preset.cjs) that Card/Button/GameShell/GameHud/GameMenu already
- * apply unconditionally.
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/game-ui-pack.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
-[data-theme="game-ui-pack-dark"] {
-    /* Shadows */
-    --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
-    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.35);
-    --shadow-none: none;
-    --shadow-hover: 0 12px 40px rgba(46, 167, 225, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
-    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.3);
-
-    /* Border radius — flat chip UI, lightly rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* ======================================================================
-     * CORE COLORS
-     * ====================================================================== */
 
-    /* Primary — friendly flat blue */
+[data-theme="game-ui-pack-dark"] {
     --color-primary: #2ea7e1;
     --color-primary-hover: #4fb8ea;
     --color-primary-foreground: #06202c;
-
-    /* Secondary — neutral chip grey */
     --color-secondary: #3a3f47;
     --color-secondary-hover: #474d56;
     --color-secondary-foreground: #f2f3f4;
-
-    /* Accent — score/highlight gold */
     --color-accent: #ffb703;
     --color-accent-foreground: #241a00;
-
-    /* Muted */
     --color-muted: #b9bec6;
     --color-muted-foreground: #454a51;
-
-    /* Surfaces */
     --color-background: #1b1e22;
     --color-foreground: #f2f3f4;
     --color-card: #eeeeee;
     --color-card-foreground: #22262b;
     --color-surface: #24272c;
-
-    /* Borders & Inputs */
     --color-border: #999999;
     --color-input: #3a3f47;
     --color-ring: #2ea7e1;
-
-    /* Semantic colors */
     --color-error: #ff5c5c;
     --color-error-foreground: #1a0808;
     --color-success: #4ade80;
@@ -79,50 +31,45 @@
     --color-warning-foreground: #241a00;
     --color-info: #2ea7e1;
     --color-info-foreground: #06202c;
-
-    /* ======================================================================
-     * CHROME — sprite-driven panel/button skin (kenney-ui-pack grey sheet)
-     * ====================================================================== */
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
     --game-panel-border-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack/ui/grey_panel.png');
     --game-panel-border-image-slice: 26 fill;
     --game-panel-border-image-width: 22px;
     --game-button-bg-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack/ui/grey_button00.png');
-
-    /* ======================================================================
-     * TYPOGRAPHY
-     * ====================================================================== */
-    --font-family:
-        "Kenney Future", ui-sans-serif, system-ui, sans-serif;
+    --font-family: "Kenney Future", ui-sans-serif, system-ui, sans-serif;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --letter-spacing: 0.01em;
     --line-height: 1.5;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
     --icon-color: #2ea7e1;
-
-    /* Transitions */
     --transition-fast: 100ms;
     --transition-normal: 200ms;
     --transition-slow: 400ms;
     --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
     --hover-scale: 1.01;
     --hover-translate-y: -1px;
     --hover-translate-x: 0;
     --active-scale: 0.99;
     --active-translate-y: 0;
-
-    /* Focus ring */
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
     --focus-ring-color: #2ea7e1;
-
-    /* Layer 1 — backfill (see themes/_contract.md) */
-    /* Density axis — spacing scale */
+    --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.35);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(46, 167, 225, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.3);
     --space-0: 0px;
     --space-1: 4px;
     --space-2: 8px;
@@ -136,7 +83,6 @@
     --space-10: 40px;
     --space-11: 44px;
     --space-12: 48px;
-    /* Density axis — per-element heights */
     --button-height-sm: 28px;
     --button-height-md: 36px;
     --button-height-lg: 44px;
@@ -146,17 +92,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: 16px;
     --card-padding-lg: 24px;
     --dialog-padding: 24px;
     --section-gap: 32px;
-    /* Type axis — family triplet */
     --font-family-display: var(--font-family);
     --font-family-body: var(--font-family);
     --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    /* Type axis — size scale */
     --text-xs: 12px;
     --leading-xs: 16px;
     --text-sm: 14px;
@@ -177,7 +120,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);
@@ -199,30 +141,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: 600ms;
-    /* Motion axis — easing palette */
     --easing-linear: linear;
     --easing-standard: var(--transition-timing);
     --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
     --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    /* Iconography axis */
     --icon-family: lucide;
+    --icon-stroke-width: 1.75;
     --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-md);
     --radius-interactive: var(--radius-md);
     --radius-pill: var(--radius-full);
-    /* Geometry axis — border-width rhythm */
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);