@vialiq/flux-ui 0.0.4 → 0.1.0

package/components/_button.scss

@@ -22,6 +22,9 @@
     line-height: #{tokens.$line-height-tight};
     cursor: pointer;
     user-select: none;
-    transition: opacity var(--vi-button-effect-transition-duration, 160ms) ease;
+    transition:
+      opacity     var(--vi-button-effect-transition-duration, 160ms) ease,
+      box-shadow  var(--vi-button-effect-transition-duration, 160ms) ease,
+      transform   var(--vi-button-effect-transition-duration, 160ms) ease;
   }
 }

package/components/_index.scss

@@ -1,3 +1,4 @@
 // Forwards all component base style modules.
 // Usage: @use '@vialiq/flux-ui/components';
 @forward 'button';
+@forward 'input';

package/components/_input.scss

@@ -0,0 +1,88 @@
+/**
+ * Input component base styles.
+ *
+ * Provides the host-agnostic foundation for text-input-like controls:
+ * layout, border, padding, typography, focus ring, and hover/focus styles.
+ * Component-specific colours and label positioning are in the consuming
+ * web-component's SCSS (vi-input.scss etc.).
+ */
+
+@use '../styles/variables' as tokens;
+
+@layer components {
+  // -------------------------------------------------------------------------
+  // Field wrapper — stacks label / input / helper vertically
+  // -------------------------------------------------------------------------
+  .input-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vi-input-spacing-field-gap, #{tokens.$spacing-xs});
+    width: 100%;
+  }
+
+  // -------------------------------------------------------------------------
+  // Native <input> element — full reset then design-system styles
+  // -------------------------------------------------------------------------
+  .input-control {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--vi-input-sizing-min-height, 40px);
+    border: #{tokens.$border-width-thin} solid var(--vi-input-border-color, #{tokens.$color-grey-300});
+    border-radius: var(--vi-input-shape-border-radius, #{tokens.$border-radius-lg});
+    padding: var(--vi-input-spacing-padding-block, #{tokens.$spacing-xs})
+             var(--vi-input-spacing-padding-inline, #{tokens.$spacing-sm});
+    font-family: #{tokens.$font-family-base};
+    font-size: var(--vi-input-typography-font-size, #{tokens.$font-size-base});
+    font-weight: #{tokens.$font-weight-normal};
+    line-height: var(--vi-input-typography-line-height, #{tokens.$line-height-normal});
+    color: var(--vi-input-text-color, #{tokens.$color-foreground});
+    background-color: var(--vi-input-background-color, #{tokens.$color-background});
+    transition: border-color 150ms ease, box-shadow 150ms ease;
+
+    &:hover:not(:focus-visible) {
+      border-color: var(--vi-input-border-color-hover, #{tokens.$color-grey-500});
+    }
+
+    // Focus ring — outline + subtle shadow for depth.
+    // :focus is included alongside :focus-visible because with delegatesFocus: true
+    // some browsers set :focus but not :focus-visible on the delegated inner element.
+    // For <input> elements, showing the ring on all focus (keyboard + mouse) is correct.
+    &:focus-visible,
+    &:focus {
+      outline: #{tokens.$border-width-base} solid var(--vi-input-focus-ring-color, #{tokens.$color-primary});
+      outline-offset: 0;
+      box-shadow: 0 0 0 3px var(--vi-input-focus-ring-glow, #{tokens.$color-blue-200});
+    }
+
+    &::placeholder {
+      color: var(--vi-input-placeholder-color, #{tokens.$color-grey-500});
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Helper / error text
+  // -------------------------------------------------------------------------
+  .input-helper {
+    font-size: var(--vi-input-helper-size, #{tokens.$font-size-xs});
+    line-height: var(--vi-input-helper-leading, #{tokens.$line-height-normal});
+    color: var(--vi-input-helper-color, #{tokens.$color-grey-500});
+  }
+
+  .input-error {
+    font-size: var(--vi-input-error-size, #{tokens.$font-size-xs});
+    line-height: var(--vi-input-error-leading, #{tokens.$line-height-normal});
+    color: var(--vi-input-error-color, #{tokens.$color-error});
+  }
+
+  // -------------------------------------------------------------------------
+  // Reduced-motion override
+  // -------------------------------------------------------------------------
+  @media (prefers-reduced-motion: reduce) {
+    .input-control {
+      transition: none;
+    }
+  }
+}

package/flux-ui.css

@@ -1 +1 @@
-@layer reset, components, utilities;:root{--vi-color-grey-100: strip-units(var(--vi-color-grey-100, #f5f5f5));--vi-color-grey-200: strip-units(var(--vi-color-grey-200, #eeeeee));--vi-color-grey-300: strip-units(var(--vi-color-grey-300, #e0e0e0));--vi-color-grey-400: strip-units(var(--vi-color-grey-400, #bdbdbd));--vi-color-grey-500: strip-units(var(--vi-color-grey-500, #9e9e9e));--vi-color-grey-600: strip-units(var(--vi-color-grey-600, #757575));--vi-color-grey-700: strip-units(var(--vi-color-grey-700, #616161));--vi-color-grey-800: strip-units(var(--vi-color-grey-800, #424242));--vi-color-grey-900: strip-units(var(--vi-color-grey-900, #212121));--vi-color-red-100: strip-units(var(--vi-color-red-100, #ffccce));--vi-color-red-200: strip-units(var(--vi-color-red-200, #f69892));--vi-color-red-300: strip-units(var(--vi-color-red-300, #ee6f68));--vi-color-red-400: strip-units(var(--vi-color-red-400, #f74d40));--vi-color-red-500: strip-units(var(--vi-color-red-500, #fb3c1e));--vi-color-red-600: strip-units(var(--vi-color-red-600, #ed3020));--vi-color-red-700: strip-units(var(--vi-color-red-700, #db231b));--vi-color-red-800: strip-units(var(--vi-color-red-800, #ce1a12));--vi-color-red-900: strip-units(var(--vi-color-red-900, #c00000));--vi-color-yellow-100: strip-units(var(--vi-color-yellow-100, #ffeab1));--vi-color-yellow-200: strip-units(var(--vi-color-yellow-200, #ffde85));--vi-color-yellow-300: strip-units(var(--vi-color-yellow-300, #ffd359));--vi-color-yellow-400: strip-units(var(--vi-color-yellow-400, #ffc72e));--vi-color-yellow-500: strip-units(var(--vi-color-yellow-500, #ffba00));--vi-color-yellow-600: strip-units(var(--vi-color-yellow-600, #ffa900));--vi-color-yellow-700: strip-units(var(--vi-color-yellow-700, #ff9900));--vi-color-yellow-800: strip-units(var(--vi-color-yellow-800, #e68300));--vi-color-yellow-900: strip-units(var(--vi-color-yellow-900, #cc6d00));--vi-color-green-100: strip-units(var(--vi-color-green-100, #e6f0eb));--vi-color-green-200: strip-units(var(--vi-color-green-200, #c0dbcd));--vi-color-green-300: strip-units(var(--vi-color-green-300, #96c4ab));--vi-color-green-400: strip-units(var(--vi-color-green-400, #6eab88));--vi-color-green-500: strip-units(var(--vi-color-green-500, #489167));--vi-color-green-600: strip-units(var(--vi-color-green-600, #367551));--vi-color-green-700: strip-units(var(--vi-color-green-700, #265a3d));--vi-color-green-800: strip-units(var(--vi-color-green-800, #17402a));--vi-color-green-900: strip-units(var(--vi-color-green-900, #0a2618));--vi-color-blue-100: strip-units(var(--vi-color-blue-100, #ebf5ff));--vi-color-blue-200: strip-units(var(--vi-color-blue-200, #cee6ff));--vi-color-blue-300: strip-units(var(--vi-color-blue-300, #a3d1fa));--vi-color-blue-400: strip-units(var(--vi-color-blue-400, #74b6f4));--vi-color-blue-500: strip-units(var(--vi-color-blue-500, #3f96f1));--vi-color-blue-600: strip-units(var(--vi-color-blue-600, #3b86de));--vi-color-blue-700: strip-units(var(--vi-color-blue-700, #3676d0));--vi-color-blue-800: strip-units(var(--vi-color-blue-800, #2d5fa8));--vi-color-blue-900: strip-units(var(--vi-color-blue-900, #254882));--vi-color-purple-100: strip-units(var(--vi-color-purple-100, #f0e5f9));--vi-color-purple-200: strip-units(var(--vi-color-purple-200, #dbbdf2));--vi-color-purple-300: strip-units(var(--vi-color-purple-300, #c18eeb));--vi-color-purple-400: strip-units(var(--vi-color-purple-400, #a454e2));--vi-color-purple-500: strip-units(var(--vi-color-purple-500, #7609d0));--vi-color-purple-600: strip-units(var(--vi-color-purple-600, #6507c9));--vi-color-purple-700: strip-units(var(--vi-color-purple-700, #5505c2));--vi-color-purple-800: strip-units(var(--vi-color-purple-800, #4403bb));--vi-color-purple-900: strip-units(var(--vi-color-purple-900, #3400b4));--vi-color-primary: strip-units(var(--vi-color-primary, #3676d0));--vi-color-secondary: strip-units(var(--vi-color-secondary, #f0f4f8));--vi-color-success: strip-units(var(--vi-color-success, #489167));--vi-color-warning: strip-units(var(--vi-color-warning, #ffba00));--vi-color-error: strip-units(var(--vi-color-error, #ef4444));--vi-color-info: strip-units(var(--vi-color-info, #3676d0));--vi-color-background: strip-units(var(--vi-color-background, #ffffff));--vi-color-foreground: strip-units(var(--vi-color-foreground, #111827));--vi-color-border: strip-units(var(--vi-color-border, #e5e7eb));--vi-spacing-xs: strip-units(var(--vi-spacing-xs, 8px));--vi-spacing-sm: strip-units(var(--vi-spacing-sm, 16px));--vi-spacing-md: strip-units(var(--vi-spacing-md, 24px));--vi-spacing-lg: strip-units(var(--vi-spacing-lg, 32px));--vi-spacing-xl: strip-units(var(--vi-spacing-xl, 40px));--vi-spacing-2xl: strip-units(var(--vi-spacing-2xl, 48px));--vi-spacing-3xl: strip-units(var(--vi-spacing-3xl, 56px));--vi-font-family-base: strip-units(var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));--vi-font-family-mono: strip-units(var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));--vi-font-size-xs: strip-units(var(--vi-font-size-xs, 12px));--vi-font-size-sm: strip-units(var(--vi-font-size-sm, 14px));--vi-font-size-base: strip-units(var(--vi-font-size-base, 16px));--vi-font-size-lg: strip-units(var(--vi-font-size-lg, 18px));--vi-font-size-xl: strip-units(var(--vi-font-size-xl, 20px));--vi-font-size-2xl: strip-units(var(--vi-font-size-2xl, 24px));--vi-font-size-3xl: strip-units(var(--vi-font-size-3xl, 30px));--vi-font-weight-light: strip-units(var(--vi-font-weight-light, 300));--vi-font-weight-normal: strip-units(var(--vi-font-weight-normal, 400));--vi-font-weight-medium: strip-units(var(--vi-font-weight-medium, 500));--vi-font-weight-semibold: strip-units(var(--vi-font-weight-semibold, 600));--vi-font-weight-bold: strip-units(var(--vi-font-weight-bold, 700));--vi-line-height-tight: strip-units(var(--vi-line-height-tight, 1.2));--vi-line-height-normal: strip-units(var(--vi-line-height-normal, 1.5));--vi-line-height-relaxed: strip-units(var(--vi-line-height-relaxed, 1.75));--vi-shadow-sm: strip-units(var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));--vi-shadow-md: strip-units(var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)));--vi-shadow-lg: strip-units(var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));--vi-shadow-xl: strip-units(var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1)));--vi-border-radius-sm: strip-units(var(--vi-border-radius-sm, 2px));--vi-border-radius-md: strip-units(var(--vi-border-radius-md, 4px));--vi-border-radius-lg: strip-units(var(--vi-border-radius-lg, 8px));--vi-border-radius-xl: strip-units(var(--vi-border-radius-xl, 12px));--vi-border-width-thin: strip-units(var(--vi-border-width-thin, 1px));--vi-border-width-base: strip-units(var(--vi-border-width-base, 2px));--vi-border-width-thick: strip-units(var(--vi-border-width-thick, 3px))}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-size:var(--vi-font-size-base, 16px);line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-color-foreground, #111827);background-color:var(--vi-color-background, #ffffff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6,ul,ol,dl{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;line-height:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none;background-color:rgba(0,0,0,0)}a:active,a:hover{outline:0}code,pre,samp{font-family:var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace);font-size:1em}pre{margin:0;overflow:auto}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15}button,input[type=button],input[type=reset],input[type=submit]{background:rgba(0,0,0,0);border:0;cursor:pointer;-webkit-appearance:button}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}input[type=checkbox]{padding:0;-webkit-appearance:checkbox}input[type=radio]{padding:0;-webkit-appearance:radio}textarea{overflow:auto;resize:vertical}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img,svg{max-width:100%;height:auto;display:block}img{border:0;vertical-align:middle}iframe,video{max-width:100%}[hidden]{display:none}hr{margin:0;border:0;border-top:1px solid var(--vi-color-border, #e5e7eb)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.flex-1{flex:1}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh}.max-w-container{max-width:1200px;margin-left:auto;margin-right:auto}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}}@layer utilities{.m-xs{margin:var(--vi-spacing-xs, 8px)}.mx-xs{margin-left:var(--vi-spacing-xs, 8px);margin-right:var(--vi-spacing-xs, 8px)}.my-xs{margin-top:var(--vi-spacing-xs, 8px);margin-bottom:var(--vi-spacing-xs, 8px)}.mt-xs{margin-top:var(--vi-spacing-xs, 8px)}.mr-xs{margin-right:var(--vi-spacing-xs, 8px)}.mb-xs{margin-bottom:var(--vi-spacing-xs, 8px)}.ml-xs{margin-left:var(--vi-spacing-xs, 8px)}.m-sm{margin:var(--vi-spacing-sm, 16px)}.mx-sm{margin-left:var(--vi-spacing-sm, 16px);margin-right:var(--vi-spacing-sm, 16px)}.my-sm{margin-top:var(--vi-spacing-sm, 16px);margin-bottom:var(--vi-spacing-sm, 16px)}.mt-sm{margin-top:var(--vi-spacing-sm, 16px)}.mr-sm{margin-right:var(--vi-spacing-sm, 16px)}.mb-sm{margin-bottom:var(--vi-spacing-sm, 16px)}.ml-sm{margin-left:var(--vi-spacing-sm, 16px)}.m-md{margin:var(--vi-spacing-md, 24px)}.mx-md{margin-left:var(--vi-spacing-md, 24px);margin-right:var(--vi-spacing-md, 24px)}.my-md{margin-top:var(--vi-spacing-md, 24px);margin-bottom:var(--vi-spacing-md, 24px)}.mt-md{margin-top:var(--vi-spacing-md, 24px)}.mr-md{margin-right:var(--vi-spacing-md, 24px)}.mb-md{margin-bottom:var(--vi-spacing-md, 24px)}.ml-md{margin-left:var(--vi-spacing-md, 24px)}.m-lg{margin:var(--vi-spacing-lg, 32px)}.mx-lg{margin-left:var(--vi-spacing-lg, 32px);margin-right:var(--vi-spacing-lg, 32px)}.my-lg{margin-top:var(--vi-spacing-lg, 32px);margin-bottom:var(--vi-spacing-lg, 32px)}.mt-lg{margin-top:var(--vi-spacing-lg, 32px)}.mr-lg{margin-right:var(--vi-spacing-lg, 32px)}.mb-lg{margin-bottom:var(--vi-spacing-lg, 32px)}.ml-lg{margin-left:var(--vi-spacing-lg, 32px)}.m-xl{margin:var(--vi-spacing-xl, 40px)}.mx-xl{margin-left:var(--vi-spacing-xl, 40px);margin-right:var(--vi-spacing-xl, 40px)}.my-xl{margin-top:var(--vi-spacing-xl, 40px);margin-bottom:var(--vi-spacing-xl, 40px)}.mt-xl{margin-top:var(--vi-spacing-xl, 40px)}.mr-xl{margin-right:var(--vi-spacing-xl, 40px)}.mb-xl{margin-bottom:var(--vi-spacing-xl, 40px)}.ml-xl{margin-left:var(--vi-spacing-xl, 40px)}.m-2xl{margin:var(--vi-spacing-2xl, 48px)}.mx-2xl{margin-left:var(--vi-spacing-2xl, 48px);margin-right:var(--vi-spacing-2xl, 48px)}.my-2xl{margin-top:var(--vi-spacing-2xl, 48px);margin-bottom:var(--vi-spacing-2xl, 48px)}.mt-2xl{margin-top:var(--vi-spacing-2xl, 48px)}.mr-2xl{margin-right:var(--vi-spacing-2xl, 48px)}.mb-2xl{margin-bottom:var(--vi-spacing-2xl, 48px)}.ml-2xl{margin-left:var(--vi-spacing-2xl, 48px)}.m-3xl{margin:var(--vi-spacing-3xl, 56px)}.mx-3xl{margin-left:var(--vi-spacing-3xl, 56px);margin-right:var(--vi-spacing-3xl, 56px)}.my-3xl{margin-top:var(--vi-spacing-3xl, 56px);margin-bottom:var(--vi-spacing-3xl, 56px)}.mt-3xl{margin-top:var(--vi-spacing-3xl, 56px)}.mr-3xl{margin-right:var(--vi-spacing-3xl, 56px)}.mb-3xl{margin-bottom:var(--vi-spacing-3xl, 56px)}.ml-3xl{margin-left:var(--vi-spacing-3xl, 56px)}.p-xs{padding:var(--vi-spacing-xs, 8px)}.px-xs{padding-left:var(--vi-spacing-xs, 8px);padding-right:var(--vi-spacing-xs, 8px)}.py-xs{padding-top:var(--vi-spacing-xs, 8px);padding-bottom:var(--vi-spacing-xs, 8px)}.pt-xs{padding-top:var(--vi-spacing-xs, 8px)}.pr-xs{padding-right:var(--vi-spacing-xs, 8px)}.pb-xs{padding-bottom:var(--vi-spacing-xs, 8px)}.pl-xs{padding-left:var(--vi-spacing-xs, 8px)}.p-sm{padding:var(--vi-spacing-sm, 16px)}.px-sm{padding-left:var(--vi-spacing-sm, 16px);padding-right:var(--vi-spacing-sm, 16px)}.py-sm{padding-top:var(--vi-spacing-sm, 16px);padding-bottom:var(--vi-spacing-sm, 16px)}.pt-sm{padding-top:var(--vi-spacing-sm, 16px)}.pr-sm{padding-right:var(--vi-spacing-sm, 16px)}.pb-sm{padding-bottom:var(--vi-spacing-sm, 16px)}.pl-sm{padding-left:var(--vi-spacing-sm, 16px)}.p-md{padding:var(--vi-spacing-md, 24px)}.px-md{padding-left:var(--vi-spacing-md, 24px);padding-right:var(--vi-spacing-md, 24px)}.py-md{padding-top:var(--vi-spacing-md, 24px);padding-bottom:var(--vi-spacing-md, 24px)}.pt-md{padding-top:var(--vi-spacing-md, 24px)}.pr-md{padding-right:var(--vi-spacing-md, 24px)}.pb-md{padding-bottom:var(--vi-spacing-md, 24px)}.pl-md{padding-left:var(--vi-spacing-md, 24px)}.p-lg{padding:var(--vi-spacing-lg, 32px)}.px-lg{padding-left:var(--vi-spacing-lg, 32px);padding-right:var(--vi-spacing-lg, 32px)}.py-lg{padding-top:var(--vi-spacing-lg, 32px);padding-bottom:var(--vi-spacing-lg, 32px)}.pt-lg{padding-top:var(--vi-spacing-lg, 32px)}.pr-lg{padding-right:var(--vi-spacing-lg, 32px)}.pb-lg{padding-bottom:var(--vi-spacing-lg, 32px)}.pl-lg{padding-left:var(--vi-spacing-lg, 32px)}.p-xl{padding:var(--vi-spacing-xl, 40px)}.px-xl{padding-left:var(--vi-spacing-xl, 40px);padding-right:var(--vi-spacing-xl, 40px)}.py-xl{padding-top:var(--vi-spacing-xl, 40px);padding-bottom:var(--vi-spacing-xl, 40px)}.pt-xl{padding-top:var(--vi-spacing-xl, 40px)}.pr-xl{padding-right:var(--vi-spacing-xl, 40px)}.pb-xl{padding-bottom:var(--vi-spacing-xl, 40px)}.pl-xl{padding-left:var(--vi-spacing-xl, 40px)}.p-2xl{padding:var(--vi-spacing-2xl, 48px)}.px-2xl{padding-left:var(--vi-spacing-2xl, 48px);padding-right:var(--vi-spacing-2xl, 48px)}.py-2xl{padding-top:var(--vi-spacing-2xl, 48px);padding-bottom:var(--vi-spacing-2xl, 48px)}.pt-2xl{padding-top:var(--vi-spacing-2xl, 48px)}.pr-2xl{padding-right:var(--vi-spacing-2xl, 48px)}.pb-2xl{padding-bottom:var(--vi-spacing-2xl, 48px)}.pl-2xl{padding-left:var(--vi-spacing-2xl, 48px)}.p-3xl{padding:var(--vi-spacing-3xl, 56px)}.px-3xl{padding-left:var(--vi-spacing-3xl, 56px);padding-right:var(--vi-spacing-3xl, 56px)}.py-3xl{padding-top:var(--vi-spacing-3xl, 56px);padding-bottom:var(--vi-spacing-3xl, 56px)}.pt-3xl{padding-top:var(--vi-spacing-3xl, 56px)}.pr-3xl{padding-right:var(--vi-spacing-3xl, 56px)}.pb-3xl{padding-bottom:var(--vi-spacing-3xl, 56px)}.pl-3xl{padding-left:var(--vi-spacing-3xl, 56px)}.text-xs{font-size:var(--vi-font-size-xs, 12px)}.text-sm{font-size:var(--vi-font-size-sm, 14px)}.text-base{font-size:var(--vi-font-size-base, 16px)}.text-lg{font-size:var(--vi-font-size-lg, 18px)}.text-xl{font-size:var(--vi-font-size-xl, 20px)}.text-2xl{font-size:var(--vi-font-size-2xl, 24px)}.text-3xl{font-size:var(--vi-font-size-3xl, 30px)}.font-light{font-weight:var(--vi-font-weight-light, 300)}.font-normal{font-weight:var(--vi-font-weight-normal, 400)}.font-medium{font-weight:var(--vi-font-weight-medium, 500)}.font-semibold{font-weight:var(--vi-font-weight-semibold, 600)}.font-bold{font-weight:var(--vi-font-weight-bold, 700)}.leading-tight{line-height:var(--vi-line-height-tight, 1.2)}.leading-normal{line-height:var(--vi-line-height-normal, 1.5)}.leading-relaxed{line-height:var(--vi-line-height-relaxed, 1.75)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--vi-color-primary, #3676d0)}.bg-primary{background-color:var(--vi-color-primary, #3676d0)}.border-primary{border-color:var(--vi-color-primary, #3676d0)}.text-secondary{color:var(--vi-color-secondary, #f0f4f8)}.bg-secondary{background-color:var(--vi-color-secondary, #f0f4f8)}.border-secondary{border-color:var(--vi-color-secondary, #f0f4f8)}.text-success{color:var(--vi-color-success, #489167)}.bg-success{background-color:var(--vi-color-success, #489167)}.border-success{border-color:var(--vi-color-success, #489167)}.text-warning{color:var(--vi-color-warning, #ffba00)}.bg-warning{background-color:var(--vi-color-warning, #ffba00)}.border-warning{border-color:var(--vi-color-warning, #ffba00)}.text-error{color:var(--vi-color-error, #ef4444)}.bg-error{background-color:var(--vi-color-error, #ef4444)}.border-error{border-color:var(--vi-color-error, #ef4444)}.text-info{color:var(--vi-color-info, #3676d0)}.bg-info{background-color:var(--vi-color-info, #3676d0)}.border-info{border-color:var(--vi-color-info, #3676d0)}.text-grey-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-grey-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.text-grey-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-grey-200{background-color:var(--vi-color-grey-200, #eeeeee)}.text-grey-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-grey-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.text-grey-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-grey-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.text-grey-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-grey-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.text-grey-600{color:var(--vi-color-grey-600, #757575)}.bg-grey-600{background-color:var(--vi-color-grey-600, #757575)}.text-grey-700{color:var(--vi-color-grey-700, #616161)}.bg-grey-700{background-color:var(--vi-color-grey-700, #616161)}.text-grey-800{color:var(--vi-color-grey-800, #424242)}.bg-grey-800{background-color:var(--vi-color-grey-800, #424242)}.text-grey-900{color:var(--vi-color-grey-900, #212121)}.bg-grey-900{background-color:var(--vi-color-grey-900, #212121)}.text-red-100{color:var(--vi-color-red-100, #ffccce)}.bg-red-100{background-color:var(--vi-color-red-100, #ffccce)}.text-red-200{color:var(--vi-color-red-200, #f69892)}.bg-red-200{background-color:var(--vi-color-red-200, #f69892)}.text-red-300{color:var(--vi-color-red-300, #ee6f68)}.bg-red-300{background-color:var(--vi-color-red-300, #ee6f68)}.text-red-400{color:var(--vi-color-red-400, #f74d40)}.bg-red-400{background-color:var(--vi-color-red-400, #f74d40)}.text-red-500{color:var(--vi-color-red-500, #fb3c1e)}.bg-red-500{background-color:var(--vi-color-red-500, #fb3c1e)}.text-red-600{color:var(--vi-color-red-600, #ed3020)}.bg-red-600{background-color:var(--vi-color-red-600, #ed3020)}.text-red-700{color:var(--vi-color-red-700, #db231b)}.bg-red-700{background-color:var(--vi-color-red-700, #db231b)}.text-red-800{color:var(--vi-color-red-800, #ce1a12)}.bg-red-800{background-color:var(--vi-color-red-800, #ce1a12)}.text-red-900{color:var(--vi-color-red-900, #c00000)}.bg-red-900{background-color:var(--vi-color-red-900, #c00000)}.text-yellow-100{color:var(--vi-color-yellow-100, #ffeab1)}.bg-yellow-100{background-color:var(--vi-color-yellow-100, #ffeab1)}.text-yellow-200{color:var(--vi-color-yellow-200, #ffde85)}.bg-yellow-200{background-color:var(--vi-color-yellow-200, #ffde85)}.text-yellow-300{color:var(--vi-color-yellow-300, #ffd359)}.bg-yellow-300{background-color:var(--vi-color-yellow-300, #ffd359)}.text-yellow-400{color:var(--vi-color-yellow-400, #ffc72e)}.bg-yellow-400{background-color:var(--vi-color-yellow-400, #ffc72e)}.text-yellow-500{color:var(--vi-color-yellow-500, #ffba00)}.bg-yellow-500{background-color:var(--vi-color-yellow-500, #ffba00)}.text-yellow-600{color:var(--vi-color-yellow-600, #ffa900)}.bg-yellow-600{background-color:var(--vi-color-yellow-600, #ffa900)}.text-yellow-700{color:var(--vi-color-yellow-700, #ff9900)}.bg-yellow-700{background-color:var(--vi-color-yellow-700, #ff9900)}.text-yellow-800{color:var(--vi-color-yellow-800, #e68300)}.bg-yellow-800{background-color:var(--vi-color-yellow-800, #e68300)}.text-yellow-900{color:var(--vi-color-yellow-900, #cc6d00)}.bg-yellow-900{background-color:var(--vi-color-yellow-900, #cc6d00)}.text-green-100{color:var(--vi-color-green-100, #e6f0eb)}.bg-green-100{background-color:var(--vi-color-green-100, #e6f0eb)}.text-green-200{color:var(--vi-color-green-200, #c0dbcd)}.bg-green-200{background-color:var(--vi-color-green-200, #c0dbcd)}.text-green-300{color:var(--vi-color-green-300, #96c4ab)}.bg-green-300{background-color:var(--vi-color-green-300, #96c4ab)}.text-green-400{color:var(--vi-color-green-400, #6eab88)}.bg-green-400{background-color:var(--vi-color-green-400, #6eab88)}.text-green-500{color:var(--vi-color-green-500, #489167)}.bg-green-500{background-color:var(--vi-color-green-500, #489167)}.text-green-600{color:var(--vi-color-green-600, #367551)}.bg-green-600{background-color:var(--vi-color-green-600, #367551)}.text-green-700{color:var(--vi-color-green-700, #265a3d)}.bg-green-700{background-color:var(--vi-color-green-700, #265a3d)}.text-green-800{color:var(--vi-color-green-800, #17402a)}.bg-green-800{background-color:var(--vi-color-green-800, #17402a)}.text-green-900{color:var(--vi-color-green-900, #0a2618)}.bg-green-900{background-color:var(--vi-color-green-900, #0a2618)}.text-blue-100{color:var(--vi-color-blue-100, #ebf5ff)}.bg-blue-100{background-color:var(--vi-color-blue-100, #ebf5ff)}.text-blue-200{color:var(--vi-color-blue-200, #cee6ff)}.bg-blue-200{background-color:var(--vi-color-blue-200, #cee6ff)}.text-blue-300{color:var(--vi-color-blue-300, #a3d1fa)}.bg-blue-300{background-color:var(--vi-color-blue-300, #a3d1fa)}.text-blue-400{color:var(--vi-color-blue-400, #74b6f4)}.bg-blue-400{background-color:var(--vi-color-blue-400, #74b6f4)}.text-blue-500{color:var(--vi-color-blue-500, #3f96f1)}.bg-blue-500{background-color:var(--vi-color-blue-500, #3f96f1)}.text-blue-600{color:var(--vi-color-blue-600, #3b86de)}.bg-blue-600{background-color:var(--vi-color-blue-600, #3b86de)}.text-blue-700{color:var(--vi-color-blue-700, #3676d0)}.bg-blue-700{background-color:var(--vi-color-blue-700, #3676d0)}.text-blue-800{color:var(--vi-color-blue-800, #2d5fa8)}.bg-blue-800{background-color:var(--vi-color-blue-800, #2d5fa8)}.text-blue-900{color:var(--vi-color-blue-900, #254882)}.bg-blue-900{background-color:var(--vi-color-blue-900, #254882)}.text-purple-100{color:var(--vi-color-purple-100, #f0e5f9)}.bg-purple-100{background-color:var(--vi-color-purple-100, #f0e5f9)}.text-purple-200{color:var(--vi-color-purple-200, #dbbdf2)}.bg-purple-200{background-color:var(--vi-color-purple-200, #dbbdf2)}.text-purple-300{color:var(--vi-color-purple-300, #c18eeb)}.bg-purple-300{background-color:var(--vi-color-purple-300, #c18eeb)}.text-purple-400{color:var(--vi-color-purple-400, #a454e2)}.bg-purple-400{background-color:var(--vi-color-purple-400, #a454e2)}.text-purple-500{color:var(--vi-color-purple-500, #7609d0)}.bg-purple-500{background-color:var(--vi-color-purple-500, #7609d0)}.text-purple-600{color:var(--vi-color-purple-600, #6507c9)}.bg-purple-600{background-color:var(--vi-color-purple-600, #6507c9)}.text-purple-700{color:var(--vi-color-purple-700, #5505c2)}.bg-purple-700{background-color:var(--vi-color-purple-700, #5505c2)}.text-purple-800{color:var(--vi-color-purple-800, #4403bb)}.bg-purple-800{background-color:var(--vi-color-purple-800, #4403bb)}.text-purple-900{color:var(--vi-color-purple-900, #3400b4)}.bg-purple-900{background-color:var(--vi-color-purple-900, #3400b4)}.text-neutral-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-neutral-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.border-neutral-100{border-color:var(--vi-color-grey-100, #f5f5f5)}.text-neutral-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-neutral-200{background-color:var(--vi-color-grey-200, #eeeeee)}.border-neutral-200{border-color:var(--vi-color-grey-200, #eeeeee)}.text-neutral-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-neutral-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.border-neutral-300{border-color:var(--vi-color-grey-300, #e0e0e0)}.text-neutral-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-neutral-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.border-neutral-400{border-color:var(--vi-color-grey-400, #bdbdbd)}.text-neutral-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-neutral-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.border-neutral-500{border-color:var(--vi-color-grey-500, #9e9e9e)}.text-neutral-600{color:var(--vi-color-grey-600, #757575)}.bg-neutral-600{background-color:var(--vi-color-grey-600, #757575)}.border-neutral-600{border-color:var(--vi-color-grey-600, #757575)}.text-neutral-700{color:var(--vi-color-grey-700, #616161)}.bg-neutral-700{background-color:var(--vi-color-grey-700, #616161)}.border-neutral-700{border-color:var(--vi-color-grey-700, #616161)}.text-neutral-800{color:var(--vi-color-grey-800, #424242)}.bg-neutral-800{background-color:var(--vi-color-grey-800, #424242)}.border-neutral-800{border-color:var(--vi-color-grey-800, #424242)}.text-neutral-900{color:var(--vi-color-grey-900, #212121)}.bg-neutral-900{background-color:var(--vi-color-grey-900, #212121)}.border-neutral-900{border-color:var(--vi-color-grey-900, #212121)}.shadow-sm{box-shadow:var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))}.shadow-md{box-shadow:var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}.shadow-lg{box-shadow:var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1))}.shadow-xl{box-shadow:var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1))}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--vi-border-radius-sm, 2px)}.rounded-md{border-radius:var(--vi-border-radius-md, 4px)}.rounded-lg{border-radius:var(--vi-border-radius-lg, 8px)}.rounded-xl{border-radius:var(--vi-border-radius-xl, 12px)}.rounded-full{border-radius:9999px}.border-thin{border-width:var(--vi-border-width-thin, 1px);border-style:solid}.border-base{border-width:var(--vi-border-width-base, 2px);border-style:solid}.border-thick{border-width:var(--vi-border-width-thick, 3px);border-style:solid}.z-hide{z-index:-1}.z-auto{z-index:auto}.z-base{z-index:0}.z-dropdown{z-index:1000}.z-sticky{z-index:1020}.z-fixed{z-index:1030}.z-backdrop{z-index:1040}.z-modal{z-index:1050}.z-popover{z-index:1060}.z-tooltip{z-index:1070}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-x-xs{column-gap:var(--vi-spacing-xs, 8px)}.gap-y-xs{row-gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-x-sm{column-gap:var(--vi-spacing-sm, 16px)}.gap-y-sm{row-gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-x-md{column-gap:var(--vi-spacing-md, 24px)}.gap-y-md{row-gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-x-lg{column-gap:var(--vi-spacing-lg, 32px)}.gap-y-lg{row-gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.gap-x-xl{column-gap:var(--vi-spacing-xl, 40px)}.gap-y-xl{row-gap:var(--vi-spacing-xl, 40px)}.gap-2xl{gap:var(--vi-spacing-2xl, 48px)}.gap-x-2xl{column-gap:var(--vi-spacing-2xl, 48px)}.gap-y-2xl{row-gap:var(--vi-spacing-2xl, 48px)}.gap-3xl{gap:var(--vi-spacing-3xl, 56px)}.gap-x-3xl{column-gap:var(--vi-spacing-3xl, 56px)}.gap-y-3xl{row-gap:var(--vi-spacing-3xl, 56px)}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}.transition-opacity{transition:opacity .2s ease-in-out}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}}/*# sourceMappingURL=flux-ui.css.map */
+@layer reset, components, utilities;:root{--vi-color-grey-100: strip-units(var(--vi-color-grey-100, #f5f5f5));--vi-color-grey-200: strip-units(var(--vi-color-grey-200, #eeeeee));--vi-color-grey-300: strip-units(var(--vi-color-grey-300, #e0e0e0));--vi-color-grey-400: strip-units(var(--vi-color-grey-400, #bdbdbd));--vi-color-grey-500: strip-units(var(--vi-color-grey-500, #9e9e9e));--vi-color-grey-600: strip-units(var(--vi-color-grey-600, #757575));--vi-color-grey-700: strip-units(var(--vi-color-grey-700, #616161));--vi-color-grey-800: strip-units(var(--vi-color-grey-800, #424242));--vi-color-grey-900: strip-units(var(--vi-color-grey-900, #212121));--vi-color-red-100: strip-units(var(--vi-color-red-100, #ffccce));--vi-color-red-200: strip-units(var(--vi-color-red-200, #f69892));--vi-color-red-300: strip-units(var(--vi-color-red-300, #ee6f68));--vi-color-red-400: strip-units(var(--vi-color-red-400, #f74d40));--vi-color-red-500: strip-units(var(--vi-color-red-500, #fb3c1e));--vi-color-red-600: strip-units(var(--vi-color-red-600, #ed3020));--vi-color-red-700: strip-units(var(--vi-color-red-700, #db231b));--vi-color-red-800: strip-units(var(--vi-color-red-800, #ce1a12));--vi-color-red-900: strip-units(var(--vi-color-red-900, #c00000));--vi-color-yellow-100: strip-units(var(--vi-color-yellow-100, #ffeab1));--vi-color-yellow-200: strip-units(var(--vi-color-yellow-200, #ffde85));--vi-color-yellow-300: strip-units(var(--vi-color-yellow-300, #ffd359));--vi-color-yellow-400: strip-units(var(--vi-color-yellow-400, #ffc72e));--vi-color-yellow-500: strip-units(var(--vi-color-yellow-500, #ffba00));--vi-color-yellow-600: strip-units(var(--vi-color-yellow-600, #ffa900));--vi-color-yellow-700: strip-units(var(--vi-color-yellow-700, #ff9900));--vi-color-yellow-800: strip-units(var(--vi-color-yellow-800, #e68300));--vi-color-yellow-900: strip-units(var(--vi-color-yellow-900, #cc6d00));--vi-color-green-100: strip-units(var(--vi-color-green-100, #e6f0eb));--vi-color-green-200: strip-units(var(--vi-color-green-200, #c0dbcd));--vi-color-green-300: strip-units(var(--vi-color-green-300, #96c4ab));--vi-color-green-400: strip-units(var(--vi-color-green-400, #6eab88));--vi-color-green-500: strip-units(var(--vi-color-green-500, #489167));--vi-color-green-600: strip-units(var(--vi-color-green-600, #367551));--vi-color-green-700: strip-units(var(--vi-color-green-700, #265a3d));--vi-color-green-800: strip-units(var(--vi-color-green-800, #17402a));--vi-color-green-900: strip-units(var(--vi-color-green-900, #0a2618));--vi-color-blue-100: strip-units(var(--vi-color-blue-100, #ebf5ff));--vi-color-blue-200: strip-units(var(--vi-color-blue-200, #cee6ff));--vi-color-blue-300: strip-units(var(--vi-color-blue-300, #a3d1fa));--vi-color-blue-400: strip-units(var(--vi-color-blue-400, #74b6f4));--vi-color-blue-500: strip-units(var(--vi-color-blue-500, #3f96f1));--vi-color-blue-600: strip-units(var(--vi-color-blue-600, #3b86de));--vi-color-blue-700: strip-units(var(--vi-color-blue-700, #3676d0));--vi-color-blue-800: strip-units(var(--vi-color-blue-800, #2d5fa8));--vi-color-blue-900: strip-units(var(--vi-color-blue-900, #254882));--vi-color-purple-100: strip-units(var(--vi-color-purple-100, #f0e5f9));--vi-color-purple-200: strip-units(var(--vi-color-purple-200, #dbbdf2));--vi-color-purple-300: strip-units(var(--vi-color-purple-300, #c18eeb));--vi-color-purple-400: strip-units(var(--vi-color-purple-400, #a454e2));--vi-color-purple-500: strip-units(var(--vi-color-purple-500, #7609d0));--vi-color-purple-600: strip-units(var(--vi-color-purple-600, #6507c9));--vi-color-purple-700: strip-units(var(--vi-color-purple-700, #5505c2));--vi-color-purple-800: strip-units(var(--vi-color-purple-800, #4403bb));--vi-color-purple-900: strip-units(var(--vi-color-purple-900, #3400b4));--vi-color-primary: strip-units(var(--vi-color-primary, #3676d0));--vi-color-secondary: strip-units(var(--vi-color-secondary, #f0f4f8));--vi-color-success: strip-units(var(--vi-color-success, #489167));--vi-color-warning: strip-units(var(--vi-color-warning, #ffba00));--vi-color-error: strip-units(var(--vi-color-error, #ef4444));--vi-color-info: strip-units(var(--vi-color-info, #3676d0));--vi-color-background: strip-units(var(--vi-color-background, #ffffff));--vi-color-foreground: strip-units(var(--vi-color-foreground, #111827));--vi-color-border: strip-units(var(--vi-color-border, #e5e7eb));--vi-spacing-xs: strip-units(var(--vi-spacing-xs, 8px));--vi-spacing-sm: strip-units(var(--vi-spacing-sm, 16px));--vi-spacing-md: strip-units(var(--vi-spacing-md, 24px));--vi-spacing-lg: strip-units(var(--vi-spacing-lg, 32px));--vi-spacing-xl: strip-units(var(--vi-spacing-xl, 40px));--vi-spacing-2xl: strip-units(var(--vi-spacing-2xl, 48px));--vi-spacing-3xl: strip-units(var(--vi-spacing-3xl, 56px));--vi-font-family-base: strip-units(var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));--vi-font-family-mono: strip-units(var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));--vi-font-size-xs: strip-units(var(--vi-font-size-xs, 12px));--vi-font-size-sm: strip-units(var(--vi-font-size-sm, 14px));--vi-font-size-base: strip-units(var(--vi-font-size-base, 16px));--vi-font-size-lg: strip-units(var(--vi-font-size-lg, 18px));--vi-font-size-xl: strip-units(var(--vi-font-size-xl, 20px));--vi-font-size-2xl: strip-units(var(--vi-font-size-2xl, 24px));--vi-font-size-3xl: strip-units(var(--vi-font-size-3xl, 30px));--vi-font-weight-light: strip-units(var(--vi-font-weight-light, 300));--vi-font-weight-normal: strip-units(var(--vi-font-weight-normal, 400));--vi-font-weight-medium: strip-units(var(--vi-font-weight-medium, 500));--vi-font-weight-semibold: strip-units(var(--vi-font-weight-semibold, 600));--vi-font-weight-bold: strip-units(var(--vi-font-weight-bold, 700));--vi-line-height-tight: strip-units(var(--vi-line-height-tight, 1.2));--vi-line-height-normal: strip-units(var(--vi-line-height-normal, 1.5));--vi-line-height-relaxed: strip-units(var(--vi-line-height-relaxed, 1.75));--vi-letter-spacing-tight: strip-units(var(--vi-letter-spacing-tight, -0.01em));--vi-letter-spacing-normal: strip-units(var(--vi-letter-spacing-normal, 0em));--vi-letter-spacing-wide: strip-units(var(--vi-letter-spacing-wide, 0.025em));--vi-letter-spacing-wider: strip-units(var(--vi-letter-spacing-wider, 0.05em));--vi-letter-spacing-widest: strip-units(var(--vi-letter-spacing-widest, 0.1em));--vi-shadow-sm: strip-units(var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));--vi-shadow-md: strip-units(var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)));--vi-shadow-lg: strip-units(var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));--vi-shadow-xl: strip-units(var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1)));--vi-border-radius-sm: strip-units(var(--vi-border-radius-sm, 2px));--vi-border-radius-md: strip-units(var(--vi-border-radius-md, 4px));--vi-border-radius-lg: strip-units(var(--vi-border-radius-lg, 8px));--vi-border-radius-xl: strip-units(var(--vi-border-radius-xl, 12px));--vi-border-width-thin: strip-units(var(--vi-border-width-thin, 1px));--vi-border-width-base: strip-units(var(--vi-border-width-base, 2px));--vi-border-width-thick: strip-units(var(--vi-border-width-thick, 3px))}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-size:var(--vi-font-size-base, 16px);line-height:var(--vi-line-height-normal, 1.5);color:var(--vi-color-foreground, #111827);background-color:var(--vi-color-background, #ffffff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6,ul,ol,dl{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;line-height:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none;background-color:rgba(0,0,0,0)}a:active,a:hover{outline:0}code,pre,samp{font-family:var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace);font-size:1em}pre{margin:0;overflow:auto}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15}button,input[type=button],input[type=reset],input[type=submit]{background:rgba(0,0,0,0);border:0;cursor:pointer;-webkit-appearance:button}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}input[type=checkbox]{padding:0;-webkit-appearance:checkbox}input[type=radio]{padding:0;-webkit-appearance:radio}textarea{overflow:auto;resize:vertical}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img,svg{max-width:100%;height:auto;display:block}img{border:0;vertical-align:middle}iframe,video{max-width:100%}[hidden]{display:none}hr{margin:0;border:0;border-top:1px solid var(--vi-color-border, #e5e7eb)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.flex-1{flex:1}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh}.max-w-container{max-width:1200px;margin-left:auto;margin-right:auto}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}}.vi-overline,.vi-caption,.vi-label-sm,.vi-label-md,.vi-body-sm,.vi-body-md,.vi-body-lg,.vi-heading-sm,.vi-heading-md,.vi-heading-lg,.vi-heading-xl,.vi-display-md,.vi-display-lg,td,th,blockquote,pre,code,kbd,samp,figcaption,small,label,p,h6,h5,h4,h3,h2,h1{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}@layer components{body{font-family:var(--vi-font-family-base, var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--vi-body-md-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:var(--vi-heading-h1-size, var(--vi-font-size-3xl, 30px));font-weight:var(--vi-heading-h1-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h1-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h1-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h1-color, var(--vi-color-foreground, #111827))}h2{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 24px));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}h3{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 20px));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}h4{font-size:var(--vi-heading-h4-size, var(--vi-font-size-lg, 18px));font-weight:var(--vi-heading-h4-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h4-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h4-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h4-color, var(--vi-color-foreground, #111827))}h5{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}h6{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}p{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}label{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}small{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 12px));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}strong,b{font-weight:var(--vi-font-weight-semibold, 600)}em,i{font-style:italic}figcaption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 12px));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}code,kbd,samp{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}pre{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 14px));line-height:var(--vi-code-leading, var(--vi-line-height-relaxed, 1.75));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}blockquote{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 18px));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-light, 300));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-grey-700, #616161));font-style:italic;padding:0}th{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}td{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}}@layer utilities{.vi-display-lg{font-size:var(--vi-display-lg-size, var(--vi-font-size-3xl, 30px));font-weight:var(--vi-display-lg-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-display-lg-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-lg-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-lg-color, var(--vi-color-foreground, #111827))}.vi-display-md{font-size:var(--vi-display-md-size, var(--vi-font-size-2xl, 24px));font-weight:var(--vi-display-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-display-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-md-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-md-color, var(--vi-color-foreground, #111827))}.vi-heading-xl{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 24px));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}.vi-heading-lg{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 20px));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}.vi-heading-md{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}.vi-heading-sm{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}.vi-body-lg{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 18px));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-foreground, #111827))}.vi-body-md{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}.vi-body-sm{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-body-sm-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}.vi-label-md{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}.vi-label-sm{font-size:var(--vi-label-sm-size, var(--vi-font-size-xs, 12px));font-weight:var(--vi-label-sm-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-sm-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-sm-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-sm-color, var(--vi-color-foreground, #111827))}.vi-caption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 12px));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}.vi-overline{font-size:var(--vi-overline-size, var(--vi-font-size-xs, 12px));font-weight:var(--vi-overline-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-overline-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-overline-tracking, var(--vi-letter-spacing-widest, 0.1em));text-transform:uppercase;color:var(--vi-overline-color, var(--vi-color-grey-600, #757575))}.vi-code{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 14px));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}.vi-text-muted{color:var(--vi-color-grey-500, #9e9e9e)}.vi-text-subtle{color:var(--vi-color-grey-600, #757575)}.vi-text-strong{font-weight:var(--vi-font-weight-semibold, 600)}.vi-text-bold{font-weight:var(--vi-font-weight-bold, 700)}.vi-text-italic{font-style:italic}.vi-text-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vi-text-balance{text-wrap:balance}.vi-tracking-tight{letter-spacing:var(--vi-letter-spacing-tight, -0.01em)}.vi-tracking-normal{letter-spacing:var(--vi-letter-spacing-normal, 0em)}.vi-tracking-wide{letter-spacing:var(--vi-letter-spacing-wide, 0.025em)}.vi-tracking-wider{letter-spacing:var(--vi-letter-spacing-wider, 0.05em)}.vi-tracking-widest{letter-spacing:var(--vi-letter-spacing-widest, 0.1em)}}@layer utilities{.m-xs{margin:var(--vi-spacing-xs, 8px)}.mx-xs{margin-left:var(--vi-spacing-xs, 8px);margin-right:var(--vi-spacing-xs, 8px)}.my-xs{margin-top:var(--vi-spacing-xs, 8px);margin-bottom:var(--vi-spacing-xs, 8px)}.mt-xs{margin-top:var(--vi-spacing-xs, 8px)}.mr-xs{margin-right:var(--vi-spacing-xs, 8px)}.mb-xs{margin-bottom:var(--vi-spacing-xs, 8px)}.ml-xs{margin-left:var(--vi-spacing-xs, 8px)}.m-sm{margin:var(--vi-spacing-sm, 16px)}.mx-sm{margin-left:var(--vi-spacing-sm, 16px);margin-right:var(--vi-spacing-sm, 16px)}.my-sm{margin-top:var(--vi-spacing-sm, 16px);margin-bottom:var(--vi-spacing-sm, 16px)}.mt-sm{margin-top:var(--vi-spacing-sm, 16px)}.mr-sm{margin-right:var(--vi-spacing-sm, 16px)}.mb-sm{margin-bottom:var(--vi-spacing-sm, 16px)}.ml-sm{margin-left:var(--vi-spacing-sm, 16px)}.m-md{margin:var(--vi-spacing-md, 24px)}.mx-md{margin-left:var(--vi-spacing-md, 24px);margin-right:var(--vi-spacing-md, 24px)}.my-md{margin-top:var(--vi-spacing-md, 24px);margin-bottom:var(--vi-spacing-md, 24px)}.mt-md{margin-top:var(--vi-spacing-md, 24px)}.mr-md{margin-right:var(--vi-spacing-md, 24px)}.mb-md{margin-bottom:var(--vi-spacing-md, 24px)}.ml-md{margin-left:var(--vi-spacing-md, 24px)}.m-lg{margin:var(--vi-spacing-lg, 32px)}.mx-lg{margin-left:var(--vi-spacing-lg, 32px);margin-right:var(--vi-spacing-lg, 32px)}.my-lg{margin-top:var(--vi-spacing-lg, 32px);margin-bottom:var(--vi-spacing-lg, 32px)}.mt-lg{margin-top:var(--vi-spacing-lg, 32px)}.mr-lg{margin-right:var(--vi-spacing-lg, 32px)}.mb-lg{margin-bottom:var(--vi-spacing-lg, 32px)}.ml-lg{margin-left:var(--vi-spacing-lg, 32px)}.m-xl{margin:var(--vi-spacing-xl, 40px)}.mx-xl{margin-left:var(--vi-spacing-xl, 40px);margin-right:var(--vi-spacing-xl, 40px)}.my-xl{margin-top:var(--vi-spacing-xl, 40px);margin-bottom:var(--vi-spacing-xl, 40px)}.mt-xl{margin-top:var(--vi-spacing-xl, 40px)}.mr-xl{margin-right:var(--vi-spacing-xl, 40px)}.mb-xl{margin-bottom:var(--vi-spacing-xl, 40px)}.ml-xl{margin-left:var(--vi-spacing-xl, 40px)}.m-2xl{margin:var(--vi-spacing-2xl, 48px)}.mx-2xl{margin-left:var(--vi-spacing-2xl, 48px);margin-right:var(--vi-spacing-2xl, 48px)}.my-2xl{margin-top:var(--vi-spacing-2xl, 48px);margin-bottom:var(--vi-spacing-2xl, 48px)}.mt-2xl{margin-top:var(--vi-spacing-2xl, 48px)}.mr-2xl{margin-right:var(--vi-spacing-2xl, 48px)}.mb-2xl{margin-bottom:var(--vi-spacing-2xl, 48px)}.ml-2xl{margin-left:var(--vi-spacing-2xl, 48px)}.m-3xl{margin:var(--vi-spacing-3xl, 56px)}.mx-3xl{margin-left:var(--vi-spacing-3xl, 56px);margin-right:var(--vi-spacing-3xl, 56px)}.my-3xl{margin-top:var(--vi-spacing-3xl, 56px);margin-bottom:var(--vi-spacing-3xl, 56px)}.mt-3xl{margin-top:var(--vi-spacing-3xl, 56px)}.mr-3xl{margin-right:var(--vi-spacing-3xl, 56px)}.mb-3xl{margin-bottom:var(--vi-spacing-3xl, 56px)}.ml-3xl{margin-left:var(--vi-spacing-3xl, 56px)}.p-xs{padding:var(--vi-spacing-xs, 8px)}.px-xs{padding-left:var(--vi-spacing-xs, 8px);padding-right:var(--vi-spacing-xs, 8px)}.py-xs{padding-top:var(--vi-spacing-xs, 8px);padding-bottom:var(--vi-spacing-xs, 8px)}.pt-xs{padding-top:var(--vi-spacing-xs, 8px)}.pr-xs{padding-right:var(--vi-spacing-xs, 8px)}.pb-xs{padding-bottom:var(--vi-spacing-xs, 8px)}.pl-xs{padding-left:var(--vi-spacing-xs, 8px)}.p-sm{padding:var(--vi-spacing-sm, 16px)}.px-sm{padding-left:var(--vi-spacing-sm, 16px);padding-right:var(--vi-spacing-sm, 16px)}.py-sm{padding-top:var(--vi-spacing-sm, 16px);padding-bottom:var(--vi-spacing-sm, 16px)}.pt-sm{padding-top:var(--vi-spacing-sm, 16px)}.pr-sm{padding-right:var(--vi-spacing-sm, 16px)}.pb-sm{padding-bottom:var(--vi-spacing-sm, 16px)}.pl-sm{padding-left:var(--vi-spacing-sm, 16px)}.p-md{padding:var(--vi-spacing-md, 24px)}.px-md{padding-left:var(--vi-spacing-md, 24px);padding-right:var(--vi-spacing-md, 24px)}.py-md{padding-top:var(--vi-spacing-md, 24px);padding-bottom:var(--vi-spacing-md, 24px)}.pt-md{padding-top:var(--vi-spacing-md, 24px)}.pr-md{padding-right:var(--vi-spacing-md, 24px)}.pb-md{padding-bottom:var(--vi-spacing-md, 24px)}.pl-md{padding-left:var(--vi-spacing-md, 24px)}.p-lg{padding:var(--vi-spacing-lg, 32px)}.px-lg{padding-left:var(--vi-spacing-lg, 32px);padding-right:var(--vi-spacing-lg, 32px)}.py-lg{padding-top:var(--vi-spacing-lg, 32px);padding-bottom:var(--vi-spacing-lg, 32px)}.pt-lg{padding-top:var(--vi-spacing-lg, 32px)}.pr-lg{padding-right:var(--vi-spacing-lg, 32px)}.pb-lg{padding-bottom:var(--vi-spacing-lg, 32px)}.pl-lg{padding-left:var(--vi-spacing-lg, 32px)}.p-xl{padding:var(--vi-spacing-xl, 40px)}.px-xl{padding-left:var(--vi-spacing-xl, 40px);padding-right:var(--vi-spacing-xl, 40px)}.py-xl{padding-top:var(--vi-spacing-xl, 40px);padding-bottom:var(--vi-spacing-xl, 40px)}.pt-xl{padding-top:var(--vi-spacing-xl, 40px)}.pr-xl{padding-right:var(--vi-spacing-xl, 40px)}.pb-xl{padding-bottom:var(--vi-spacing-xl, 40px)}.pl-xl{padding-left:var(--vi-spacing-xl, 40px)}.p-2xl{padding:var(--vi-spacing-2xl, 48px)}.px-2xl{padding-left:var(--vi-spacing-2xl, 48px);padding-right:var(--vi-spacing-2xl, 48px)}.py-2xl{padding-top:var(--vi-spacing-2xl, 48px);padding-bottom:var(--vi-spacing-2xl, 48px)}.pt-2xl{padding-top:var(--vi-spacing-2xl, 48px)}.pr-2xl{padding-right:var(--vi-spacing-2xl, 48px)}.pb-2xl{padding-bottom:var(--vi-spacing-2xl, 48px)}.pl-2xl{padding-left:var(--vi-spacing-2xl, 48px)}.p-3xl{padding:var(--vi-spacing-3xl, 56px)}.px-3xl{padding-left:var(--vi-spacing-3xl, 56px);padding-right:var(--vi-spacing-3xl, 56px)}.py-3xl{padding-top:var(--vi-spacing-3xl, 56px);padding-bottom:var(--vi-spacing-3xl, 56px)}.pt-3xl{padding-top:var(--vi-spacing-3xl, 56px)}.pr-3xl{padding-right:var(--vi-spacing-3xl, 56px)}.pb-3xl{padding-bottom:var(--vi-spacing-3xl, 56px)}.pl-3xl{padding-left:var(--vi-spacing-3xl, 56px)}.text-xs{font-size:var(--vi-font-size-xs, 12px)}.text-sm{font-size:var(--vi-font-size-sm, 14px)}.text-base{font-size:var(--vi-font-size-base, 16px)}.text-lg{font-size:var(--vi-font-size-lg, 18px)}.text-xl{font-size:var(--vi-font-size-xl, 20px)}.text-2xl{font-size:var(--vi-font-size-2xl, 24px)}.text-3xl{font-size:var(--vi-font-size-3xl, 30px)}.font-light{font-weight:var(--vi-font-weight-light, 300)}.font-normal{font-weight:var(--vi-font-weight-normal, 400)}.font-medium{font-weight:var(--vi-font-weight-medium, 500)}.font-semibold{font-weight:var(--vi-font-weight-semibold, 600)}.font-bold{font-weight:var(--vi-font-weight-bold, 700)}.leading-tight{line-height:var(--vi-line-height-tight, 1.2)}.leading-normal{line-height:var(--vi-line-height-normal, 1.5)}.leading-relaxed{line-height:var(--vi-line-height-relaxed, 1.75)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--vi-color-primary, #3676d0)}.bg-primary{background-color:var(--vi-color-primary, #3676d0)}.border-primary{border-color:var(--vi-color-primary, #3676d0)}.text-secondary{color:var(--vi-color-secondary, #f0f4f8)}.bg-secondary{background-color:var(--vi-color-secondary, #f0f4f8)}.border-secondary{border-color:var(--vi-color-secondary, #f0f4f8)}.text-success{color:var(--vi-color-success, #489167)}.bg-success{background-color:var(--vi-color-success, #489167)}.border-success{border-color:var(--vi-color-success, #489167)}.text-warning{color:var(--vi-color-warning, #ffba00)}.bg-warning{background-color:var(--vi-color-warning, #ffba00)}.border-warning{border-color:var(--vi-color-warning, #ffba00)}.text-error{color:var(--vi-color-error, #ef4444)}.bg-error{background-color:var(--vi-color-error, #ef4444)}.border-error{border-color:var(--vi-color-error, #ef4444)}.text-info{color:var(--vi-color-info, #3676d0)}.bg-info{background-color:var(--vi-color-info, #3676d0)}.border-info{border-color:var(--vi-color-info, #3676d0)}.text-grey-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-grey-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.text-grey-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-grey-200{background-color:var(--vi-color-grey-200, #eeeeee)}.text-grey-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-grey-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.text-grey-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-grey-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.text-grey-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-grey-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.text-grey-600{color:var(--vi-color-grey-600, #757575)}.bg-grey-600{background-color:var(--vi-color-grey-600, #757575)}.text-grey-700{color:var(--vi-color-grey-700, #616161)}.bg-grey-700{background-color:var(--vi-color-grey-700, #616161)}.text-grey-800{color:var(--vi-color-grey-800, #424242)}.bg-grey-800{background-color:var(--vi-color-grey-800, #424242)}.text-grey-900{color:var(--vi-color-grey-900, #212121)}.bg-grey-900{background-color:var(--vi-color-grey-900, #212121)}.text-red-100{color:var(--vi-color-red-100, #ffccce)}.bg-red-100{background-color:var(--vi-color-red-100, #ffccce)}.text-red-200{color:var(--vi-color-red-200, #f69892)}.bg-red-200{background-color:var(--vi-color-red-200, #f69892)}.text-red-300{color:var(--vi-color-red-300, #ee6f68)}.bg-red-300{background-color:var(--vi-color-red-300, #ee6f68)}.text-red-400{color:var(--vi-color-red-400, #f74d40)}.bg-red-400{background-color:var(--vi-color-red-400, #f74d40)}.text-red-500{color:var(--vi-color-red-500, #fb3c1e)}.bg-red-500{background-color:var(--vi-color-red-500, #fb3c1e)}.text-red-600{color:var(--vi-color-red-600, #ed3020)}.bg-red-600{background-color:var(--vi-color-red-600, #ed3020)}.text-red-700{color:var(--vi-color-red-700, #db231b)}.bg-red-700{background-color:var(--vi-color-red-700, #db231b)}.text-red-800{color:var(--vi-color-red-800, #ce1a12)}.bg-red-800{background-color:var(--vi-color-red-800, #ce1a12)}.text-red-900{color:var(--vi-color-red-900, #c00000)}.bg-red-900{background-color:var(--vi-color-red-900, #c00000)}.text-yellow-100{color:var(--vi-color-yellow-100, #ffeab1)}.bg-yellow-100{background-color:var(--vi-color-yellow-100, #ffeab1)}.text-yellow-200{color:var(--vi-color-yellow-200, #ffde85)}.bg-yellow-200{background-color:var(--vi-color-yellow-200, #ffde85)}.text-yellow-300{color:var(--vi-color-yellow-300, #ffd359)}.bg-yellow-300{background-color:var(--vi-color-yellow-300, #ffd359)}.text-yellow-400{color:var(--vi-color-yellow-400, #ffc72e)}.bg-yellow-400{background-color:var(--vi-color-yellow-400, #ffc72e)}.text-yellow-500{color:var(--vi-color-yellow-500, #ffba00)}.bg-yellow-500{background-color:var(--vi-color-yellow-500, #ffba00)}.text-yellow-600{color:var(--vi-color-yellow-600, #ffa900)}.bg-yellow-600{background-color:var(--vi-color-yellow-600, #ffa900)}.text-yellow-700{color:var(--vi-color-yellow-700, #ff9900)}.bg-yellow-700{background-color:var(--vi-color-yellow-700, #ff9900)}.text-yellow-800{color:var(--vi-color-yellow-800, #e68300)}.bg-yellow-800{background-color:var(--vi-color-yellow-800, #e68300)}.text-yellow-900{color:var(--vi-color-yellow-900, #cc6d00)}.bg-yellow-900{background-color:var(--vi-color-yellow-900, #cc6d00)}.text-green-100{color:var(--vi-color-green-100, #e6f0eb)}.bg-green-100{background-color:var(--vi-color-green-100, #e6f0eb)}.text-green-200{color:var(--vi-color-green-200, #c0dbcd)}.bg-green-200{background-color:var(--vi-color-green-200, #c0dbcd)}.text-green-300{color:var(--vi-color-green-300, #96c4ab)}.bg-green-300{background-color:var(--vi-color-green-300, #96c4ab)}.text-green-400{color:var(--vi-color-green-400, #6eab88)}.bg-green-400{background-color:var(--vi-color-green-400, #6eab88)}.text-green-500{color:var(--vi-color-green-500, #489167)}.bg-green-500{background-color:var(--vi-color-green-500, #489167)}.text-green-600{color:var(--vi-color-green-600, #367551)}.bg-green-600{background-color:var(--vi-color-green-600, #367551)}.text-green-700{color:var(--vi-color-green-700, #265a3d)}.bg-green-700{background-color:var(--vi-color-green-700, #265a3d)}.text-green-800{color:var(--vi-color-green-800, #17402a)}.bg-green-800{background-color:var(--vi-color-green-800, #17402a)}.text-green-900{color:var(--vi-color-green-900, #0a2618)}.bg-green-900{background-color:var(--vi-color-green-900, #0a2618)}.text-blue-100{color:var(--vi-color-blue-100, #ebf5ff)}.bg-blue-100{background-color:var(--vi-color-blue-100, #ebf5ff)}.text-blue-200{color:var(--vi-color-blue-200, #cee6ff)}.bg-blue-200{background-color:var(--vi-color-blue-200, #cee6ff)}.text-blue-300{color:var(--vi-color-blue-300, #a3d1fa)}.bg-blue-300{background-color:var(--vi-color-blue-300, #a3d1fa)}.text-blue-400{color:var(--vi-color-blue-400, #74b6f4)}.bg-blue-400{background-color:var(--vi-color-blue-400, #74b6f4)}.text-blue-500{color:var(--vi-color-blue-500, #3f96f1)}.bg-blue-500{background-color:var(--vi-color-blue-500, #3f96f1)}.text-blue-600{color:var(--vi-color-blue-600, #3b86de)}.bg-blue-600{background-color:var(--vi-color-blue-600, #3b86de)}.text-blue-700{color:var(--vi-color-blue-700, #3676d0)}.bg-blue-700{background-color:var(--vi-color-blue-700, #3676d0)}.text-blue-800{color:var(--vi-color-blue-800, #2d5fa8)}.bg-blue-800{background-color:var(--vi-color-blue-800, #2d5fa8)}.text-blue-900{color:var(--vi-color-blue-900, #254882)}.bg-blue-900{background-color:var(--vi-color-blue-900, #254882)}.text-purple-100{color:var(--vi-color-purple-100, #f0e5f9)}.bg-purple-100{background-color:var(--vi-color-purple-100, #f0e5f9)}.text-purple-200{color:var(--vi-color-purple-200, #dbbdf2)}.bg-purple-200{background-color:var(--vi-color-purple-200, #dbbdf2)}.text-purple-300{color:var(--vi-color-purple-300, #c18eeb)}.bg-purple-300{background-color:var(--vi-color-purple-300, #c18eeb)}.text-purple-400{color:var(--vi-color-purple-400, #a454e2)}.bg-purple-400{background-color:var(--vi-color-purple-400, #a454e2)}.text-purple-500{color:var(--vi-color-purple-500, #7609d0)}.bg-purple-500{background-color:var(--vi-color-purple-500, #7609d0)}.text-purple-600{color:var(--vi-color-purple-600, #6507c9)}.bg-purple-600{background-color:var(--vi-color-purple-600, #6507c9)}.text-purple-700{color:var(--vi-color-purple-700, #5505c2)}.bg-purple-700{background-color:var(--vi-color-purple-700, #5505c2)}.text-purple-800{color:var(--vi-color-purple-800, #4403bb)}.bg-purple-800{background-color:var(--vi-color-purple-800, #4403bb)}.text-purple-900{color:var(--vi-color-purple-900, #3400b4)}.bg-purple-900{background-color:var(--vi-color-purple-900, #3400b4)}.text-neutral-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-neutral-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.border-neutral-100{border-color:var(--vi-color-grey-100, #f5f5f5)}.text-neutral-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-neutral-200{background-color:var(--vi-color-grey-200, #eeeeee)}.border-neutral-200{border-color:var(--vi-color-grey-200, #eeeeee)}.text-neutral-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-neutral-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.border-neutral-300{border-color:var(--vi-color-grey-300, #e0e0e0)}.text-neutral-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-neutral-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.border-neutral-400{border-color:var(--vi-color-grey-400, #bdbdbd)}.text-neutral-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-neutral-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.border-neutral-500{border-color:var(--vi-color-grey-500, #9e9e9e)}.text-neutral-600{color:var(--vi-color-grey-600, #757575)}.bg-neutral-600{background-color:var(--vi-color-grey-600, #757575)}.border-neutral-600{border-color:var(--vi-color-grey-600, #757575)}.text-neutral-700{color:var(--vi-color-grey-700, #616161)}.bg-neutral-700{background-color:var(--vi-color-grey-700, #616161)}.border-neutral-700{border-color:var(--vi-color-grey-700, #616161)}.text-neutral-800{color:var(--vi-color-grey-800, #424242)}.bg-neutral-800{background-color:var(--vi-color-grey-800, #424242)}.border-neutral-800{border-color:var(--vi-color-grey-800, #424242)}.text-neutral-900{color:var(--vi-color-grey-900, #212121)}.bg-neutral-900{background-color:var(--vi-color-grey-900, #212121)}.border-neutral-900{border-color:var(--vi-color-grey-900, #212121)}.shadow-sm{box-shadow:var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))}.shadow-md{box-shadow:var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}.shadow-lg{box-shadow:var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1))}.shadow-xl{box-shadow:var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1))}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--vi-border-radius-sm, 2px)}.rounded-md{border-radius:var(--vi-border-radius-md, 4px)}.rounded-lg{border-radius:var(--vi-border-radius-lg, 8px)}.rounded-xl{border-radius:var(--vi-border-radius-xl, 12px)}.rounded-full{border-radius:9999px}.border-thin{border-width:var(--vi-border-width-thin, 1px);border-style:solid}.border-base{border-width:var(--vi-border-width-base, 2px);border-style:solid}.border-thick{border-width:var(--vi-border-width-thick, 3px);border-style:solid}.z-hide{z-index:-1}.z-auto{z-index:auto}.z-base{z-index:0}.z-dropdown{z-index:1000}.z-sticky{z-index:1020}.z-fixed{z-index:1030}.z-backdrop{z-index:1040}.z-modal{z-index:1050}.z-popover{z-index:1060}.z-tooltip{z-index:1070}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.gap-xs{gap:var(--vi-spacing-xs, 8px)}.gap-x-xs{column-gap:var(--vi-spacing-xs, 8px)}.gap-y-xs{row-gap:var(--vi-spacing-xs, 8px)}.gap-sm{gap:var(--vi-spacing-sm, 16px)}.gap-x-sm{column-gap:var(--vi-spacing-sm, 16px)}.gap-y-sm{row-gap:var(--vi-spacing-sm, 16px)}.gap-md{gap:var(--vi-spacing-md, 24px)}.gap-x-md{column-gap:var(--vi-spacing-md, 24px)}.gap-y-md{row-gap:var(--vi-spacing-md, 24px)}.gap-lg{gap:var(--vi-spacing-lg, 32px)}.gap-x-lg{column-gap:var(--vi-spacing-lg, 32px)}.gap-y-lg{row-gap:var(--vi-spacing-lg, 32px)}.gap-xl{gap:var(--vi-spacing-xl, 40px)}.gap-x-xl{column-gap:var(--vi-spacing-xl, 40px)}.gap-y-xl{row-gap:var(--vi-spacing-xl, 40px)}.gap-2xl{gap:var(--vi-spacing-2xl, 48px)}.gap-x-2xl{column-gap:var(--vi-spacing-2xl, 48px)}.gap-y-2xl{row-gap:var(--vi-spacing-2xl, 48px)}.gap-3xl{gap:var(--vi-spacing-3xl, 56px)}.gap-x-3xl{column-gap:var(--vi-spacing-3xl, 56px)}.gap-y-3xl{row-gap:var(--vi-spacing-3xl, 56px)}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}.transition-opacity{transition:opacity .2s ease-in-out}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}}/*# sourceMappingURL=flux-ui.css.map */

package/flux-ui.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECvFF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YFiIe,8FEhIf,UFqIa,+BEpIb,YFiJkB,kCEhJlB,MF+Ee,oCE9Ef,iBF6Ee,oCE5Ef,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YFkFe,wEEjFf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IHsFW,0BGnFb,QACE,IHmFW,2BGhFb,QACE,IHgFW,2BG7Eb,QACE,IH6EW,2BG1Eb,QACE,IH0EW,2BGvEb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBCnNJ,iBAMI,MACE,OJkSQ,0BI/RV,OACE,YJ8RQ,0BI7RR,aJ6RQ,0BI1RV,OACE,WJyRQ,0BIxRR,cJwRQ,0BIrRV,OACE,WJoRQ,0BIjRV,OACE,aJgRQ,0BI7QV,OACE,cJ4QQ,0BIzQV,OACE,YJwQQ,0BInSV,MACE,OJkSQ,2BI/RV,OACE,YJ8RQ,2BI7RR,aJ6RQ,2BI1RV,OACE,WJyRQ,2BIxRR,cJwRQ,2BIrRV,OACE,WJoRQ,2BIjRV,OACE,aJgRQ,2BI7QV,OACE,cJ4QQ,2BIzQV,OACE,YJwQQ,2BInSV,MACE,OJkSQ,2BI/RV,OACE,YJ8RQ,2BI7RR,aJ6RQ,2BI1RV,OACE,WJyRQ,2BIxRR,cJwRQ,2BIrRV,OACE,WJoRQ,2BIjRV,OACE,aJgRQ,2BI7QV,OACE,cJ4QQ,2BIzQV,OACE,YJwQQ,2BInSV,MACE,OJkSQ,2BI/RV,OACE,YJ8RQ,2BI7RR,aJ6RQ,2BI1RV,OACE,WJyRQ,2BIxRR,cJwRQ,2BIrRV,OACE,WJoRQ,2BIjRV,OACE,aJgRQ,2BI7QV,OACE,cJ4QQ,2BIzQV,OACE,YJwQQ,2BInSV,MACE,OJkSQ,2BI/RV,OACE,YJ8RQ,2BI7RR,aJ6RQ,2BI1RV,OACE,WJyRQ,2BIxRR,cJwRQ,2BIrRV,OACE,WJoRQ,2BIjRV,OACE,aJgRQ,2BI7QV,OACE,cJ4QQ,2BIzQV,OACE,YJwQQ,2BInSV,OACE,OJkSQ,4BI/RV,QACE,YJ8RQ,4BI7RR,aJ6RQ,4BI1RV,QACE,WJyRQ,4BIxRR,cJwRQ,4BIrRV,QACE,WJoRQ,4BIjRV,QACE,aJgRQ,4BI7QV,QACE,cJ4QQ,4BIzQV,QACE,YJwQQ,4BInSV,OACE,OJkSQ,4BI/RV,QACE,YJ8RQ,4BI7RR,aJ6RQ,4BI1RV,QACE,WJyRQ,4BIxRR,cJwRQ,4BIrRV,QACE,WJoRQ,4BIjRV,QACE,aJgRQ,4BI7QV,QACE,cJ4QQ,4BIzQV,QACE,YJwQQ,4BI/PV,MACE,QJ8PQ,0BI3PV,OACE,aJ0PQ,0BIzPR,cJyPQ,0BItPV,OACE,YJqPQ,0BIpPR,eJoPQ,0BIjPV,OACE,YJgPQ,0BI7OV,OACE,cJ4OQ,0BIzOV,OACE,eJwOQ,0BIrOV,OACE,aJoOQ,0BI/PV,MACE,QJ8PQ,2BI3PV,OACE,aJ0PQ,2BIzPR,cJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,eJoPQ,2BIjPV,OACE,YJgPQ,2BI7OV,OACE,cJ4OQ,2BIzOV,OACE,eJwOQ,2BIrOV,OACE,aJoOQ,2BI/PV,MACE,QJ8PQ,2BI3PV,OACE,aJ0PQ,2BIzPR,cJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,eJoPQ,2BIjPV,OACE,YJgPQ,2BI7OV,OACE,cJ4OQ,2BIzOV,OACE,eJwOQ,2BIrOV,OACE,aJoOQ,2BI/PV,MACE,QJ8PQ,2BI3PV,OACE,aJ0PQ,2BIzPR,cJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,eJoPQ,2BIjPV,OACE,YJgPQ,2BI7OV,OACE,cJ4OQ,2BIzOV,OACE,eJwOQ,2BIrOV,OACE,aJoOQ,2BI/PV,MACE,QJ8PQ,2BI3PV,OACE,aJ0PQ,2BIzPR,cJyPQ,2BItPV,OACE,YJqPQ,2BIpPR,eJoPQ,2BIjPV,OACE,YJgPQ,2BI7OV,OACE,cJ4OQ,2BIzOV,OACE,eJwOQ,2BIrOV,OACE,aJoOQ,2BI/PV,OACE,QJ8PQ,4BI3PV,QACE,aJ0PQ,4BIzPR,cJyPQ,4BItPV,QACE,YJqPQ,4BIpPR,eJoPQ,4BIjPV,QACE,YJgPQ,4BI7OV,QACE,cJ4OQ,4BIzOV,QACE,eJwOQ,4BIrOV,QACE,aJoOQ,4BI/PV,OACE,QJ8PQ,4BI3PV,QACE,aJ0PQ,4BIzPR,cJyPQ,4BItPV,QACE,YJqPQ,4BIpPR,eJoPQ,4BIjPV,QACE,YJgPQ,4BI7OV,QACE,cJ4OQ,4BIzOV,QACE,eJwOQ,4BIrOV,QACE,aJoOQ,4BI5NZ,SACE,UJkFa,6BI/Ef,SACE,UJ+Ea,6BI5Ef,WACE,UJ4Ea,+BIzEf,SACE,UJyEa,6BItEf,SACE,UJsEa,6BInEf,UACE,UJmEa,8BIhEf,UACE,UJgEa,8BI7Df,YACE,YJ8DmB,iCI3DrB,aACE,YJ2DmB,kCIxDrB,aACE,YJwDmB,kCIrDrB,eACE,YJqDmB,oCIlDrB,WACE,YJkDmB,gCI/CrB,eACE,YJgDkB,iCI7CpB,gBACE,YJ6CkB,kCI1CpB,iBACE,YJ0CkB,oCIvCpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,MJqIM,iCIlIR,YACE,iBJiIM,iCI9HR,gBACE,aJ6HM,iCItIR,gBACE,MJqIM,mCIlIR,cACE,iBJiIM,mCI9HR,kBACE,aJ6HM,mCItIR,cACE,MJqIM,iCIlIR,YACE,iBJiIM,iCI9HR,gBACE,aJ6HM,iCItIR,cACE,MJqIM,iCIlIR,YACE,iBJiIM,iCI9HR,gBACE,aJ6HM,iCItIR,YACE,MJqIM,+BIlIR,UACE,iBJiIM,+BI9HR,cACE,aJ6HM,+BItIR,WACE,MJqIM,8BIlIR,SACE,iBJiIM,8BI9HR,aACE,aJ6HM,8BIrHN,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,cACE,MJ0GO,iCIvGT,YACE,iBJsGO,iCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,gBACE,MJ0GO,mCIvGT,cACE,iBJsGO,mCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,eACE,MJ0GO,kCIvGT,aACE,iBJsGO,kCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI3GT,iBACE,MJ0GO,oCIvGT,eACE,iBJsGO,oCI/FX,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIrBb,kBACE,MJoBW,kCIjBb,gBACE,iBJgBW,kCIbb,oBACE,aJYW,kCIHb,WACE,WJyGO,qDI1GT,WACE,WJyGO,uDI1GT,WACE,WJyGO,yDI1GT,WACE,WJyGO,yDIjGX,cACE,gBAGF,YACE,cJ5Be,gCI+BjB,YACE,cJ/Be,gCIkCjB,YACE,cJlCe,gCIqCjB,YACE,cJrCe,iCIwCjB,cACE,qBAOF,aACE,aJ7CiB,iCI8CjB,mBAGF,aACE,aJjDiB,iCIkDjB,mBAGF,cACE,aJrDiB,kCIsDjB,mBAQA,QACE,QJoFQ,GIrFV,QACE,QJoFQ,KIrFV,QACE,QJoFQ,EIrFV,YACE,QJoFQ,KIrFV,UACE,QJoFQ,KIrFV,SACE,QJoFQ,KIrFV,YACE,QJoFQ,KIrFV,SACE,QJoFQ,KIrFV,WACE,QJoFQ,KIrFV,WACE,QJoFQ,KI5EZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,IJhGQ,0BImGV,UACE,WJpGQ,0BIuGV,UACE,QJxGQ,0BI+FV,QACE,IJhGQ,2BImGV,UACE,WJpGQ,2BIuGV,UACE,QJxGQ,2BI+FV,QACE,IJhGQ,2BImGV,UACE,WJpGQ,2BIuGV,UACE,QJxGQ,2BI+FV,QACE,IJhGQ,2BImGV,UACE,WJpGQ,2BIuGV,UACE,QJxGQ,2BI+FV,QACE,IJhGQ,2BImGV,UACE,WJpGQ,2BIuGV,UACE,QJxGQ,2BI+FV,SACE,IJhGQ,4BImGV,WACE,WJpGQ,4BIuGV,WACE,QJxGQ,4BI+FV,SACE,IJhGQ,4BImGV,WACE,WJpGQ,4BIuGV,WACE,QJxGQ,4BIgHZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}
+{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YFiIe,8FEhIf,UFqIa,+BEpIb,YFiJkB,kCEhJlB,MF+Ee,oCE9Ef,iBF6Ee,oCE5Ef,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YFkFe,wEEjFf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IHsFW,0BGnFb,QACE,IHmFW,2BGhFb,QACE,IHgFW,2BG7Eb,QACE,IH6EW,2BG1Eb,QACE,IH0EW,2BGvEb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBC3LJ,+PACE,0GACA,mCACA,kCACA,SAQF,kBAIE,KACE,sIACA,iEACA,wEACA,yEACA,gFACA,mEACA,mCACA,kCAKF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,GAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,EAEE,iEACA,wEACA,yEACA,gFACA,mEAMF,MAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,MAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,SAEE,gDAGF,KAEE,kBAKF,WAEE,+DACA,wEACA,yEACA,kFACA,iEAKF,cAIE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAGF,IAEE,gHACA,4DACA,wEACA,gEACA,4BAKF,WAEE,+DACA,uEACA,2EACA,gFACA,iEACA,kBACA,UAKF,GAEE,gEACA,2EACA,yEACA,mFACA,oEAGF,GAEE,+DACA,wEACA,yEACA,kEAUJ,iBAIE,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,mEACA,6EACA,2EACA,sFACA,sEAKF,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,eAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,eAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,YAEE,+DACA,wEACA,2EACA,gFACA,mEAGF,YAEE,iEACA,wEACA,yEACA,gFACA,mEAGF,YAEE,+DACA,wEACA,yEACA,gFACA,iEAKF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAGF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,YAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,aAEE,gEACA,2EACA,yEACA,mFACA,yBACA,kEAGF,SACE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAKF,uDACA,wDACA,gEACA,0DACA,kCACA,kBACE,gBACA,mBACA,uBAEF,mCAIA,0EACA,wEACA,wEACA,yEACA,2ECjYF,iBAMI,MACE,OL4SQ,0BKzSV,OACE,YLwSQ,0BKvSR,aLuSQ,0BKpSV,OACE,WLmSQ,0BKlSR,cLkSQ,0BK/RV,OACE,WL8RQ,0BK3RV,OACE,aL0RQ,0BKvRV,OACE,cLsRQ,0BKnRV,OACE,YLkRQ,0BK7SV,MACE,OL4SQ,2BKzSV,OACE,YLwSQ,2BKvSR,aLuSQ,2BKpSV,OACE,WLmSQ,2BKlSR,cLkSQ,2BK/RV,OACE,WL8RQ,2BK3RV,OACE,aL0RQ,2BKvRV,OACE,cLsRQ,2BKnRV,OACE,YLkRQ,2BK7SV,MACE,OL4SQ,2BKzSV,OACE,YLwSQ,2BKvSR,aLuSQ,2BKpSV,OACE,WLmSQ,2BKlSR,cLkSQ,2BK/RV,OACE,WL8RQ,2BK3RV,OACE,aL0RQ,2BKvRV,OACE,cLsRQ,2BKnRV,OACE,YLkRQ,2BK7SV,MACE,OL4SQ,2BKzSV,OACE,YLwSQ,2BKvSR,aLuSQ,2BKpSV,OACE,WLmSQ,2BKlSR,cLkSQ,2BK/RV,OACE,WL8RQ,2BK3RV,OACE,aL0RQ,2BKvRV,OACE,cLsRQ,2BKnRV,OACE,YLkRQ,2BK7SV,MACE,OL4SQ,2BKzSV,OACE,YLwSQ,2BKvSR,aLuSQ,2BKpSV,OACE,WLmSQ,2BKlSR,cLkSQ,2BK/RV,OACE,WL8RQ,2BK3RV,OACE,aL0RQ,2BKvRV,OACE,cLsRQ,2BKnRV,OACE,YLkRQ,2BK7SV,OACE,OL4SQ,4BKzSV,QACE,YLwSQ,4BKvSR,aLuSQ,4BKpSV,QACE,WLmSQ,4BKlSR,cLkSQ,4BK/RV,QACE,WL8RQ,4BK3RV,QACE,aL0RQ,4BKvRV,QACE,cLsRQ,4BKnRV,QACE,YLkRQ,4BK7SV,OACE,OL4SQ,4BKzSV,QACE,YLwSQ,4BKvSR,aLuSQ,4BKpSV,QACE,WLmSQ,4BKlSR,cLkSQ,4BK/RV,QACE,WL8RQ,4BK3RV,QACE,aL0RQ,4BKvRV,QACE,cLsRQ,4BKnRV,QACE,YLkRQ,4BKzQV,MACE,QLwQQ,0BKrQV,OACE,aLoQQ,0BKnQR,cLmQQ,0BKhQV,OACE,YL+PQ,0BK9PR,eL8PQ,0BK3PV,OACE,YL0PQ,0BKvPV,OACE,cLsPQ,0BKnPV,OACE,eLkPQ,0BK/OV,OACE,aL8OQ,0BKzQV,MACE,QLwQQ,2BKrQV,OACE,aLoQQ,2BKnQR,cLmQQ,2BKhQV,OACE,YL+PQ,2BK9PR,eL8PQ,2BK3PV,OACE,YL0PQ,2BKvPV,OACE,cLsPQ,2BKnPV,OACE,eLkPQ,2BK/OV,OACE,aL8OQ,2BKzQV,MACE,QLwQQ,2BKrQV,OACE,aLoQQ,2BKnQR,cLmQQ,2BKhQV,OACE,YL+PQ,2BK9PR,eL8PQ,2BK3PV,OACE,YL0PQ,2BKvPV,OACE,cLsPQ,2BKnPV,OACE,eLkPQ,2BK/OV,OACE,aL8OQ,2BKzQV,MACE,QLwQQ,2BKrQV,OACE,aLoQQ,2BKnQR,cLmQQ,2BKhQV,OACE,YL+PQ,2BK9PR,eL8PQ,2BK3PV,OACE,YL0PQ,2BKvPV,OACE,cLsPQ,2BKnPV,OACE,eLkPQ,2BK/OV,OACE,aL8OQ,2BKzQV,MACE,QLwQQ,2BKrQV,OACE,aLoQQ,2BKnQR,cLmQQ,2BKhQV,OACE,YL+PQ,2BK9PR,eL8PQ,2BK3PV,OACE,YL0PQ,2BKvPV,OACE,cLsPQ,2BKnPV,OACE,eLkPQ,2BK/OV,OACE,aL8OQ,2BKzQV,OACE,QLwQQ,4BKrQV,QACE,aLoQQ,4BKnQR,cLmQQ,4BKhQV,QACE,YL+PQ,4BK9PR,eL8PQ,4BK3PV,QACE,YL0PQ,4BKvPV,QACE,cLsPQ,4BKnPV,QACE,eLkPQ,4BK/OV,QACE,aL8OQ,4BKzQV,OACE,QLwQQ,4BKrQV,QACE,aLoQQ,4BKnQR,cLmQQ,4BKhQV,QACE,YL+PQ,4BK9PR,eL8PQ,4BK3PV,QACE,YL0PQ,4BKvPV,QACE,cLsPQ,4BKnPV,QACE,eLkPQ,4BK/OV,QACE,aL8OQ,4BKtOZ,SACE,ULkFa,6BK/Ef,SACE,UL+Ea,6BK5Ef,WACE,UL4Ea,+BKzEf,SACE,ULyEa,6BKtEf,SACE,ULsEa,6BKnEf,UACE,ULmEa,8BKhEf,UACE,ULgEa,8BK7Df,YACE,YL8DmB,iCK3DrB,aACE,YL2DmB,kCKxDrB,aACE,YLwDmB,kCKrDrB,eACE,YLqDmB,oCKlDrB,WACE,YLkDmB,gCK/CrB,eACE,YLgDkB,iCK7CpB,gBACE,YL6CkB,kCK1CpB,iBACE,YL0CkB,oCKvCpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,ML+IM,iCK5IR,YACE,iBL2IM,iCKxIR,gBACE,aLuIM,iCKhJR,gBACE,ML+IM,mCK5IR,cACE,iBL2IM,mCKxIR,kBACE,aLuIM,mCKhJR,cACE,ML+IM,iCK5IR,YACE,iBL2IM,iCKxIR,gBACE,aLuIM,iCKhJR,cACE,ML+IM,iCK5IR,YACE,iBL2IM,iCKxIR,gBACE,aLuIM,iCKhJR,YACE,ML+IM,+BK5IR,UACE,iBL2IM,+BKxIR,cACE,aLuIM,+BKhJR,WACE,ML+IM,8BK5IR,SACE,iBL2IM,8BKxIR,aACE,aLuIM,8BK/HN,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,cACE,MLoHO,iCKjHT,YACE,iBLgHO,iCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,gBACE,MLoHO,mCKjHT,cACE,iBLgHO,mCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,eACE,MLoHO,kCKjHT,aACE,iBLgHO,kCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKrHT,iBACE,MLoHO,oCKjHT,eACE,iBLgHO,oCKzGX,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCK/Bb,kBACE,ML8BW,kCK3Bb,gBACE,iBL0BW,kCKvBb,oBACE,aLsBW,kCKbb,WACE,WLmHO,qDKpHT,WACE,WLmHO,uDKpHT,WACE,WLmHO,yDKpHT,WACE,WLmHO,yDK3GX,cACE,gBAGF,YACE,cLlBe,gCKqBjB,YACE,cLrBe,gCKwBjB,YACE,cLxBe,gCK2BjB,YACE,cL3Be,iCK8BjB,cACE,qBAOF,aACE,aLnCiB,iCKoCjB,mBAGF,aACE,aLvCiB,iCKwCjB,mBAGF,cACE,aL3CiB,kCK4CjB,mBAQA,QACE,QL8FQ,GK/FV,QACE,QL8FQ,KK/FV,QACE,QL8FQ,EK/FV,YACE,QL8FQ,KK/FV,UACE,QL8FQ,KK/FV,SACE,QL8FQ,KK/FV,YACE,QL8FQ,KK/FV,SACE,QL8FQ,KK/FV,WACE,QL8FQ,KK/FV,WACE,QL8FQ,KKtFZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,ILtFQ,0BKyFV,UACE,WL1FQ,0BK6FV,UACE,QL9FQ,0BKqFV,QACE,ILtFQ,2BKyFV,UACE,WL1FQ,2BK6FV,UACE,QL9FQ,2BKqFV,QACE,ILtFQ,2BKyFV,UACE,WL1FQ,2BK6FV,UACE,QL9FQ,2BKqFV,QACE,ILtFQ,2BKyFV,UACE,WL1FQ,2BK6FV,UACE,QL9FQ,2BKqFV,QACE,ILtFQ,2BKyFV,UACE,WL1FQ,2BK6FV,UACE,QL9FQ,2BKqFV,SACE,ILtFQ,4BKyFV,WACE,WL1FQ,4BK6FV,WACE,QL9FQ,4BKqFV,SACE,ILtFQ,4BKyFV,WACE,WL1FQ,4BK6FV,WACE,QL9FQ,4BKsGZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}

package/flux-ui.scss

@@ -12,4 +12,5 @@
 @use 'styles/root';
 @use 'styles/reset';
 @use 'styles/layout';
+@use 'styles/typography';
 @use 'styles/utilities';

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/flux-ui/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@vialiq/flux-ui",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/prasworld/Vialiq.git"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "type": "module",
   "description": "Custom minimal CSS/SASS framework for microfrontend product",
   "license": "MIT",
@@ -16,17 +16,17 @@
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "default": "./index.js",
-      "types": "./index.d.ts"
+      "types": "./index.d.ts",
+      "default": "./index.js"
     },
     "./tokens": {
-      "default": "./tokens/index.js",
-      "types": "./tokens/index.d.ts"
+      "types": "./tokens/index.d.ts",
+      "default": "./tokens/index.js"
     },
     "./styles": {
       "sass": "./styles/_index.scss",
-      "default": "./styles/index.js",
-      "types": "./styles/index.d.ts"
+      "types": "./styles/index.d.ts",
+      "default": "./styles/index.js"
     },
     "./styles/*": "./styles/*",
     "./components": "./components/_index.scss",
@@ -36,7 +36,6 @@
   "files": [
     "index.js",
     "index.d.ts",
-    "index.js.map",
     "index.d.ts.map",
     "*.scss",
     "styles/",

package/styles/_index.scss

@@ -5,3 +5,4 @@
 @forward 'theme';
 @forward 'layout';
 @forward 'utilities';
+@forward 'typography';

package/styles/_root.scss

@@ -74,6 +74,19 @@
   --vi-line-height-normal: #{strip-units($line-height-normal)};
   --vi-line-height-relaxed: #{strip-units($line-height-relaxed)};
 
+  // ========================================================================
+  // Typography — Letter Spacing
+  // ========================================================================
+  // Use strip-units() to extract the fallback from var() wrapper.
+  // Since SCSS tokens are defined as var(--vi-letter-spacing-*, fallback),
+  // emitting them directly would create self-referential CSS. strip-units()
+  // extracts just the fallback (e.g., -0.01em), avoiding the circular reference.
+  --vi-letter-spacing-tight:  #{strip-units($letter-spacing-tight)};
+  --vi-letter-spacing-normal: #{strip-units($letter-spacing-normal)};
+  --vi-letter-spacing-wide:   #{strip-units($letter-spacing-wide)};
+  --vi-letter-spacing-wider:  #{strip-units($letter-spacing-wider)};
+  --vi-letter-spacing-widest: #{strip-units($letter-spacing-widest)};
+
   // ========================================================================
   // Shadows
   // ========================================================================

package/styles/_theme.scss

@@ -49,12 +49,6 @@ $vi-theme--light: (
   'bg-error':               #ffebee,
   'bg-info':                #e3f2fd,
 
-  // Layer/depth
-  'layer-01':               $color-grey-100,      // Surface
-  'layer-02':               $color-grey-200,      // Raised
-  'layer-03':               $color-grey-300,      // Elevated
-  'layer-hover':            $color-grey-200,
-  'layer-active':           $color-grey-300,
   // Layer/depth backgrounds (Light to Dark)
   'layer-01':               #ffffff,
   'layer-02':               $color-grey-100,

package/styles/_typography.scss

@@ -0,0 +1,397 @@
+/**
+ * Semantic Typography System
+ * ==========================
+ * Two layers:
+ *
+ * 1. @layer components — element defaults
+ *    Native HTML elements (h1–h6, p, label, small, code…) receive the correct
+ *    type role automatically. No class names needed in markup.
+ *
+ * 2. @layer utilities — explicit role classes
+ *    .vi-display-lg, .vi-heading-xl … give access to any role on any element,
+ *    and override the element defaults (utilities > components in cascade).
+ *
+ * All axes are CSS-custom-property–backed, so any consumer can override at
+ * :root (theme), a scoped selector, or an individual element.
+ *
+ * Type scale (inspired by M3, Carbon and Atlassian):
+ *   Display  lg / md      — hero, marketing (3xl → 2xl)
+ *   Heading  xl→sm        — page / section / widget / sidebar (xl → sm)
+ *   Body     lg / md / sm — long-form / UI / secondary
+ *   Label    md / sm      — form labels, chips, nav
+ *   Caption               — timestamps, fine print
+ *   Overline              — all-caps category markers
+ *   Code                  — monospace snippets
+ */
+
+@use 'variables' as tokens;
+
+// ---------------------------------------------------------------------------
+// Shared placeholder — pulled in by both layers via @extend.
+// Must live outside any layer so @extend can reach it from both.
+// ---------------------------------------------------------------------------
+
+%type-base {
+  font-family: #{tokens.$font-family-base};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+}
+
+// ===========================================================================
+// LAYER 1 — element defaults (components layer, lowest priority)
+// Native HTML → type role binding. Zero class names required.
+// ===========================================================================
+
+@layer components {
+
+  // ── Body defaults ─────────────────────────────────────────────────────────
+  // body already set in _reset.scss but we re-affirm with token vars here.
+  body {
+    font-family: var(--vi-font-family-base, #{tokens.$font-family-base});
+    font-size: var(--vi-body-md-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-body-md-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-md-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-body-md-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-md-color, #{tokens.$color-foreground});
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  // ── Headings ──────────────────────────────────────────────────────────────
+
+  h1 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h1-size, #{tokens.$font-size-3xl});
+    font-weight: var(--vi-heading-h1-weight, #{tokens.$font-weight-bold});
+    line-height: var(--vi-heading-h1-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h1-tracking, #{tokens.$letter-spacing-tight});
+    color: var(--vi-heading-h1-color, #{tokens.$color-foreground});
+  }
+
+  h2 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h2-size, #{tokens.$font-size-2xl});
+    font-weight: var(--vi-heading-h2-weight, #{tokens.$font-weight-bold});
+    line-height: var(--vi-heading-h2-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h2-tracking, #{tokens.$letter-spacing-tight});
+    color: var(--vi-heading-h2-color, #{tokens.$color-foreground});
+  }
+
+  h3 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h3-size, #{tokens.$font-size-xl});
+    font-weight: var(--vi-heading-h3-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h3-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h3-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-heading-h3-color, #{tokens.$color-foreground});
+  }
+
+  h4 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h4-size, #{tokens.$font-size-lg});
+    font-weight: var(--vi-heading-h4-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h4-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h4-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-heading-h4-color, #{tokens.$color-foreground});
+  }
+
+  h5 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h5-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-heading-h5-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h5-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-heading-h5-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-heading-h5-color, #{tokens.$color-foreground});
+  }
+
+  h6 {
+    @extend %type-base;
+    font-size: var(--vi-heading-h6-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-heading-h6-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h6-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-heading-h6-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-heading-h6-color, #{tokens.$color-grey-700});
+  }
+
+  // ── Paragraph ─────────────────────────────────────────────────────────────
+
+  p {
+    @extend %type-base;
+    font-size: var(--vi-body-md-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-body-md-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-md-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-body-md-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-md-color, #{tokens.$color-foreground});
+  }
+
+  // ── Labels & form elements ────────────────────────────────────────────────
+  // <label> gets the label-md role by default — medium weight, slightly tracked.
+
+  label {
+    @extend %type-base;
+    font-size: var(--vi-label-md-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-label-md-weight, #{tokens.$font-weight-medium});
+    line-height: var(--vi-label-md-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-label-md-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-label-md-color, #{tokens.$color-foreground});
+  }
+
+  // ── Inline semantics ──────────────────────────────────────────────────────
+
+  small {
+    @extend %type-base;
+    font-size: var(--vi-caption-size, #{tokens.$font-size-xs});
+    font-weight: var(--vi-caption-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-caption-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-caption-tracking, #{tokens.$letter-spacing-wider});
+    color: var(--vi-caption-color, #{tokens.$color-grey-500});
+  }
+
+  strong,
+  b {
+    font-weight: #{tokens.$font-weight-semibold};
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  // ── Figure caption ────────────────────────────────────────────────────────
+
+  figcaption {
+    @extend %type-base;
+    font-size: var(--vi-caption-size, #{tokens.$font-size-xs});
+    font-weight: var(--vi-caption-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-caption-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-caption-tracking, #{tokens.$letter-spacing-wider});
+    color: var(--vi-caption-color, #{tokens.$color-grey-500});
+  }
+
+  // ── Code ──────────────────────────────────────────────────────────────────
+
+  code,
+  kbd,
+  samp {
+    @extend %type-base;
+    font-family: var(--vi-font-family-mono, #{tokens.$font-family-mono});
+    font-size: var(--vi-code-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-code-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-code-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-code-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-code-color, #{tokens.$color-foreground});
+    -webkit-font-smoothing: auto;
+  }
+
+  pre {
+    @extend %type-base;
+    font-family: var(--vi-font-family-mono, #{tokens.$font-family-mono});
+    font-size: var(--vi-code-size, #{tokens.$font-size-sm});
+    line-height: var(--vi-code-leading, #{tokens.$line-height-relaxed});
+    color: var(--vi-code-color, #{tokens.$color-foreground});
+    -webkit-font-smoothing: auto;
+  }
+
+  // ── Blockquote ────────────────────────────────────────────────────────────
+
+  blockquote {
+    @extend %type-base;
+    font-size: var(--vi-body-lg-size, #{tokens.$font-size-lg});
+    font-weight: var(--vi-body-lg-weight, #{tokens.$font-weight-light});
+    line-height: var(--vi-body-lg-leading, #{tokens.$line-height-relaxed});
+    letter-spacing: var(--vi-body-lg-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-lg-color, #{tokens.$color-grey-700});
+    font-style: italic;
+    padding: 0;
+  }
+
+  // ── Table cells ───────────────────────────────────────────────────────────
+
+  th {
+    @extend %type-base;
+    font-size: var(--vi-label-md-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-label-md-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-label-md-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-label-md-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-label-md-color, #{tokens.$color-foreground});
+  }
+
+  td {
+    @extend %type-base;
+    font-size: var(--vi-body-sm-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-body-sm-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-sm-leading, #{tokens.$line-height-normal});
+    color: var(--vi-body-sm-color, #{tokens.$color-grey-600});
+  }
+}
+
+// ===========================================================================
+// LAYER 2 — explicit role classes (utilities layer, wins over element defaults)
+// Use these when: element semantic doesn't match desired visual; or for
+// non-semantic elements like <div>, <span>, shadow-DOM parts.
+// ===========================================================================
+
+@layer utilities {
+
+  // ── Display ───────────────────────────────────────────────────────────────
+
+  .vi-display-lg {
+    @extend %type-base;
+    font-size: var(--vi-display-lg-size, #{tokens.$font-size-3xl});
+    font-weight: var(--vi-display-lg-weight, #{tokens.$font-weight-bold});
+    line-height: var(--vi-display-lg-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-display-lg-tracking, #{tokens.$letter-spacing-tight});
+    color: var(--vi-display-lg-color, #{tokens.$color-foreground});
+  }
+
+  .vi-display-md {
+    @extend %type-base;
+    font-size: var(--vi-display-md-size, #{tokens.$font-size-2xl});
+    font-weight: var(--vi-display-md-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-display-md-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-display-md-tracking, #{tokens.$letter-spacing-tight});
+    color: var(--vi-display-md-color, #{tokens.$color-foreground});
+  }
+
+  // ── Headings ──────────────────────────────────────────────────────────────
+
+  .vi-heading-xl {
+    @extend %type-base;
+    font-size: var(--vi-heading-h2-size, #{tokens.$font-size-2xl});
+    font-weight: var(--vi-heading-h2-weight, #{tokens.$font-weight-bold});
+    line-height: var(--vi-heading-h2-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h2-tracking, #{tokens.$letter-spacing-tight});
+    color: var(--vi-heading-h2-color, #{tokens.$color-foreground});
+  }
+
+  .vi-heading-lg {
+    @extend %type-base;
+    font-size: var(--vi-heading-h3-size, #{tokens.$font-size-xl});
+    font-weight: var(--vi-heading-h3-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h3-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-heading-h3-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-heading-h3-color, #{tokens.$color-foreground});
+  }
+
+  .vi-heading-md {
+    @extend %type-base;
+    font-size: var(--vi-heading-h5-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-heading-h5-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h5-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-heading-h5-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-heading-h5-color, #{tokens.$color-foreground});
+  }
+
+  .vi-heading-sm {
+    @extend %type-base;
+    font-size: var(--vi-heading-h6-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-heading-h6-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-heading-h6-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-heading-h6-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-heading-h6-color, #{tokens.$color-grey-700});
+  }
+
+  // ── Body ──────────────────────────────────────────────────────────────────
+
+  .vi-body-lg {
+    @extend %type-base;
+    font-size: var(--vi-body-lg-size, #{tokens.$font-size-lg});
+    font-weight: var(--vi-body-lg-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-lg-leading, #{tokens.$line-height-relaxed});
+    letter-spacing: var(--vi-body-lg-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-lg-color, #{tokens.$color-foreground});
+  }
+
+  .vi-body-md {
+    @extend %type-base;
+    font-size: var(--vi-body-md-size, #{tokens.$font-size-base});
+    font-weight: var(--vi-body-md-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-md-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-body-md-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-md-color, #{tokens.$color-foreground});
+  }
+
+  .vi-body-sm {
+    @extend %type-base;
+    font-size: var(--vi-body-sm-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-body-sm-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-body-sm-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-body-sm-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-body-sm-color, #{tokens.$color-grey-600});
+  }
+
+  // ── Labels ────────────────────────────────────────────────────────────────
+
+  .vi-label-md {
+    @extend %type-base;
+    font-size: var(--vi-label-md-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-label-md-weight, #{tokens.$font-weight-medium});
+    line-height: var(--vi-label-md-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-label-md-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-label-md-color, #{tokens.$color-foreground});
+  }
+
+  .vi-label-sm {
+    @extend %type-base;
+    font-size: var(--vi-label-sm-size, #{tokens.$font-size-xs});
+    font-weight: var(--vi-label-sm-weight, #{tokens.$font-weight-medium});
+    line-height: var(--vi-label-sm-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-label-sm-tracking, #{tokens.$letter-spacing-wide});
+    color: var(--vi-label-sm-color, #{tokens.$color-foreground});
+  }
+
+  // ── Caption / Overline / Code ──────────────────────────────────────────────
+
+  .vi-caption {
+    @extend %type-base;
+    font-size: var(--vi-caption-size, #{tokens.$font-size-xs});
+    font-weight: var(--vi-caption-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-caption-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-caption-tracking, #{tokens.$letter-spacing-wider});
+    color: var(--vi-caption-color, #{tokens.$color-grey-500});
+  }
+
+  .vi-overline {
+    @extend %type-base;
+    font-size: var(--vi-overline-size, #{tokens.$font-size-xs});
+    font-weight: var(--vi-overline-weight, #{tokens.$font-weight-semibold});
+    line-height: var(--vi-overline-leading, #{tokens.$line-height-tight});
+    letter-spacing: var(--vi-overline-tracking, #{tokens.$letter-spacing-widest});
+    text-transform: uppercase;
+    color: var(--vi-overline-color, #{tokens.$color-grey-600});
+  }
+
+  .vi-code {
+    font-family: var(--vi-font-family-mono, #{tokens.$font-family-mono});
+    font-size: var(--vi-code-size, #{tokens.$font-size-sm});
+    font-weight: var(--vi-code-weight, #{tokens.$font-weight-normal});
+    line-height: var(--vi-code-leading, #{tokens.$line-height-normal});
+    letter-spacing: var(--vi-code-tracking, #{tokens.$letter-spacing-normal});
+    color: var(--vi-code-color, #{tokens.$color-foreground});
+    -webkit-font-smoothing: auto;
+  }
+
+  // ── Text modifier utilities ────────────────────────────────────────────────
+
+  .vi-text-muted   { color: #{tokens.$color-grey-500}; }
+  .vi-text-subtle  { color: #{tokens.$color-grey-600}; }
+  .vi-text-strong  { font-weight: #{tokens.$font-weight-semibold}; }
+  .vi-text-bold    { font-weight: #{tokens.$font-weight-bold}; }
+  .vi-text-italic  { font-style: italic; }
+  .vi-text-truncate {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .vi-text-balance { text-wrap: balance; }
+
+  // ── Letter-spacing modifiers ───────────────────────────────────────────────
+
+  .vi-tracking-tight   { letter-spacing: #{tokens.$letter-spacing-tight}; }
+  .vi-tracking-normal  { letter-spacing: #{tokens.$letter-spacing-normal}; }
+  .vi-tracking-wide    { letter-spacing: #{tokens.$letter-spacing-wide}; }
+  .vi-tracking-wider   { letter-spacing: #{tokens.$letter-spacing-wider}; }
+  .vi-tracking-widest  { letter-spacing: #{tokens.$letter-spacing-widest}; }
+}
+

package/styles/_variables.scss

@@ -185,6 +185,16 @@ $line-height-tight:   var(--vi-line-height-tight,   1.2);
 $line-height-normal:  var(--vi-line-height-normal,  1.5);
 $line-height-relaxed: var(--vi-line-height-relaxed, 1.75);
 
+// -- Primitive: Letter Spacing -----------------------------------------------
+// Values follow the em-based convention used by M3/Carbon.
+// tight = dense data; normal = body text; wide = caps/labels; widest = overlines
+
+$letter-spacing-tight:   var(--vi-letter-spacing-tight,   -0.01em);
+$letter-spacing-normal:  var(--vi-letter-spacing-normal,   0em);
+$letter-spacing-wide:    var(--vi-letter-spacing-wide,     0.025em);
+$letter-spacing-wider:   var(--vi-letter-spacing-wider,    0.05em);
+$letter-spacing-widest:  var(--vi-letter-spacing-widest,   0.1em);
+
 // -- Primitive: Shadows ------------------------------------------------------
 
 $shadow-sm: var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));

package/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/flux-ui/src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/flux-ui/src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,MAAM;IACjB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkGH;;;OAGG;;;;;;;;;;IAWH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BH;;;OAGG;;;;;;;IAQH;;;OAGG;;;;;;;;;;;;;;IAeH;;;;;OAKG;;;;;;;;;IAUH;;;;OAIG;;;;;;;;;;;;;CAaK,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC"}