@malva-ui/core 0.1.12

package/styles/malva-ui.css

@@ -0,0 +1,1706 @@
+@charset "UTF-8";
+@keyframes dialog-enter {
+  from {
+    opacity: var(--mlv-dialog-enter-from-opacity, 0);
+    transform: scale(var(--mlv-dialog-enter-from-scale, 0.95)) translateY(var(--mlv-dialog-enter-from-translate-y, 20px));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes dialog-leave {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: var(--mlv-dialog-leave-to-opacity, 0);
+    transform: scale(var(--mlv-dialog-leave-to-scale, 0.95)) translateY(var(--mlv-dialog-leave-to-translate-y, 20px));
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mlv-dialog--enter {
+    animation: dialog-enter var(--mlv-dialog-enter-duration, var(--mlv-duration-normal)) var(--mlv-dialog-enter-easing, var(--mlv-ease-out-strong)) forwards;
+  }
+  .mlv-dialog--leave {
+    animation: dialog-leave var(--mlv-dialog-leave-duration, var(--mlv-duration-fast)) var(--mlv-dialog-leave-easing, var(--mlv-ease-out-strong)) forwards;
+  }
+}
+@keyframes popup-enter {
+  from {
+    opacity: var(--mlv-popup-enter-from-opacity, 0);
+    transform: translateY(var(--mlv-popup-enter-from-translate-y, -0.25rem)) scale(var(--mlv-popup-enter-from-scale, 0.96));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes popup-leave {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: var(--mlv-popup-leave-to-opacity, 0);
+    transform: translateY(var(--mlv-popup-leave-to-translate-y, -0.25rem)) scale(var(--mlv-popup-leave-to-scale, 0.96));
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mlv-popup--enter {
+    transform-origin: var(--mlv-popup-transform-origin, top center);
+    animation: popup-enter var(--mlv-popup-enter-duration, var(--mlv-duration-fast)) var(--mlv-popup-enter-easing, var(--mlv-ease-out-strong)) forwards;
+  }
+  .mlv-popup--leave {
+    transform-origin: var(--mlv-popup-transform-origin, top center);
+    animation: popup-leave var(--mlv-popup-leave-duration, var(--mlv-duration-fast)) var(--mlv-popup-leave-easing, var(--mlv-ease-out-strong)) forwards;
+  }
+}
+@keyframes drawer-enter {
+  from {
+    transform: var(--mlv-drawer-hidden-transform);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes drawer-leave {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: var(--mlv-drawer-hidden-transform);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mlv-drawer--enter {
+    animation: drawer-enter var(--mlv-drawer-enter-duration, var(--mlv-duration-slow)) var(--mlv-drawer-enter-easing, var(--mlv-ease-drawer)) forwards;
+  }
+  .mlv-drawer--leave {
+    animation: drawer-leave var(--mlv-drawer-leave-duration, var(--mlv-duration-normal)) var(--mlv-drawer-leave-easing, var(--mlv-ease-drawer)) forwards;
+  }
+}
+@keyframes mlv-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes mlv-stagger-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--mlv-stagger-enter-offset-y, 0.5rem));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes mlv-stagger-enter-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes mlv-stagger-enter-scale {
+  from {
+    opacity: 0;
+    transform: scale(var(--mlv-stagger-enter-scale-from, 0.92));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes mlv-accordion--enter {
+  from {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  to {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+@keyframes mlv-accordion--leave {
+  from {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+  to {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+@keyframes mlv-presence-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--mlv-presence-enter-from-translate-y, 0.25rem)) scale(var(--mlv-presence-enter-from-scale, 0.98));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes mlv-presence-leave {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--mlv-presence-leave-to-translate-y, 0.25rem)) scale(var(--mlv-presence-leave-to-scale, 0.98));
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mlv-presence--enter {
+    animation: mlv-presence-enter var(--mlv-presence-enter-duration, var(--mlv-duration-normal)) var(--mlv-presence-enter-easing, var(--mlv-ease-out)) forwards;
+  }
+  .mlv-presence--leave {
+    animation: mlv-presence-leave var(--mlv-presence-leave-duration, var(--mlv-duration-fast)) var(--mlv-presence-leave-easing, var(--mlv-ease-in)) forwards;
+  }
+}
+/**
+ * Malva UI Theme
+ * Import this single file to get all design tokens.
+ *
+ * Generated by Claude Code — generate-css-theme skill
+ *
+ * Primary:   #526ed3
+ * Secondary: #ebebeb
+ * Accent:    #fd774d
+ * Prefix:    --mlv
+ *
+ * Files:
+ *   theme.scss             — core tokens (palettes, colors, elevation, type, spacing, motion)
+ *   components/button.scss — button variant tokens
+ *   components/muted.scss  — muted / semantic tint tokens
+ */
+/**
+ * Malva UI Theme — Core Tokens
+ * Generated by Claude Code — generate-css-theme skill
+ *
+ * Primary:   #526ed3
+ * Secondary: #ebebeb (neutral gray)
+ * Accent:    #fd774d (coral-orange)
+ * Neutral:   #64748b (slate, default)
+ *
+ * Sections:
+ *   1. Color Palettes
+ *   2. Semantic Backgrounds
+ *   3. Text Colors
+ *   4. Border Colors
+ *   5. Elevation & Shadows
+ *   6. Border Radius
+ *   7. Typography
+ *   8. Spacing & Sizing
+ *   9. Motion & Animation
+ *  10. Stroke & Focus
+ */
+/**
+ * Malva UI — CSS Cascade Layer order declaration
+ *
+ * Declares the ordering of the library's global style layers exactly once.
+ * Every global stylesheet that emits layered CSS `@use`s this partial first,
+ * and because Sass emits a module's CSS only once, the statement below is
+ * written to the compiled output a single time, ahead of any layered rule.
+ *
+ * Layer order (low → high priority within the library):
+ *   mlv.tokens      — design-token custom properties (theme.scss, muted.scss)
+ *   mlv.base        — global resets / element defaults (index.scss)
+ *   mlv.components  — reserved for future component-level layering
+ *
+ * IMPORTANT — the cascade-layer contract:
+ *   Unlayered styles always beat layered styles, regardless of specificity.
+ *   Consumer overrides written WITHOUT `@layer` therefore win over anything in
+ *   these layers with zero specificity battles. See libs/styles/CLAUDE.md.
+ */
+@layer mlv.tokens, mlv.base, mlv.components;
+@layer mlv.tokens {
+  :root,
+  :host,
+  [mlvTheme=light] {
+    --mlv-palette-primary-50: #eef1fd;
+    --mlv-palette-primary-100: #dce5fb;
+    --mlv-palette-primary-200: #baccf7;
+    --mlv-palette-primary-300: #8eaaf0;
+    --mlv-palette-primary-400: #6887e4;
+    --mlv-palette-primary-500: #526ed3;
+    --mlv-palette-primary-600: #3c55bb;
+    --mlv-palette-primary-700: #2d409c;
+    --mlv-palette-primary-800: #22307b;
+    --mlv-palette-primary-900: #18225a;
+    --mlv-palette-primary-950: #0f1539;
+    --mlv-palette-secondary-50: #f9f9f9;
+    --mlv-palette-secondary-100: #f3f3f3;
+    --mlv-palette-secondary-200: #ebebeb;
+    --mlv-palette-secondary-300: #d1d1d1;
+    --mlv-palette-secondary-400: #aaaaaa;
+    --mlv-palette-secondary-500: #808080;
+    --mlv-palette-secondary-600: #5e5e5e;
+    --mlv-palette-secondary-700: #3d3d3d;
+    --mlv-palette-secondary-800: #272727;
+    --mlv-palette-secondary-900: #181818;
+    --mlv-palette-secondary-950: #0d0d0d;
+    --mlv-palette-accent-50: #fff3ee;
+    --mlv-palette-accent-100: #ffe6d9;
+    --mlv-palette-accent-200: #ffcbb0;
+    --mlv-palette-accent-300: #fea882;
+    --mlv-palette-accent-400: #fd9265;
+    --mlv-palette-accent-500: #fd774d;
+    --mlv-palette-accent-600: #f45728;
+    --mlv-palette-accent-700: #d03e16;
+    --mlv-palette-accent-800: #a83011;
+    --mlv-palette-accent-900: #85250e;
+    --mlv-palette-accent-950: #4a1207;
+    --mlv-palette-neutral-50: #fafafa;
+    --mlv-palette-neutral-100: #f5f5f5;
+    --mlv-palette-neutral-200: #e5e5e5;
+    --mlv-palette-neutral-300: #d4d4d4;
+    --mlv-palette-neutral-400: #a3a3a3;
+    --mlv-palette-neutral-500: #737373;
+    --mlv-palette-neutral-600: #525252;
+    --mlv-palette-neutral-700: #404040;
+    --mlv-palette-neutral-800: #262626;
+    --mlv-palette-neutral-900: #171717;
+    --mlv-palette-neutral-950: #0a0a0a;
+    --mlv-palette-success-50: #f0fdf4;
+    --mlv-palette-success-100: #dcfce7;
+    --mlv-palette-success-200: #bbf7d0;
+    --mlv-palette-success-300: #86efac;
+    --mlv-palette-success-400: #4ade80;
+    --mlv-palette-success-500: #22c55e;
+    --mlv-palette-success-600: #16a34a;
+    --mlv-palette-success-700: #15803d;
+    --mlv-palette-success-800: #166534;
+    --mlv-palette-success-900: #14532d;
+    --mlv-palette-success-950: #052e16;
+    --mlv-palette-warning-50: #fffbeb;
+    --mlv-palette-warning-100: #fef3c7;
+    --mlv-palette-warning-200: #fde68a;
+    --mlv-palette-warning-300: #fcd34d;
+    --mlv-palette-warning-400: #fbbf24;
+    --mlv-palette-warning-500: #f59e0b;
+    --mlv-palette-warning-600: #d97706;
+    --mlv-palette-warning-700: #b45309;
+    --mlv-palette-warning-800: #92400e;
+    --mlv-palette-warning-900: #78350f;
+    --mlv-palette-warning-950: #451a03;
+    --mlv-palette-danger-50: #fff1f2;
+    --mlv-palette-danger-100: #ffe4e6;
+    --mlv-palette-danger-200: #fecdd3;
+    --mlv-palette-danger-300: #fda4af;
+    --mlv-palette-danger-400: #fb7185;
+    --mlv-palette-danger-500: #f43f5e;
+    --mlv-palette-danger-600: #e11d48;
+    --mlv-palette-danger-700: #be123c;
+    --mlv-palette-danger-800: #9f1239;
+    --mlv-palette-danger-900: #881337;
+    --mlv-palette-danger-950: #4c0519;
+    --mlv-palette-info-50: #f0f9ff;
+    --mlv-palette-info-100: #e0f2fe;
+    --mlv-palette-info-200: #bae6fd;
+    --mlv-palette-info-300: #7dd3fc;
+    --mlv-palette-info-400: #38bdf8;
+    --mlv-palette-info-500: #0ea5e9;
+    --mlv-palette-info-600: #0284c7;
+    --mlv-palette-info-700: #0369a1;
+    --mlv-palette-info-800: #075985;
+    --mlv-palette-info-900: #0c4a6e;
+    --mlv-palette-info-950: #082f49;
+    --mlv-background-base: var(--mlv-palette-neutral-50);
+    --mlv-background-subtle: var(--mlv-palette-neutral-100);
+    --mlv-background-raised: #ffffff;
+    --mlv-background-overlay: rgba(0, 0, 0, 0.22);
+    --mlv-background-sunken: var(--mlv-palette-neutral-100);
+    --mlv-background-accent-1: var(--mlv-palette-primary-500);
+    --mlv-background-accent-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 82%,
+      white
+    );
+    --mlv-background-accent-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 75%,
+      black
+    );
+    --mlv-background-accent-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 12%,
+      white
+    );
+    --mlv-background-accent-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 20%,
+      white
+    );
+    --mlv-background-accent-2: var(--mlv-palette-accent-500);
+    --mlv-background-accent-2-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 82%,
+      white
+    );
+    --mlv-background-accent-2-active: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 75%,
+      black
+    );
+    --mlv-background-accent-2-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 12%,
+      white
+    );
+    --mlv-background-accent-2-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 20%,
+      white
+    );
+    --mlv-background-neutral-1: var(--mlv-palette-neutral-100);
+    --mlv-background-neutral-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-100) 70%,
+      var(--mlv-palette-neutral-400)
+    );
+    --mlv-background-neutral-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-100) 50%,
+      var(--mlv-palette-neutral-400)
+    );
+    --mlv-background-neutral-2: var(--mlv-palette-neutral-200);
+    --mlv-background-danger-1: var(--mlv-palette-danger-600);
+    --mlv-background-danger-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-600) 85%,
+      black
+    );
+    --mlv-background-danger-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-600) 70%,
+      black
+    );
+    --mlv-background-danger-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 12%,
+      white
+    );
+    --mlv-background-danger-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 20%,
+      white
+    );
+    --mlv-background-success-1: var(--mlv-palette-success-600);
+    --mlv-background-success-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-success-600) 85%,
+      black
+    );
+    --mlv-background-success-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-success-600) 70%,
+      black
+    );
+    --mlv-background-success-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 12%,
+      white
+    );
+    --mlv-background-success-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 20%,
+      white
+    );
+    --mlv-background-success-pale: var(
+      --mlv-background-success-1-pale
+    ); /* alias */
+    --mlv-background-warning-1: var(--mlv-palette-warning-600);
+    --mlv-background-warning-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-600) 85%,
+      black
+    );
+    --mlv-background-warning-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-600) 70%,
+      black
+    );
+    --mlv-background-warning-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 12%,
+      white
+    );
+    --mlv-background-warning-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 20%,
+      white
+    );
+    --mlv-background-warning-pale: var(
+      --mlv-background-warning-1-pale
+    ); /* alias */
+    --mlv-background-info-1: var(--mlv-palette-info-600);
+    --mlv-background-info-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-info-600) 85%,
+      black
+    );
+    --mlv-background-info-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-info-600) 70%,
+      black
+    );
+    --mlv-background-info-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 12%,
+      white
+    );
+    --mlv-background-info-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 20%,
+      white
+    );
+    --mlv-background-info-pale: var(--mlv-background-info-1-pale); /* alias */
+    --mlv-text-primary: var(--mlv-palette-neutral-900);
+    --mlv-text-secondary: var(--mlv-palette-neutral-600);
+    --mlv-text-tertiary: var(--mlv-palette-neutral-400);
+    --mlv-text-disabled: var(--mlv-palette-neutral-300);
+    --mlv-text-inverse: #ffffff;
+    --mlv-text-action: var(--mlv-palette-primary-600);
+    --mlv-text-action-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-600) 80%,
+      black
+    );
+    --mlv-text-primary-on-accent-1: #ffffff;
+    --mlv-text-primary-on-accent-2: #ffffff;
+    --mlv-text-on-danger: #ffffff;
+    --mlv-text-on-success: #ffffff;
+    --mlv-text-on-warning: #ffffff;
+    --mlv-text-on-info: #ffffff;
+    --mlv-text-positive: var(--mlv-palette-success-700);
+    --mlv-text-negative: var(--mlv-palette-danger-700);
+    --mlv-text-warning: var(--mlv-palette-warning-700);
+    --mlv-text-info: var(--mlv-palette-info-700);
+    --mlv-text-heading: var(--mlv-palette-neutral-950);
+    --mlv-text-label: var(--mlv-palette-neutral-700);
+    --mlv-text-hint: var(--mlv-palette-neutral-500);
+    --mlv-text-caption: var(--mlv-palette-neutral-500);
+    --mlv-text-error: var(--mlv-palette-danger-600);
+    --mlv-text-placeholder: var(--mlv-palette-neutral-400);
+    --mlv-border-subtle: var(--mlv-palette-neutral-100);
+    --mlv-border-normal: var(--mlv-palette-neutral-200);
+    --mlv-border-strong: var(--mlv-palette-neutral-300);
+    --mlv-border-focus: var(--mlv-palette-primary-500);
+    --mlv-border-error: var(--mlv-palette-danger-500);
+    --mlv-border-success: var(--mlv-palette-success-500);
+    --mlv-border-warning: var(--mlv-palette-warning-500);
+    --mlv-border-info: var(--mlv-palette-info-500);
+    --mlv-shadow-0: none;
+    --mlv-shadow-1:
+      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
+    --mlv-shadow-2:
+      0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --mlv-shadow-3:
+      0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+    --mlv-shadow-4:
+      0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
+    --mlv-shadow-5: 0 25px 50px rgba(0, 0, 0, 0.25);
+    --mlv-shadow-flat: var(--mlv-shadow-0); /* same surface, no depth   */
+    --mlv-shadow-raised: var(--mlv-shadow-1); /* cards, slightly elevated  */
+    --mlv-shadow-floating: var(--mlv-shadow-3); /* dropdowns, popups, panels */
+    --mlv-shadow-overlay: var(--mlv-shadow-4); /* drawers, side overlays    */
+    --mlv-shadow-modal: var(--mlv-shadow-5); /* modal dialogs             */
+    --mlv-elevation-bg-1: var(--mlv-background-raised);
+    --mlv-elevation-bg-2: var(--mlv-background-raised);
+    --mlv-elevation-bg-3: var(--mlv-background-raised);
+    --mlv-elevation-bg-4: var(--mlv-background-raised);
+    --mlv-elevation-bg-5: var(--mlv-background-raised);
+    --mlv-radius-xs: 0.125rem; /* 2px  */
+    --mlv-radius-s: 0.25rem; /* 4px  */
+    --mlv-radius-m: 0.375rem; /* 6px  */
+    --mlv-radius-l: 0.5rem; /* 8px  */
+    --mlv-radius-xl: 0.75rem; /* 12px */
+    --mlv-radius-2xl: 1rem; /* 16px */
+    --mlv-radius-3xl: 1.5rem; /* 24px */
+    --mlv-radius-full: 9999px;
+    --mlv-radius-button: var(--mlv-radius-m);
+    --mlv-radius-input: var(--mlv-radius-m);
+    --mlv-radius-card: var(--mlv-radius-xl);
+    --mlv-radius-dialog: var(--mlv-radius-2xl);
+    --mlv-radius-badge: var(--mlv-radius-full);
+    --mlv-radius-tag: var(--mlv-radius-s);
+    --mlv-radius-tooltip: var(--mlv-radius-m);
+    --mlv-radius-panel: var(--mlv-radius-xl);
+    --mlv-popover-surface-radius: var(--mlv-radius-l);
+    --mlv-popover-inset: var(--mlv-spacing-1);
+    --mlv-popover-item-padding: var(--mlv-spacing-2);
+    --mlv-popover-item-radius: var(--mlv-radius-m);
+    --mlv-popover-item-bg-hover: var(--mlv-background-neutral-1);
+    --mlv-font-family-sans:
+      Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, sans-serif;
+    --mlv-font-family-mono:
+      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+    --mlv-font-family-display: var(--mlv-font-family-sans);
+    --mlv-typography-family-text: var(--mlv-font-family-sans);
+    --mlv-typography-family-heading: var(--mlv-font-family-display);
+    --mlv-typography-family-code: var(--mlv-font-family-mono);
+    --mlv-font-size-xs: 0.6875rem; /* 11px */
+    --mlv-font-size-s: 0.75rem; /* 12px */
+    --mlv-font-size-m: 0.875rem; /* 14px */
+    --mlv-font-size-l: 1rem; /* 16px */
+    --mlv-font-size-xl: 1.125rem; /* 18px */
+    --mlv-font-size-2xl: 1.25rem; /* 20px */
+    --mlv-font-size-3xl: 1.25rem; /* 20px — mobile base; 24px at lg (intentionally matches 2xl on sm) */
+    --mlv-font-size-4xl: 1.5rem; /* 24px — mobile base; 30px at lg */
+    --mlv-font-size-5xl: 1.75rem; /* 28px — mobile base; 36px at lg */
+    --mlv-font-size-6xl: 2.25rem; /* 36px — mobile base; 48px at lg */
+  }
+  @media (min-width: 768px) {
+    :root,
+    :host,
+    [mlvTheme=light] {
+      --mlv-font-size-3xl: 1.375rem; /* 22px */
+      --mlv-font-size-4xl: 1.625rem; /* 26px */
+      --mlv-font-size-5xl: 2rem; /* 32px */
+      --mlv-font-size-6xl: 2.5rem; /* 40px */
+    }
+  }
+  @media (min-width: 1200px) {
+    :root,
+    :host,
+    [mlvTheme=light] {
+      --mlv-font-size-3xl: 1.5rem; /* 24px — original value restored */
+      --mlv-font-size-4xl: 1.875rem; /* 30px — original value restored */
+      --mlv-font-size-5xl: 2.25rem; /* 36px — original value restored */
+      --mlv-font-size-6xl: 3rem; /* 48px — original value restored */
+    }
+  }
+  :root,
+  :host,
+  [mlvTheme=light] {
+    --mlv-font-weight-normal: 400;
+    --mlv-font-weight-medium: 500;
+    --mlv-font-weight-semibold: 600;
+    --mlv-font-weight-bold: 700;
+    --mlv-line-height-tight: 1.25;
+    --mlv-line-height-snug: 1.375;
+    --mlv-line-height-normal: 1.5;
+    --mlv-line-height-relaxed: 1.625;
+    --mlv-line-height-loose: 2;
+    --mlv-letter-spacing-tight: -0.025em;
+    --mlv-letter-spacing-normal: 0em;
+    --mlv-letter-spacing-wide: 0.025em;
+    --mlv-letter-spacing-wider: 0.05em;
+    --mlv-letter-spacing-widest: 0.1em;
+    --mlv-typography-heading-h1-size: var(--mlv-font-size-5xl);
+    --mlv-typography-heading-h1-weight: var(--mlv-font-weight-bold);
+    --mlv-typography-heading-h1-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-heading-h1-letter-spacing: var(--mlv-letter-spacing-tight);
+    --mlv-typography-heading-h2-size: var(--mlv-font-size-4xl);
+    --mlv-typography-heading-h2-weight: var(--mlv-font-weight-bold);
+    --mlv-typography-heading-h2-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-heading-h2-letter-spacing: var(--mlv-letter-spacing-tight);
+    --mlv-typography-heading-h3-size: var(--mlv-font-size-3xl);
+    --mlv-typography-heading-h3-weight: var(--mlv-font-weight-semibold);
+    --mlv-typography-heading-h3-line-height: var(--mlv-line-height-snug);
+    --mlv-typography-heading-h4-size: var(--mlv-font-size-2xl);
+    --mlv-typography-heading-h4-weight: var(--mlv-font-weight-semibold);
+    --mlv-typography-heading-h4-line-height: var(--mlv-line-height-snug);
+    --mlv-typography-heading-h5-size: var(--mlv-font-size-xl);
+    --mlv-typography-heading-h5-weight: var(--mlv-font-weight-semibold);
+    --mlv-typography-heading-h5-line-height: var(--mlv-line-height-normal);
+    --mlv-typography-heading-h6-size: var(--mlv-font-size-l);
+    --mlv-typography-heading-h6-weight: var(--mlv-font-weight-semibold);
+    --mlv-typography-heading-h6-line-height: var(--mlv-line-height-normal);
+    --mlv-typography-body-l-size: var(--mlv-font-size-l);
+    --mlv-typography-body-l-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-body-l-line-height: var(--mlv-line-height-relaxed);
+    --mlv-typography-body-m-size: var(--mlv-font-size-m);
+    --mlv-typography-body-m-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-body-m-line-height: var(--mlv-line-height-normal);
+    --mlv-typography-body-s-size: var(--mlv-font-size-s);
+    --mlv-typography-body-s-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-body-s-line-height: var(--mlv-line-height-normal);
+    --mlv-typography-ui-l-size: var(--mlv-font-size-l);
+    --mlv-typography-ui-l-weight: var(--mlv-font-weight-medium);
+    --mlv-typography-ui-l-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-ui-m-size: var(--mlv-font-size-m);
+    --mlv-typography-ui-m-weight: var(--mlv-font-weight-medium);
+    --mlv-typography-ui-m-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-ui-s-size: var(--mlv-font-size-s);
+    --mlv-typography-ui-s-weight: var(--mlv-font-weight-medium);
+    --mlv-typography-ui-s-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-label-size: var(--mlv-font-size-m);
+    --mlv-typography-label-weight: var(--mlv-font-weight-medium);
+    --mlv-typography-label-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-hint-size: var(--mlv-font-size-s);
+    --mlv-typography-hint-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-hint-line-height: var(--mlv-line-height-normal);
+    --mlv-typography-caption-size: var(--mlv-font-size-xs);
+    --mlv-typography-caption-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-caption-line-height: var(--mlv-line-height-tight);
+    --mlv-typography-code-size: var(--mlv-font-size-m);
+    --mlv-typography-code-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-code-family: var(--mlv-font-family-mono);
+    --mlv-typography-error-size: var(--mlv-font-size-s);
+    --mlv-typography-error-weight: var(--mlv-font-weight-normal);
+    --mlv-typography-error-line-height: var(--mlv-line-height-normal);
+    --mlv-spacing-0: 0;
+    --mlv-spacing-px: 0.0625rem; /* 1px  */
+    --mlv-spacing-0-5: 0.125rem; /* 2px  */
+    --mlv-spacing-1: 0.25rem; /* 4px  */
+    --mlv-spacing-1-5: 0.375rem; /* 6px  */
+    --mlv-spacing-2: 0.5rem; /* 8px  */
+    --mlv-spacing-2-5: 0.625rem; /* 10px */
+    --mlv-spacing-3: 0.75rem; /* 12px */
+    --mlv-spacing-3-5: 0.875rem; /* 14px */
+    --mlv-spacing-4: 1rem; /* 16px */
+    --mlv-spacing-5: 1.25rem; /* 20px */
+    --mlv-spacing-6: 1.5rem; /* 24px */
+    --mlv-spacing-8: 2rem; /* 32px */
+    --mlv-spacing-10: 2.5rem; /* 40px */
+    --mlv-spacing-12: 3rem; /* 48px */
+    --mlv-spacing-16: 4rem; /* 64px */
+    --mlv-height-xs: 2rem; /* 32px */
+    --mlv-height-s: 2.5rem; /* 40px */
+    --mlv-height-m: 2.75rem; /* 44px */
+    --mlv-height-l: 3.25rem; /* 52px */
+    --mlv-height-xl: 3.75rem; /* 60px */
+    --mlv-height-2xl: 4.25rem; /* 68px */
+    --mlv-padding-xs: var(--mlv-spacing-1) var(--mlv-spacing-2);
+    --mlv-padding-s: var(--mlv-spacing-1-5) var(--mlv-spacing-3);
+    --mlv-padding-m: var(--mlv-spacing-2) var(--mlv-spacing-4);
+    --mlv-padding-l: var(--mlv-spacing-3) var(--mlv-spacing-6);
+    --mlv-padding-xl: var(--mlv-spacing-3) var(--mlv-spacing-6);
+    --mlv-padding-2xl: var(--mlv-spacing-3) var(--mlv-spacing-6);
+    --mlv-duration-instant: 0ms;
+    --mlv-duration-fast: 100ms;
+    --mlv-duration-normal: 200ms;
+    --mlv-duration-slow: 300ms;
+    --mlv-duration-slower: 400ms;
+    --mlv-duration-sluggish: 600ms;
+    --mlv-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* material standard */
+    --mlv-ease-in: cubic-bezier(0.4, 0, 1, 1); /* accelerate — exit */
+    --mlv-ease-out: cubic-bezier(0, 0, 0.2, 1); /* decelerate — enter */
+    --mlv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* smooth bidirectional */
+    --mlv-ease-spring: cubic-bezier(
+      0.34,
+      1.56,
+      0.64,
+      1
+    ); /* springy overshoot */
+    --mlv-ease-linear: linear;
+    --mlv-ease-out-strong: cubic-bezier(
+      0.23,
+      1,
+      0.32,
+      1
+    ); /* strong decelerate — UI enters */
+    --mlv-ease-in-out-strong: cubic-bezier(
+      0.77,
+      0,
+      0.175,
+      1
+    ); /* strong bidirectional — on-screen movement */
+    --mlv-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS drawer curve */
+    --mlv-ease-spring-soft: cubic-bezier(
+      0.34,
+      1.2,
+      0.64,
+      1
+    ); /* subtle overshoot */
+    --mlv-ease-spring: cubic-bezier(
+      0.34,
+      1.56,
+      0.64,
+      1
+    ); /* standard overshoot */
+    --mlv-ease-spring-strong: cubic-bezier(
+      0.34,
+      1.9,
+      0.64,
+      1
+    ); /* pronounced overshoot */
+    --mlv-ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* bouncy snap */
+    --mlv-spring-stiffness-soft: 120;
+    --mlv-spring-stiffness: 200;
+    --mlv-spring-stiffness-strong: 400;
+    --mlv-spring-damping-loose: 8;
+    --mlv-spring-damping: 14;
+    --mlv-spring-damping-rigid: 22;
+    --mlv-spring-mass: 1;
+    --mlv-stagger-delay: 40ms; /* per-item delay increment */
+    --mlv-stagger-delay-fast: 20ms; /* tighter stagger for dense lists */
+    --mlv-stagger-delay-slow: 80ms; /* relaxed stagger for hero sections */
+    --mlv-stagger-index: 0; /* override per list item */
+    --mlv-transition-colors:
+      color, background-color, border-color, outline-color;
+    --mlv-transition-opacity: opacity;
+    --mlv-transition-transform: transform;
+    --mlv-transition-shadow: box-shadow;
+    --mlv-transition-all: all;
+    --mlv-z-base: 0;
+    --mlv-z-raised: 10;
+    --mlv-z-dropdown: 100;
+    --mlv-z-sticky: 200;
+    --mlv-z-overlay: 300;
+    --mlv-z-modal: 400;
+    --mlv-z-popover: 500;
+    --mlv-z-toast: 600;
+    --mlv-z-tooltip: 700;
+    --mlv-z-max: 9999;
+    --mlv-stroke-width: 0.0625rem; /* 1px */
+    --mlv-stroke-width-medium: 0.125rem; /* 2px */
+    --mlv-stroke-width-thick: 0.1875rem; /* 3px */
+    --mlv-focus-ring: 0 0 0 var(--mlv-stroke-width-medium)
+      var(--mlv-border-focus);
+    --mlv-focus-ring-offset: 0.125rem;
+    --mlv-disabled-opacity: 0.4;
+    --mlv-hover-overlay: 0.06;
+    --mlv-active-overlay: 0.12;
+    --mlv-focus-overlay: 0.08;
+  }
+  [mlvTheme=dark] {
+    --mlv-background-base: var(--mlv-palette-neutral-900);
+    --mlv-background-subtle: var(--mlv-palette-neutral-800);
+    --mlv-background-raised: #1e1e1e; /* neutral ~850 */
+    --mlv-background-sunken: var(--mlv-palette-neutral-950);
+    --mlv-background-accent-1: var(--mlv-palette-primary-500);
+    --mlv-background-accent-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 80%,
+      white
+    );
+    --mlv-background-accent-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 65%,
+      white
+    );
+    --mlv-background-accent-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-accent-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-accent-2: var(--mlv-palette-accent-500);
+    --mlv-background-accent-2-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 80%,
+      white
+    );
+    --mlv-background-accent-2-active: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 65%,
+      white
+    );
+    --mlv-background-accent-2-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-accent-2-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-neutral-1: var(--mlv-palette-neutral-800);
+    --mlv-background-neutral-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-800) 75%,
+      white
+    );
+    --mlv-background-neutral-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-800) 60%,
+      white
+    );
+    --mlv-background-neutral-2: var(--mlv-palette-neutral-700);
+    --mlv-background-danger-1: var(--mlv-palette-danger-600);
+    --mlv-background-danger-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-600) 80%,
+      white
+    );
+    --mlv-background-danger-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-600) 65%,
+      white
+    );
+    --mlv-background-danger-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-danger-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-success-1: var(--mlv-palette-success-600);
+    --mlv-background-success-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-success-600) 80%,
+      white
+    );
+    --mlv-background-success-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-success-600) 65%,
+      white
+    );
+    --mlv-background-success-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-success-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-success-pale: var(
+      --mlv-background-success-1-pale
+    ); /* alias */
+    --mlv-background-warning-1: var(--mlv-palette-warning-600);
+    --mlv-background-warning-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-600) 80%,
+      white
+    );
+    --mlv-background-warning-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-600) 65%,
+      white
+    );
+    --mlv-background-warning-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-warning-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-warning-pale: var(
+      --mlv-background-warning-1-pale
+    ); /* alias */
+    --mlv-background-info-1: var(--mlv-palette-info-600);
+    --mlv-background-info-1-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-info-600) 80%,
+      white
+    );
+    --mlv-background-info-1-active: color-mix(
+      in srgb,
+      var(--mlv-palette-info-600) 65%,
+      white
+    );
+    --mlv-background-info-1-pale: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-info-1-pale-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-background-info-pale: var(--mlv-background-info-1-pale); /* alias */
+    --mlv-text-primary: #ffffff;
+    --mlv-text-secondary: var(--mlv-palette-neutral-300);
+    --mlv-text-tertiary: var(--mlv-palette-neutral-500);
+    --mlv-text-disabled: var(--mlv-palette-neutral-600);
+    --mlv-text-inverse: var(--mlv-palette-neutral-900);
+    --mlv-text-action: var(--mlv-palette-primary-400);
+    --mlv-text-action-hover: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-400) 80%,
+      white
+    );
+    --mlv-text-primary-on-accent-1: #ffffff;
+    --mlv-text-primary-on-accent-2: #ffffff;
+    --mlv-text-on-danger: #ffffff;
+    --mlv-text-on-success: #ffffff;
+    --mlv-text-on-warning: #ffffff;
+    --mlv-text-on-info: #ffffff;
+    --mlv-text-positive: var(--mlv-palette-success-400);
+    --mlv-text-negative: var(--mlv-palette-danger-400);
+    --mlv-text-warning: var(--mlv-palette-warning-400);
+    --mlv-text-info: var(--mlv-palette-info-400);
+    --mlv-text-heading: #ffffff;
+    --mlv-text-label: var(--mlv-palette-neutral-200);
+    --mlv-text-hint: var(--mlv-palette-neutral-400);
+    --mlv-text-caption: var(--mlv-palette-neutral-400);
+    --mlv-text-error: var(--mlv-palette-danger-400);
+    --mlv-text-placeholder: var(--mlv-palette-neutral-500);
+    --mlv-border-subtle: var(--mlv-palette-neutral-800);
+    --mlv-border-normal: var(--mlv-palette-neutral-700);
+    --mlv-border-strong: var(--mlv-palette-neutral-600);
+    --mlv-border-focus: var(--mlv-palette-primary-400);
+    --mlv-border-error: var(--mlv-palette-danger-400);
+    --mlv-border-success: var(--mlv-palette-success-400);
+    --mlv-border-warning: var(--mlv-palette-warning-400);
+    --mlv-border-info: var(--mlv-palette-info-400);
+    --mlv-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --mlv-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
+    --mlv-shadow-3:
+      0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
+    --mlv-shadow-4:
+      0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
+    --mlv-shadow-5: 0 25px 50px rgba(0, 0, 0, 0.5);
+    --mlv-shadow-flat: var(--mlv-shadow-0);
+    --mlv-shadow-raised: var(--mlv-shadow-1);
+    --mlv-shadow-floating: var(--mlv-shadow-3);
+    --mlv-shadow-overlay: var(--mlv-shadow-4);
+    --mlv-shadow-modal: var(--mlv-shadow-5);
+    --mlv-elevation-bg-1: #1e1e1e; /* neutral ~850 */
+    --mlv-elevation-bg-2: var(--mlv-palette-neutral-800);
+    --mlv-elevation-bg-3: #333333; /* neutral ~750 */
+    --mlv-elevation-bg-4: var(--mlv-palette-neutral-700);
+    --mlv-elevation-bg-5: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-700) 75%,
+      white
+    );
+  }
+  [data-theme=high-contrast] {
+    --mlv-background-base: #ffffff;
+    --mlv-background-subtle: #f5f5f5;
+    --mlv-background-raised: #ffffff;
+    --mlv-background-sunken: #e8e8e8;
+    --mlv-background-accent-1: #0000cc;
+    --mlv-background-accent-1-hover: #000099;
+    --mlv-background-accent-1-active: #000066;
+    --mlv-background-accent-1-pale: #e0e0ff;
+    --mlv-background-accent-1-pale-hover: #c8c8ff;
+    --mlv-background-accent-2: #cc3300;
+    --mlv-background-accent-2-hover: #aa2800;
+    --mlv-background-accent-2-active: #881f00;
+    --mlv-background-accent-2-pale: #ffe8e0;
+    --mlv-background-accent-2-pale-hover: #ffd0c0;
+    --mlv-background-neutral-1: #e8e8e8;
+    --mlv-background-neutral-1-hover: #d0d0d0;
+    --mlv-background-neutral-1-active: #b8b8b8;
+    --mlv-background-neutral-2: #d0d0d0;
+    --mlv-background-danger-1: #cc0000;
+    --mlv-background-danger-1-hover: #990000;
+    --mlv-background-danger-1-active: #660000;
+    --mlv-background-danger-1-pale: #ffe0e0;
+    --mlv-background-danger-1-pale-hover: #ffc8c8;
+    --mlv-background-success-1: #006600;
+    --mlv-background-success-1-hover: #004400;
+    --mlv-background-success-1-active: #002200;
+    --mlv-background-success-1-pale: #e0ffe0;
+    --mlv-background-success-1-pale-hover: #c0ffc0;
+    --mlv-background-success-pale: var(
+      --mlv-background-success-1-pale
+    ); /* alias */
+    --mlv-background-warning-1: #804000;
+    --mlv-background-warning-1-hover: #602000;
+    --mlv-background-warning-1-active: #401000;
+    --mlv-background-warning-1-pale: #fff0cc;
+    --mlv-background-warning-1-pale-hover: #ffe0aa;
+    --mlv-background-warning-pale: var(
+      --mlv-background-warning-1-pale
+    ); /* alias */
+    --mlv-background-info-1: #003399;
+    --mlv-background-info-1-hover: #002277;
+    --mlv-background-info-1-active: #001155;
+    --mlv-background-info-1-pale: #e0f0ff;
+    --mlv-background-info-1-pale-hover: #c0e0ff;
+    --mlv-background-info-pale: var(--mlv-background-info-1-pale); /* alias */
+    --mlv-text-primary: #000000;
+    --mlv-text-secondary: #1a1a1a;
+    --mlv-text-tertiary: #333333;
+    --mlv-text-disabled: #666666;
+    --mlv-text-inverse: #ffffff;
+    --mlv-text-action: #0000ee;
+    --mlv-text-action-hover: #0000bb;
+    --mlv-text-primary-on-accent-1: #ffffff;
+    --mlv-text-primary-on-accent-2: #ffffff;
+    --mlv-text-on-danger: #ffffff;
+    --mlv-text-on-success: #ffffff;
+    --mlv-text-on-warning: #ffffff;
+    --mlv-text-on-info: #ffffff;
+    --mlv-text-positive: #006600;
+    --mlv-text-negative: #cc0000;
+    --mlv-text-warning: #804000;
+    --mlv-text-info: #003399;
+    --mlv-text-heading: #000000;
+    --mlv-text-label: #111111;
+    --mlv-text-hint: #444444;
+    --mlv-text-caption: #444444;
+    --mlv-text-error: #cc0000;
+    --mlv-text-placeholder: #666666;
+    --mlv-border-subtle: #999999;
+    --mlv-border-normal: #666666;
+    --mlv-border-strong: #000000;
+    --mlv-border-focus: #000000;
+    --mlv-border-error: #cc0000;
+    --mlv-border-success: #006600;
+    --mlv-border-warning: #804000;
+    --mlv-border-info: #003399;
+    --mlv-stroke-width: 0.125rem;
+    --mlv-stroke-width-medium: 0.1875rem;
+    --mlv-stroke-width-thick: 0.25rem;
+    --mlv-focus-ring: 0 0 0 var(--mlv-stroke-width-thick)
+      var(--mlv-border-focus);
+  }
+}
+/**
+ * Muted / Semantic Tint Tokens
+ * @import './components/muted.scss'
+ *
+ * 3 gradations per family: subtle bg (1), medium badge/tag (2), strong callout (3).
+ * Background tints derived via color-mix() so they stay in sync with palette changes.
+ *
+ * Families: default · primary · secondary · accent · success · warning · danger · info
+ */
+@layer mlv.tokens {
+  :root {
+    --mlv-muted-default-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 10%,
+      white
+    );
+    --mlv-muted-default-text-1: var(--mlv-palette-neutral-700);
+    --mlv-muted-default-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 35%,
+      white
+    );
+    --mlv-muted-default-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 18%,
+      white
+    );
+    --mlv-muted-default-text-2: var(--mlv-palette-neutral-800);
+    --mlv-muted-default-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 48%,
+      white
+    );
+    --mlv-muted-default-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 28%,
+      white
+    );
+    --mlv-muted-default-text-3: var(--mlv-palette-neutral-900);
+    --mlv-muted-default-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 60%,
+      white
+    );
+    --mlv-muted-primary-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 10%,
+      white
+    );
+    --mlv-muted-primary-text-1: var(--mlv-palette-primary-700);
+    --mlv-muted-primary-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 35%,
+      white
+    );
+    --mlv-muted-primary-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 18%,
+      white
+    );
+    --mlv-muted-primary-text-2: var(--mlv-palette-primary-800);
+    --mlv-muted-primary-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 48%,
+      white
+    );
+    --mlv-muted-primary-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 28%,
+      white
+    );
+    --mlv-muted-primary-text-3: var(--mlv-palette-primary-900);
+    --mlv-muted-primary-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 60%,
+      white
+    );
+    --mlv-muted-secondary-bg-1: var(--mlv-palette-secondary-50);
+    --mlv-muted-secondary-text-1: var(--mlv-palette-secondary-700);
+    --mlv-muted-secondary-border-1: var(--mlv-palette-secondary-200);
+    --mlv-muted-secondary-bg-2: var(--mlv-palette-secondary-100);
+    --mlv-muted-secondary-text-2: var(--mlv-palette-secondary-800);
+    --mlv-muted-secondary-border-2: var(--mlv-palette-secondary-300);
+    --mlv-muted-secondary-bg-3: var(--mlv-palette-secondary-200);
+    --mlv-muted-secondary-text-3: var(--mlv-palette-secondary-900);
+    --mlv-muted-secondary-border-3: var(--mlv-palette-secondary-400);
+    --mlv-muted-accent-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 10%,
+      white
+    );
+    --mlv-muted-accent-text-1: var(--mlv-palette-accent-700);
+    --mlv-muted-accent-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 35%,
+      white
+    );
+    --mlv-muted-accent-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 18%,
+      white
+    );
+    --mlv-muted-accent-text-2: var(--mlv-palette-accent-800);
+    --mlv-muted-accent-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 48%,
+      white
+    );
+    --mlv-muted-accent-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 28%,
+      white
+    );
+    --mlv-muted-accent-text-3: var(--mlv-palette-accent-900);
+    --mlv-muted-accent-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 60%,
+      white
+    );
+    --mlv-muted-success-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 10%,
+      white
+    );
+    --mlv-muted-success-text-1: var(--mlv-palette-success-700);
+    --mlv-muted-success-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 35%,
+      white
+    );
+    --mlv-muted-success-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 18%,
+      white
+    );
+    --mlv-muted-success-text-2: var(--mlv-palette-success-800);
+    --mlv-muted-success-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 48%,
+      white
+    );
+    --mlv-muted-success-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 28%,
+      white
+    );
+    --mlv-muted-success-text-3: var(--mlv-palette-success-900);
+    --mlv-muted-success-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 60%,
+      white
+    );
+    --mlv-muted-warning-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 10%,
+      white
+    );
+    --mlv-muted-warning-text-1: var(--mlv-palette-warning-700);
+    --mlv-muted-warning-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 35%,
+      white
+    );
+    --mlv-muted-warning-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 18%,
+      white
+    );
+    --mlv-muted-warning-text-2: var(--mlv-palette-warning-800);
+    --mlv-muted-warning-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 48%,
+      white
+    );
+    --mlv-muted-warning-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 28%,
+      white
+    );
+    --mlv-muted-warning-text-3: var(--mlv-palette-warning-900);
+    --mlv-muted-warning-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 60%,
+      white
+    );
+    --mlv-muted-danger-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 10%,
+      white
+    );
+    --mlv-muted-danger-text-1: var(--mlv-palette-danger-700);
+    --mlv-muted-danger-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 35%,
+      white
+    );
+    --mlv-muted-danger-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 18%,
+      white
+    );
+    --mlv-muted-danger-text-2: var(--mlv-palette-danger-800);
+    --mlv-muted-danger-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 48%,
+      white
+    );
+    --mlv-muted-danger-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 28%,
+      white
+    );
+    --mlv-muted-danger-text-3: var(--mlv-palette-danger-900);
+    --mlv-muted-danger-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 60%,
+      white
+    );
+    --mlv-muted-info-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 10%,
+      white
+    );
+    --mlv-muted-info-text-1: var(--mlv-palette-info-700);
+    --mlv-muted-info-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 35%,
+      white
+    );
+    --mlv-muted-info-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 18%,
+      white
+    );
+    --mlv-muted-info-text-2: var(--mlv-palette-info-800);
+    --mlv-muted-info-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 48%,
+      white
+    );
+    --mlv-muted-info-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 28%,
+      white
+    );
+    --mlv-muted-info-text-3: var(--mlv-palette-info-900);
+    --mlv-muted-info-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 60%,
+      white
+    );
+  }
+  [data-theme=dark] {
+    --mlv-muted-default-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-default-text-1: var(--mlv-palette-neutral-300);
+    --mlv-muted-default-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-default-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-default-text-2: var(--mlv-palette-neutral-200);
+    --mlv-muted-default-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-default-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-default-text-3: var(--mlv-palette-neutral-100);
+    --mlv-muted-default-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-text-1: var(--mlv-palette-primary-300);
+    --mlv-muted-primary-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-text-2: var(--mlv-palette-primary-200);
+    --mlv-muted-primary-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-primary-text-3: var(--mlv-palette-primary-100);
+    --mlv-muted-primary-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-text-1: var(--mlv-palette-secondary-300);
+    --mlv-muted-secondary-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-text-2: var(--mlv-palette-secondary-200);
+    --mlv-muted-secondary-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-secondary-text-3: var(--mlv-palette-secondary-100);
+    --mlv-muted-secondary-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-text-1: var(--mlv-palette-accent-300);
+    --mlv-muted-accent-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-text-2: var(--mlv-palette-accent-200);
+    --mlv-muted-accent-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-accent-text-3: var(--mlv-palette-accent-100);
+    --mlv-muted-accent-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-accent-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-text-1: var(--mlv-palette-success-300);
+    --mlv-muted-success-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-text-2: var(--mlv-palette-success-200);
+    --mlv-muted-success-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-success-text-3: var(--mlv-palette-success-100);
+    --mlv-muted-success-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-success-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-text-1: var(--mlv-palette-warning-300);
+    --mlv-muted-warning-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-text-2: var(--mlv-palette-warning-200);
+    --mlv-muted-warning-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-warning-text-3: var(--mlv-palette-warning-100);
+    --mlv-muted-warning-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-warning-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-text-1: var(--mlv-palette-danger-300);
+    --mlv-muted-danger-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-text-2: var(--mlv-palette-danger-200);
+    --mlv-muted-danger-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-danger-text-3: var(--mlv-palette-danger-100);
+    --mlv-muted-danger-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-danger-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-bg-1: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 15%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-text-1: var(--mlv-palette-info-300);
+    --mlv-muted-info-border-1: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 30%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-bg-2: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 25%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-text-2: var(--mlv-palette-info-200);
+    --mlv-muted-info-border-2: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 45%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-bg-3: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 35%,
+      var(--mlv-palette-neutral-900)
+    );
+    --mlv-muted-info-text-3: var(--mlv-palette-info-100);
+    --mlv-muted-info-border-3: color-mix(
+      in srgb,
+      var(--mlv-palette-info-500) 60%,
+      var(--mlv-palette-neutral-900)
+    );
+  }
+  [data-theme=high-contrast] {
+    --mlv-muted-default-bg-1: #f5f5f5;
+    --mlv-muted-default-text-1: #333333;
+    --mlv-muted-default-border-1: #999999;
+    --mlv-muted-default-bg-2: #e8e8e8;
+    --mlv-muted-default-text-2: #111111;
+    --mlv-muted-default-border-2: #666666;
+    --mlv-muted-default-bg-3: #d0d0d0;
+    --mlv-muted-default-text-3: #000000;
+    --mlv-muted-default-border-3: #000000;
+    --mlv-muted-primary-bg-1: #e0e0ff;
+    --mlv-muted-primary-text-1: #000066;
+    --mlv-muted-primary-border-1: #000066;
+    --mlv-muted-primary-bg-2: #c8c8ff;
+    --mlv-muted-primary-text-2: #000044;
+    --mlv-muted-primary-border-2: #000044;
+    --mlv-muted-primary-bg-3: #aaaaff;
+    --mlv-muted-primary-text-3: #000000;
+    --mlv-muted-primary-border-3: #000000;
+    --mlv-muted-secondary-bg-1: #f0f0f0;
+    --mlv-muted-secondary-text-1: #111111;
+    --mlv-muted-secondary-border-1: #666666;
+    --mlv-muted-secondary-bg-2: #e0e0e0;
+    --mlv-muted-secondary-text-2: #000000;
+    --mlv-muted-secondary-border-2: #444444;
+    --mlv-muted-secondary-bg-3: #cccccc;
+    --mlv-muted-secondary-text-3: #000000;
+    --mlv-muted-secondary-border-3: #000000;
+    --mlv-muted-success-bg-1: #e0ffe0;
+    --mlv-muted-success-text-1: #006600;
+    --mlv-muted-success-border-1: #006600;
+    --mlv-muted-success-bg-2: #c0ffc0;
+    --mlv-muted-success-text-2: #004400;
+    --mlv-muted-success-border-2: #004400;
+    --mlv-muted-success-bg-3: #99ee99;
+    --mlv-muted-success-text-3: #002200;
+    --mlv-muted-success-border-3: #002200;
+    --mlv-muted-warning-bg-1: #fff0cc;
+    --mlv-muted-warning-text-1: #804000;
+    --mlv-muted-warning-border-1: #804000;
+    --mlv-muted-warning-bg-2: #ffe0aa;
+    --mlv-muted-warning-text-2: #602000;
+    --mlv-muted-warning-border-2: #602000;
+    --mlv-muted-warning-bg-3: #ffcc77;
+    --mlv-muted-warning-text-3: #400000;
+    --mlv-muted-warning-border-3: #400000;
+    --mlv-muted-danger-bg-1: #ffe0e0;
+    --mlv-muted-danger-text-1: #cc0000;
+    --mlv-muted-danger-border-1: #cc0000;
+    --mlv-muted-danger-bg-2: #ffc8c8;
+    --mlv-muted-danger-text-2: #880000;
+    --mlv-muted-danger-border-2: #880000;
+    --mlv-muted-danger-bg-3: #ffaaaa;
+    --mlv-muted-danger-text-3: #550000;
+    --mlv-muted-danger-border-3: #550000;
+    --mlv-muted-accent-bg-1: #e0f8ff;
+    --mlv-muted-accent-text-1: #005577;
+    --mlv-muted-accent-border-1: #005577;
+    --mlv-muted-accent-bg-2: #c0f0ff;
+    --mlv-muted-accent-text-2: #003355;
+    --mlv-muted-accent-border-2: #003355;
+    --mlv-muted-accent-bg-3: #99e0ff;
+    --mlv-muted-accent-text-3: #001133;
+    --mlv-muted-accent-border-3: #001133;
+    --mlv-muted-info-bg-1: #e0f0ff;
+    --mlv-muted-info-text-1: #003399;
+    --mlv-muted-info-border-1: #003399;
+    --mlv-muted-info-bg-2: #c0e0ff;
+    --mlv-muted-info-text-2: #002277;
+    --mlv-muted-info-border-2: #002277;
+    --mlv-muted-info-bg-3: #99ccff;
+    --mlv-muted-info-text-3: #001155;
+    --mlv-muted-info-border-3: #001155;
+  }
+}
+/**
+ * Malva UI — dialog backdrop.
+ *
+ * The backdrop is DOM the CDK overlay creates; no Malva component owns it, so
+ * its base look lives here in the global entry point. The enter/leave
+ * transitions (`@starting-style`, `--leaving`) live in
+ * `libs/core/dialog/src/lib/dialog-container.scss`, which every dialog loads.
+ */
+@layer mlv.components {
+  .mlv-dialog-backdrop {
+    background-color: var(--mlv-background-overlay);
+    opacity: 1;
+    backdrop-filter: blur(0.375rem);
+    transition: opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong), backdrop-filter var(--mlv-duration-normal) var(--mlv-ease-out-strong);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mlv-dialog-backdrop {
+      transition: none;
+    }
+  }
+}
+@layer mlv.base {
+  [class*=mlv] {
+    font-family: var(--mlv-font-family-display);
+    font-size: var(--mlv-font-size-l);
+    color: var(--mlv-text-primary);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  [class*=mlv] * {
+    box-sizing: border-box;
+  }
+}
+.cdk-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+  outline: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  left: 0;
+}
+[dir=rtl] .cdk-visually-hidden {
+  left: auto;
+  right: 0;
+}