vrembem 4.0.0-next.3 → 4.0.0-next.5

package/dev/index.css

@@ -1,91 +1,3 @@
-:root {
-  --vrembem-variable-prefix: vb-;
-}
-
-:root {
-  --vb-breakpoint-xs: 480px;
-  --vb-breakpoint-sm: 620px;
-  --vb-breakpoint-md: 760px;
-  --vb-breakpoint-lg: 990px;
-  --vb-breakpoint-xl: 1380px;
-}
-
-:root {
-  --vb-primary-hs: 152deg, 60%;
-  --vb-primary: var(--vb-primary-50);
-  --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
-  --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
-  --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
-  --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
-  --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
-  --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
-  --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
-  --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
-  --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
-  --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
-  --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
-  --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
-  --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
-  --vb-secondary-hs: 214deg, 50%;
-  --vb-secondary: var(--vb-secondary-50);
-  --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
-  --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
-  --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
-  --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
-  --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
-  --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
-  --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
-  --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
-  --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
-  --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
-  --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
-  --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
-  --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
-  --vb-neutral-hs: 214deg, 20%;
-  --vb-neutral: var(--vb-neutral-50);
-  --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
-  --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
-  --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
-  --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
-  --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
-  --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
-  --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
-  --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
-  --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
-  --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
-  --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
-  --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
-  --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
-  --vb-important-hs: 0deg, 80%;
-  --vb-important: var(--vb-important-50);
-  --vb-important-0: hsl(var(--vb-important-hs), 0%);
-  --vb-important-10: hsl(var(--vb-important-hs), 10%);
-  --vb-important-20: hsl(var(--vb-important-hs), 20%);
-  --vb-important-30: hsl(var(--vb-important-hs), 30%);
-  --vb-important-40: hsl(var(--vb-important-hs), 40%);
-  --vb-important-50: hsl(var(--vb-important-hs), 50%);
-  --vb-important-60: hsl(var(--vb-important-hs), 60%);
-  --vb-important-70: hsl(var(--vb-important-hs), 70%);
-  --vb-important-80: hsl(var(--vb-important-hs), 80%);
-  --vb-important-90: hsl(var(--vb-important-hs), 90%);
-  --vb-important-95: hsl(var(--vb-important-hs), 95%);
-  --vb-important-98: hsl(var(--vb-important-hs), 98%);
-  --vb-important-100: hsl(var(--vb-important-hs), 100%);
-}
-
-:root {
-  --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
-  --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
-  --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
-  --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
-  --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
-  --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
-  --vb-border-color: rgba(0, 0, 0, 0.1);
-  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
-  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
-  --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
-}
-
 *,
 *::before,
 *::after {
@@ -102,7 +14,7 @@ body {
 html {
   box-sizing: border-box;
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.625;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
@@ -265,7 +177,7 @@ input::-moz-placeholder {
 .code {
   color: var(--vb-secondary-50, hsl(214, 50%, 50%));
   font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.9em;
+  font-size: 16px;
   word-break: break-word;
 }
 
@@ -331,6 +243,8 @@ input::-moz-placeholder {
 .link {
   color: var(--vb-primary-50, hsl(152, 60%, 50%));
   text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
 }
 .link:hover {
   color: var(--vb-primary-40, hsl(152, 60%, 40%));
@@ -372,7 +286,7 @@ input::-moz-placeholder {
   border: none;
   background: none;
   color: inherit;
-  font-size: 1em;
+  font-size: 16px;
 }
 
 .scroll-box {
@@ -389,13 +303,18 @@ input::-moz-placeholder {
   border-top: 1px solid var(--vb-border-color, rgba(0, 0, 0, 0.1));
 }
 
+.type {
+  color: var(--vb-foreground-light, var(--vb-neutral-40, hsl(214, 20%, 40%)));
+  font-size: 1.125rem;
+  line-height: 1.7778;
+}
 .type h1,
 .type h2,
 .type h3,
 .type h4,
 .type h5,
 .type h6 {
-  color: inherit;
+  color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
   font-family: inherit;
   font-weight: 600;
   line-height: 1.375;
@@ -424,6 +343,8 @@ input::-moz-placeholder {
 .type > :not(div) a {
   color: var(--vb-primary-50, hsl(152, 60%, 50%));
   text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
 }
 .type > a:hover,
 .type > :not(div) a:hover {
@@ -441,7 +362,7 @@ input::-moz-placeholder {
 .type > :not(div) code {
   color: var(--vb-secondary-50, hsl(214, 50%, 50%));
   font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.9em;
+  font-size: 16px;
   word-break: break-word;
 }
 .type > hr {
@@ -497,7 +418,7 @@ input::-moz-placeholder {
   border: none;
   background: none;
   color: inherit;
-  font-size: 1em;
+  font-size: 16px;
 }
 
 .button {
@@ -521,7 +442,7 @@ input::-moz-placeholder {
   font-family: inherit;
   font-size: 1em;
   font-weight: inherit;
-  line-height: 1.5;
+  line-height: 1.625;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -554,8 +475,8 @@ input::-moz-placeholder {
   height: 1em;
   content: "";
   position: absolute;
-  top: calc(50% - (1em * 0.5));
-  left: calc(50% - (1em * 0.5));
+  top: calc(50% - 1em * 0.5);
+  left: calc(50% - 1em * 0.5);
   animation: spin 0.6s infinite linear;
   border: 2px solid;
   border-radius: 9999px;
@@ -745,7 +666,7 @@ input::-moz-placeholder {
   height: 3.125rem;
   padding: calc(0.648rem - 1px) 1.5rem;
   font-size: 1.125rem;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 
 .card {
@@ -816,7 +737,7 @@ input::-moz-placeholder {
   flex-grow: 1;
   font-size: 1.125rem;
   font-weight: 600;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 
 .card__background,
@@ -1017,9 +938,10 @@ input::-moz-placeholder {
   flex-direction: column;
   overflow: auto;
   border-radius: 0.25rem;
-  background: white;
+  background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
   background-clip: padding-box;
   box-shadow: 0 8px 18px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
+  color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
   -webkit-overflow-scrolling: touch;
 }
 
@@ -1036,7 +958,7 @@ input::-moz-placeholder {
   z-index: 1;
   display: flex;
   align-items: center;
-  background: white;
+  background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
   vertical-align: middle;
 }
 .dialog__header > * + *,
@@ -1065,7 +987,7 @@ input::-moz-placeholder {
   flex-grow: 1;
   font-size: 1.125rem;
   font-weight: 600;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 
 .dialog > .dialog__close {
@@ -1077,6 +999,15 @@ input::-moz-placeholder {
   padding-right: 3.5em;
 }
 
+:root {
+  --vrembem-prefix: vb-;
+}
+
+:root {
+  --vb-drawer-transition-duration: var(--vb-transition-duration, 0.3s);
+  --vb-drawer-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
 /**
  * Required structure styles
  */
@@ -1150,11 +1081,17 @@ input::-moz-placeholder {
   overflow: visible;
 }
 
+.drawer.is-opening,
+.drawer.is-closing {
+  transition-property: background-color, opacity, transform;
+  transition-duration: var(--vb-drawer-transition-duration);
+  transition-timing-function: var(--vb-drawer-transition-timing-function);
+}
 .drawer.is-opening .drawer__dialog,
 .drawer.is-closing .drawer__dialog {
   transition-property: opacity, transform;
-  transition-duration: 0.3s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--vb-drawer-transition-duration);
+  transition-timing-function: var(--vb-drawer-transition-timing-function);
 }
 
 .drawer.is-opening .drawer__dialog,
@@ -1170,21 +1107,86 @@ input::-moz-placeholder {
   opacity: 0;
 }
 
+/**
+ * Drawer slide transition
+ */
+.drawer {
+  left: 0;
+  transform: translateX(-100%);
+}
+.drawer.is-opening,
+.drawer.is-opened {
+  transform: translateX(0);
+}
+
+.drawer.is-closing {
+  transform: translateX(-100%);
+}
+
+/**
+ * Drawer switched slide transition
+ */
+.drawer_switch {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
+.drawer_switch.is-closing {
+  transform: translateX(100%);
+}
+
+/**
+ * Drawer main margins
+ */
+.drawer:not(.drawer_modal, .drawer_switch).is-opening ~ .drawer-main, .drawer:not(.drawer_modal, .drawer_switch).is-opened ~ .drawer-main {
+  margin-left: 18em;
+}
+
+.drawer.drawer_switch:not(.drawer_modal).is-opening ~ .drawer-main, .drawer.drawer_switch:not(.drawer_modal).is-opened ~ .drawer-main {
+  margin-right: 18em;
+}
+
+/**
+ * Drawer modal styles
+ */
 .drawer_modal {
   z-index: 900;
+  right: auto;
+  left: 0;
   width: 0;
   height: 0;
   overflow: hidden;
-  background-color: rgba(255, 255, 255, 0);
+  transform: translateX(0);
+}
+.drawer_modal::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vb-neutral-10, hsl(214, 20%, 10%));
+  opacity: 0;
 }
 .drawer_modal .drawer__dialog {
   position: absolute;
   z-index: 901;
+  left: 0;
   width: 18em;
   max-width: 80%;
+  transform: translateX(-100%);
   background-color: white;
   box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
 }
+.drawer_modal.drawer_switch {
+  right: auto;
+  left: 0;
+  transform: translateX(0);
+}
+.drawer_modal.drawer_switch .drawer__dialog {
+  right: 0;
+  left: auto;
+  transform: translateX(100%);
+}
 .drawer_modal .dialog__header,
 .drawer_modal .dialog__footer {
   background: white;
@@ -1193,6 +1195,9 @@ input::-moz-placeholder {
   background: white;
 }
 
+/**
+ * Drawer modal transition
+ */
 .drawer_modal.is-opening,
 .drawer_modal.is-opened,
 .drawer_modal.is-closing {
@@ -1201,56 +1206,35 @@ input::-moz-placeholder {
   height: 100%;
 }
 
-.drawer_modal.is-opening,
-.drawer_modal.is-closing {
-  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.drawer_modal.is-opening::before,
+.drawer_modal.is-closing::before {
+  transition: opacity var(--vb-drawer-transition-duration) var(--vb-drawer-transition-timing-function);
 }
 
 .drawer_modal.is-opening,
 .drawer_modal.is-opened {
-  background-color: rgba(var(--vb-neutral-10, hsl(214, 20%, 10%)), 0.8);
-}
-
-.drawer_modal.is-closing {
-  background-color: rgba(var(--vb-neutral-10, hsl(214, 20%, 10%)), 0);
-}
-
-.drawer:not(.drawer_switch) {
-  left: 0;
-}
-.drawer:not(.drawer_switch) .drawer__dialog {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-.drawer_switch {
-  right: 0;
-}
-.drawer_switch .drawer__dialog {
-  right: 0;
-  transform: translateX(100%);
+  transform: translateX(0);
 }
-
-.drawer:not(.drawer_switch).is-opening:not(.drawer_modal) ~ .drawer-main,
-.drawer:not(.drawer_switch).is-opened:not(.drawer_modal) ~ .drawer-main {
-  margin-left: 18em;
+.drawer_modal.is-opening::before,
+.drawer_modal.is-opened::before {
+  opacity: 0.8;
 }
-
-.drawer_switch.is-opening:not(.drawer_modal) ~ .drawer-main,
-.drawer_switch.is-opened:not(.drawer_modal) ~ .drawer-main {
-  margin-right: 18em;
+.drawer_modal.is-opening .drawer__dialog,
+.drawer_modal.is-opened .drawer__dialog {
+  transform: translateX(0);
 }
 
-.drawer.is-opening .drawer__dialog,
-.drawer.is-opened .drawer__dialog {
+.drawer_modal.is-closing {
   transform: translateX(0);
 }
-
-.drawer:not(.drawer_switch).is-closing .drawer__dialog {
+.drawer_modal.is-closing .drawer__dialog {
   transform: translateX(-100%);
 }
 
-.drawer_switch.is-closing .drawer__dialog {
+.drawer_modal.drawer_switch.is-closing {
+  transform: translateX(0);
+}
+.drawer_modal.drawer_switch.is-closing .drawer__dialog {
   transform: translateX(100%);
 }
 
@@ -1846,39 +1830,42 @@ input::-moz-placeholder {
 }
 .icon {
   stroke: currentcolor;
-  stroke-width: 2px;
+  stroke-width: 2;
   fill: none;
   display: inline-block;
   box-sizing: content-box;
   flex-shrink: 0;
   width: 1em;
   height: 1em;
-  stroke-width: 2px;
   stroke-linecap: round;
   stroke-linejoin: round;
-  font-size: 1.25em;
+  font-size: 1.5em;
   vertical-align: top;
 }
 
 .icon_size_xs {
+  stroke-width: 3.5;
   font-size: 0.75em;
 }
 
 .icon_size_sm {
-  font-size: 1em;
+  stroke-width: 2.5;
+  font-size: 1.125em;
 }
 
 .icon_size_lg {
-  font-size: 1.75em;
+  stroke-width: 1.75;
+  font-size: 2em;
 }
 
 .icon_size_xl {
-  font-size: 2.25em;
+  stroke-width: 1.3;
+  font-size: 3em;
 }
 
 .icon_style_stroke {
   stroke: currentcolor;
-  stroke-width: 2px;
+  stroke-width: 2;
   fill: none;
 }
 
@@ -1906,7 +1893,7 @@ input::-moz-placeholder {
   color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
   font-family: blinkmacsystemfont, -apple-system, system-ui, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.625;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -1944,7 +1931,7 @@ input::-moz-placeholder {
   height: 3.125rem;
   padding: calc(0.648rem - 1px);
   font-size: 1.125rem;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 
 .input_error {
@@ -1989,203 +1976,86 @@ input::-moz-placeholder {
 }
 
 .level {
-  margin-top: -0.5em;
-  margin-left: -0.5em;
+  gap: 0.5em;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.level > * {
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-.level + .level {
-  margin-top: 0;
-}
 .level > * {
   flex: 0 0 auto;
-  max-width: calc(100% - 0.5em);
+  max-width: 100%;
 }
 
 .level_gap_none {
-  margin-top: 0;
-  margin-left: 0;
-}
-.level_gap_none > * {
-  margin-top: 0;
-  margin-left: 0;
-}
-.level_gap_none > * {
-  max-width: 100%;
+  gap: 0;
 }
 
 .level_gap-x_none {
-  margin-left: 0;
-}
-.level_gap-x_none > * {
-  margin-left: 0;
-}
-.level_gap-x_none > * {
-  max-width: 100%;
+  column-gap: 0;
 }
 
 .level_gap-y_none {
-  margin-top: 0;
-}
-.level_gap-y_none > * {
-  margin-top: 0;
+  row-gap: 0;
 }
 
 .level_gap_xs {
-  margin-top: -1px;
-  margin-left: -1px;
-}
-.level_gap_xs > * {
-  margin-top: 1px;
-  margin-left: 1px;
-}
-.level_gap_xs > * {
-  max-width: calc(100% - 1px);
+  gap: 1px;
 }
 
 .level_gap-x_xs {
-  margin-left: -1px;
-}
-.level_gap-x_xs > * {
-  margin-left: 1px;
-}
-.level_gap-x_xs > * {
-  max-width: calc(100% - 1px);
+  column-gap: 1px;
 }
 
 .level_gap-y_xs {
-  margin-top: -1px;
-}
-.level_gap-y_xs > * {
-  margin-top: 1px;
+  row-gap: 1px;
 }
 
 .level_gap_sm {
-  margin-top: -0.25em;
-  margin-left: -0.25em;
-}
-.level_gap_sm > * {
-  margin-top: 0.25em;
-  margin-left: 0.25em;
-}
-.level_gap_sm > * {
-  max-width: calc(100% - 0.25em);
+  gap: 0.25em;
 }
 
 .level_gap-x_sm {
-  margin-left: -0.25em;
-}
-.level_gap-x_sm > * {
-  margin-left: 0.25em;
-}
-.level_gap-x_sm > * {
-  max-width: calc(100% - 0.25em);
+  column-gap: 0.25em;
 }
 
 .level_gap-y_sm {
-  margin-top: -0.25em;
-}
-.level_gap-y_sm > * {
-  margin-top: 0.25em;
+  row-gap: 0.25em;
 }
 
 .level_gap_md {
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-}
-.level_gap_md > * {
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-.level_gap_md > * {
-  max-width: calc(100% - 0.5em);
+  gap: 0.5em;
 }
 
 .level_gap-x_md {
-  margin-left: -0.5em;
-}
-.level_gap-x_md > * {
-  margin-left: 0.5em;
-}
-.level_gap-x_md > * {
-  max-width: calc(100% - 0.5em);
+  column-gap: 0.5em;
 }
 
 .level_gap-y_md {
-  margin-top: -0.5em;
-}
-.level_gap-y_md > * {
-  margin-top: 0.5em;
+  row-gap: 0.5em;
 }
 
 .level_gap_lg {
-  margin-top: -1em;
-  margin-left: -1em;
-}
-.level_gap_lg > * {
-  margin-top: 1em;
-  margin-left: 1em;
-}
-.level_gap_lg > * {
-  max-width: calc(100% - 1em);
+  gap: 1em;
 }
 
 .level_gap-x_lg {
-  margin-left: -1em;
-}
-.level_gap-x_lg > * {
-  margin-left: 1em;
-}
-.level_gap-x_lg > * {
-  max-width: calc(100% - 1em);
+  column-gap: 1em;
 }
 
 .level_gap-y_lg {
-  margin-top: -1em;
-}
-.level_gap-y_lg > * {
-  margin-top: 1em;
+  row-gap: 1em;
 }
 
 .level_gap_xl {
-  margin-top: -1.5em;
-  margin-left: -1.5em;
-}
-.level_gap_xl > * {
-  margin-top: 1.5em;
-  margin-left: 1.5em;
-}
-.level_gap_xl > * {
-  max-width: calc(100% - 1.5em);
+  gap: 1.5em;
 }
 
 .level_gap-x_xl {
-  margin-left: -1.5em;
-}
-.level_gap-x_xl > * {
-  margin-left: 1.5em;
-}
-.level_gap-x_xl > * {
-  max-width: calc(100% - 1.5em);
+  column-gap: 1.5em;
 }
 
 .level_gap-y_xl {
-  margin-top: -1.5em;
-}
-.level_gap-y_xl > * {
-  margin-top: 1.5em;
-}
-
-.level_nowrap {
-  flex-wrap: nowrap;
-}
-.level_nowrap > * {
-  flex-shrink: 1;
+  row-gap: 1.5em;
 }
 
 .media {
@@ -2205,7 +2075,7 @@ input::-moz-placeholder {
   flex: 0 0 auto;
   align-items: center;
   max-width: 30%;
-  min-height: 1.5em;
+  min-height: 1.625em;
 }
 
 .media_gap_none > * + * {
@@ -2576,14 +2446,18 @@ input::-moz-placeholder {
   padding: 0.5em;
 }
 .menu__action:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--vb-background-hover, rgba(0, 0, 0, 0.05));
 }
 .menu__action:focus {
   outline: none;
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--vb-background-focus, rgba(0, 0, 0, 0.05));
+}
+.menu__action:focus-visible {
+  z-index: 1;
+  outline: 2px solid var(--vb-focus-visible, var(--vb-primary-50, hsl(152, 60%, 50%)));
 }
 .menu__action:active {
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--vb-background-active, rgba(0, 0, 0, 0.1));
 }
 .menu__action.is-active, .menu__action.is-active[disabled] {
   background: none;
@@ -2819,7 +2693,7 @@ input::-moz-placeholder {
 
 .menu_size_lg {
   font-size: 1.125rem;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 .menu_size_lg .menu__action {
   min-width: 3.125rem;
@@ -2830,6 +2704,11 @@ input::-moz-placeholder {
   padding: 0.648rem;
 }
 
+:root {
+  --vb-modal-transition-duration: var(--vb-transition-duration, 0.3s);
+  --vb-modal-transition-timing-function: var(--vb-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
 .modal {
   position: fixed;
   z-index: 1000;
@@ -2860,8 +2739,8 @@ input::-moz-placeholder {
   overflow: auto;
   transform: translateY(-5em);
   transition-property: outline;
-  transition-duration: 0.3s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--vb-modal-transition-duration);
+  transition-timing-function: var(--vb-modal-transition-timing-function);
   outline: 0 solid transparent;
   box-shadow: 0 12px 24px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
   opacity: 0;
@@ -2888,13 +2767,13 @@ input::-moz-placeholder {
 
 .modal.is-opening::before,
 .modal.is-closing::before {
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity var(--vb-modal-transition-duration) var(--vb-modal-transition-timing-function);
 }
 .modal.is-opening .modal__dialog,
 .modal.is-closing .modal__dialog {
   transition-property: opacity, transform;
-  transition-duration: 0.3s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--vb-modal-transition-duration);
+  transition-timing-function: var(--vb-modal-transition-timing-function);
 }
 
 .modal.is-opening::before,
@@ -2920,7 +2799,7 @@ input::-moz-placeholder {
   transform: scale(1);
 }
 .modal_full.is-closing .modal__dialog {
-  transform: scale(1);
+  transform: scale(0.75);
 }
 
 .modal_pos_top {
@@ -2988,8 +2867,11 @@ input::-moz-placeholder {
 
 .notice {
   padding: 1em;
+  border: var(--vb-notice-border);
   border-radius: 0.25rem;
-  background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
+  background: var(--vb-notice-background, var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%))));
+  box-shadow: var(--vb-notice-shadow);
+  color: var(--vb-notice-foreground, var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))));
 }
 .notice > * + * {
   margin-top: 0.5em;
@@ -2998,7 +2880,7 @@ input::-moz-placeholder {
 .notice__title {
   font-size: 1.125rem;
   font-weight: 600;
-  line-height: 1.625;
+  line-height: 1.875;
 }
 
 .notice_theme_primary {
@@ -3021,6 +2903,15 @@ input::-moz-placeholder {
   color: var(--vb-important-30, hsl(0, 80%, 30%));
 }
 
+:root, .vb-theme-root {
+  --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
+  --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
+}
+.vb-theme-light {
+  --vb-notice-background: var(--vb-background-dark, var(--vb-neutral-98, hsl(214, 20%, 98%)));
+  --vb-notice-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
+}
+
 :root {
   --vb-popover-offset: 8;
   --vb-popover-overflow-padding: 10;
@@ -3039,9 +2930,10 @@ input::-moz-placeholder {
   margin: calc(var(--vb-popover-offset) * 1px) 0 0;
   padding: 0.5em;
   border-radius: 0.25rem;
-  background: white;
+  background: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
   background-clip: padding-box;
   box-shadow: 0 2px 6px var(--vb-shadow-color, hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%));
+  color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
   font-size: 0.875rem;
 }
 .popover::before {
@@ -3165,7 +3057,6 @@ input::-moz-placeholder {
   padding: 0.5rem 0.75rem;
   background: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
   color: var(--vb-background, var(--vb-neutral-100, hsl(214, 20%, 100%)));
-  font-size: 0.75em;
 }
 
 .radio {
@@ -4052,10 +3943,22 @@ input::-moz-placeholder {
   background-color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
 }
 
+.background-primary-5 {
+  background-color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
+}
+
 .background-primary-10 {
   background-color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
 }
 
+.background-primary-12 {
+  background-color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
+}
+
+.background-primary-15 {
+  background-color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
+}
+
 .background-primary-20 {
   background-color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
 }
@@ -4108,10 +4011,22 @@ input::-moz-placeholder {
   background-color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
 }
 
+.background-secondary-5 {
+  background-color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
+}
+
 .background-secondary-10 {
   background-color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
 }
 
+.background-secondary-12 {
+  background-color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
+}
+
+.background-secondary-15 {
+  background-color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
+}
+
 .background-secondary-20 {
   background-color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
 }
@@ -4164,10 +4079,22 @@ input::-moz-placeholder {
   background-color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
 }
 
+.background-neutral-5 {
+  background-color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
+}
+
 .background-neutral-10 {
   background-color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
 }
 
+.background-neutral-12 {
+  background-color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
+}
+
+.background-neutral-15 {
+  background-color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
+}
+
 .background-neutral-20 {
   background-color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
 }
@@ -4220,10 +4147,22 @@ input::-moz-placeholder {
   background-color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
 }
 
+.background-important-5 {
+  background-color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
+}
+
 .background-important-10 {
   background-color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
 }
 
+.background-important-12 {
+  background-color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
+}
+
+.background-important-15 {
+  background-color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
+}
+
 .background-important-20 {
   background-color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
 }
@@ -4300,10 +4239,22 @@ input::-moz-placeholder {
   color: var(--vb-primary-0, hsl(152, 60%, 0%)) !important;
 }
 
+.foreground-primary-5 {
+  color: var(--vb-primary-5, hsl(152, 60%, 5%)) !important;
+}
+
 .foreground-primary-10 {
   color: var(--vb-primary-10, hsl(152, 60%, 10%)) !important;
 }
 
+.foreground-primary-12 {
+  color: var(--vb-primary-12, hsl(152, 60%, 12%)) !important;
+}
+
+.foreground-primary-15 {
+  color: var(--vb-primary-15, hsl(152, 60%, 15%)) !important;
+}
+
 .foreground-primary-20 {
   color: var(--vb-primary-20, hsl(152, 60%, 20%)) !important;
 }
@@ -4356,10 +4307,22 @@ input::-moz-placeholder {
   color: var(--vb-secondary-0, hsl(214, 50%, 0%)) !important;
 }
 
+.foreground-secondary-5 {
+  color: var(--vb-secondary-5, hsl(214, 50%, 5%)) !important;
+}
+
 .foreground-secondary-10 {
   color: var(--vb-secondary-10, hsl(214, 50%, 10%)) !important;
 }
 
+.foreground-secondary-12 {
+  color: var(--vb-secondary-12, hsl(214, 50%, 12%)) !important;
+}
+
+.foreground-secondary-15 {
+  color: var(--vb-secondary-15, hsl(214, 50%, 15%)) !important;
+}
+
 .foreground-secondary-20 {
   color: var(--vb-secondary-20, hsl(214, 50%, 20%)) !important;
 }
@@ -4412,10 +4375,22 @@ input::-moz-placeholder {
   color: var(--vb-neutral-0, hsl(214, 20%, 0%)) !important;
 }
 
+.foreground-neutral-5 {
+  color: var(--vb-neutral-5, hsl(214, 20%, 5%)) !important;
+}
+
 .foreground-neutral-10 {
   color: var(--vb-neutral-10, hsl(214, 20%, 10%)) !important;
 }
 
+.foreground-neutral-12 {
+  color: var(--vb-neutral-12, hsl(214, 20%, 12%)) !important;
+}
+
+.foreground-neutral-15 {
+  color: var(--vb-neutral-15, hsl(214, 20%, 15%)) !important;
+}
+
 .foreground-neutral-20 {
   color: var(--vb-neutral-20, hsl(214, 20%, 20%)) !important;
 }
@@ -4468,10 +4443,22 @@ input::-moz-placeholder {
   color: var(--vb-important-0, hsl(0, 80%, 0%)) !important;
 }
 
+.foreground-important-5 {
+  color: var(--vb-important-5, hsl(0, 80%, 5%)) !important;
+}
+
 .foreground-important-10 {
   color: var(--vb-important-10, hsl(0, 80%, 10%)) !important;
 }
 
+.foreground-important-12 {
+  color: var(--vb-important-12, hsl(0, 80%, 12%)) !important;
+}
+
+.foreground-important-15 {
+  color: var(--vb-important-15, hsl(0, 80%, 15%)) !important;
+}
+
 .foreground-important-20 {
   color: var(--vb-important-20, hsl(0, 80%, 20%)) !important;
 }
@@ -4596,59 +4583,87 @@ input::-moz-placeholder {
   border-bottom-left-radius: 0.25rem !important;
 }
 
-.radius-circle {
+.radius-lg {
+  border-radius: 0.5rem !important;
+}
+
+.radius-lg-top,
+.radius-lg-left,
+.radius-lg-top-left {
+  border-top-left-radius: 0.5rem !important;
+}
+
+.radius-lg-top,
+.radius-lg-right,
+.radius-lg-top-right {
+  border-top-right-radius: 0.5rem !important;
+}
+
+.radius-lg-bottom,
+.radius-lg-right,
+.radius-lg-bottom-right {
+  border-bottom-right-radius: 0.5rem !important;
+}
+
+.radius-lg-bottom,
+.radius-lg-left,
+.radius-lg-bottom-left {
+  border-bottom-left-radius: 0.5rem !important;
+}
+
+.radius-lg-circle {
   border-radius: 9999px !important;
 }
 
-.radius-circle-top,
-.radius-circle-left,
-.radius-circle-top-left {
+.radius-lg-circle-top,
+.radius-lg-circle-left,
+.radius-lg-circle-top-left {
   border-top-left-radius: 9999px !important;
 }
 
-.radius-circle-top,
-.radius-circle-right,
-.radius-circle-top-right {
+.radius-lg-circle-top,
+.radius-lg-circle-right,
+.radius-lg-circle-top-right {
   border-top-right-radius: 9999px !important;
 }
 
-.radius-circle-bottom,
-.radius-circle-right,
-.radius-circle-bottom-right {
+.radius-lg-circle-bottom,
+.radius-lg-circle-right,
+.radius-lg-circle-bottom-right {
   border-bottom-right-radius: 9999px !important;
 }
 
-.radius-circle-bottom,
-.radius-circle-left,
-.radius-circle-bottom-left {
+.radius-lg-circle-bottom,
+.radius-lg-circle-left,
+.radius-lg-circle-bottom-left {
   border-bottom-left-radius: 9999px !important;
 }
 
-.radius-square {
+.radius-lg-circle-square {
   border-radius: 0 !important;
 }
 
-.radius-square-top,
-.radius-square-left,
-.radius-square-top-left {
+.radius-lg-circle-square-top,
+.radius-lg-circle-square-left,
+.radius-lg-circle-square-top-left {
   border-top-left-radius: 0 !important;
 }
 
-.radius-square-top,
-.radius-square-right,
-.radius-square-top-right {
+.radius-lg-circle-square-top,
+.radius-lg-circle-square-right,
+.radius-lg-circle-square-top-right {
   border-top-right-radius: 0 !important;
 }
 
-.radius-square-bottom,
-.radius-square-right,
-.radius-square-bottom-right {
+.radius-lg-circle-square-bottom,
+.radius-lg-circle-square-right,
+.radius-lg-circle-square-bottom-right {
   border-bottom-right-radius: 0 !important;
 }
 
-.radius-square-bottom,
-.radius-square-left,
-.radius-square-bottom-left {
+.radius-lg-circle-square-bottom,
+.radius-lg-circle-square-left,
+.radius-lg-circle-square-bottom-left {
   border-bottom-left-radius: 0 !important;
 }
 
@@ -5029,164 +5044,87 @@ input::-moz-placeholder {
 }
 
 .flex-gap {
-  margin-top: -1em !important;
-  margin-left: -1em !important;
-}
-.flex-gap > * {
-  margin-top: 1em !important;
-  margin-left: 1em !important;
+  gap: 1em !important;
 }
 
 .flex-gap-none {
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-}
-.flex-gap-none > * {
-  margin-top: 0 !important;
-  margin-left: 0 !important;
+  gap: 0 !important;
 }
 
 .flex-gap-xs {
-  margin-top: -0.25em !important;
-  margin-left: -0.25em !important;
-}
-.flex-gap-xs > * {
-  margin-top: 0.25em !important;
-  margin-left: 0.25em !important;
+  gap: 0.25em !important;
 }
 
 .flex-gap-sm {
-  margin-top: -0.5em !important;
-  margin-left: -0.5em !important;
-}
-.flex-gap-sm > * {
-  margin-top: 0.5em !important;
-  margin-left: 0.5em !important;
+  gap: 0.5em !important;
 }
 
 .flex-gap-md {
-  margin-top: -1em !important;
-  margin-left: -1em !important;
-}
-.flex-gap-md > * {
-  margin-top: 1em !important;
-  margin-left: 1em !important;
+  gap: 1em !important;
 }
 
 .flex-gap-lg {
-  margin-top: -1.5em !important;
-  margin-left: -1.5em !important;
-}
-.flex-gap-lg > * {
-  margin-top: 1.5em !important;
-  margin-left: 1.5em !important;
+  gap: 1.5em !important;
 }
 
 .flex-gap-xl {
-  margin-top: -2em !important;
-  margin-left: -2em !important;
-}
-.flex-gap-xl > * {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
+  gap: 2em !important;
 }
 
 .flex-gap-x {
-  margin-left: -1em !important;
-}
-.flex-gap-x > * {
-  margin-left: 1em !important;
+  column-gap: 1em !important;
 }
 
 .flex-gap-x-none {
-  margin-left: 0 !important;
-}
-.flex-gap-x-none > * {
-  margin-left: 0 !important;
+  column-gap: 0 !important;
 }
 
 .flex-gap-x-xs {
-  margin-left: -0.25em !important;
-}
-.flex-gap-x-xs > * {
-  margin-left: 0.25em !important;
+  column-gap: 0.25em !important;
 }
 
 .flex-gap-x-sm {
-  margin-left: -0.5em !important;
-}
-.flex-gap-x-sm > * {
-  margin-left: 0.5em !important;
+  column-gap: 0.5em !important;
 }
 
 .flex-gap-x-md {
-  margin-left: -1em !important;
-}
-.flex-gap-x-md > * {
-  margin-left: 1em !important;
+  column-gap: 1em !important;
 }
 
 .flex-gap-x-lg {
-  margin-left: -1.5em !important;
-}
-.flex-gap-x-lg > * {
-  margin-left: 1.5em !important;
+  column-gap: 1.5em !important;
 }
 
 .flex-gap-x-xl {
-  margin-left: -2em !important;
-}
-.flex-gap-x-xl > * {
-  margin-left: 2em !important;
+  column-gap: 2em !important;
 }
 
 .flex-gap-y {
-  margin-top: -1em !important;
-}
-.flex-gap-y > * {
-  margin-top: 1em !important;
+  row-gap: 1em !important;
 }
 
 .flex-gap-y-none {
-  margin-top: 0 !important;
-}
-.flex-gap-y-none > * {
-  margin-top: 0 !important;
+  row-gap: 0 !important;
 }
 
 .flex-gap-y-xs {
-  margin-top: -0.25em !important;
-}
-.flex-gap-y-xs > * {
-  margin-top: 0.25em !important;
+  row-gap: 0.25em !important;
 }
 
 .flex-gap-y-sm {
-  margin-top: -0.5em !important;
-}
-.flex-gap-y-sm > * {
-  margin-top: 0.5em !important;
+  row-gap: 0.5em !important;
 }
 
 .flex-gap-y-md {
-  margin-top: -1em !important;
-}
-.flex-gap-y-md > * {
-  margin-top: 1em !important;
+  row-gap: 1em !important;
 }
 
 .flex-gap-y-lg {
-  margin-top: -1.5em !important;
-}
-.flex-gap-y-lg > * {
-  margin-top: 1.5em !important;
+  row-gap: 1.5em !important;
 }
 
 .flex-gap-y-xl {
-  margin-top: -2em !important;
-}
-.flex-gap-y-xl > * {
-  margin-top: 2em !important;
+  row-gap: 2em !important;
 }
 
 .font-family-sans {
@@ -5214,7 +5152,7 @@ input::-moz-placeholder {
 }
 
 .font-leading-base {
-  line-height: 1.5 !important;
+  line-height: 1.625 !important;
 }
 
 .font-leading-sm {
@@ -5222,7 +5160,7 @@ input::-moz-placeholder {
 }
 
 .font-leading-lg {
-  line-height: 1.625 !important;
+  line-height: 1.875 !important;
 }
 
 .font-kerning-0 {
@@ -5607,6 +5545,66 @@ input::-moz-placeholder {
   max-width: 100% !important;
 }
 
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-x-visible {
+  overflow-x: visible !important;
+}
+
+.overflow-y-visible {
+  overflow-y: visible !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+
+.overflow-clip {
+  overflow: clip !important;
+}
+
+.overflow-x-clip {
+  overflow-x: clip !important;
+}
+
+.overflow-y-clip {
+  overflow-y: clip !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
 .padding {
   padding: 1em !important;
 }
@@ -5883,4 +5881,173 @@ input::-moz-placeholder {
   white-space: nowrap !important;
 }
 
+:root {
+  --vb-primary-hs: 152deg, 60%;
+  --vb-primary: var(--vb-primary-50);
+  --vb-primary-0: hsl(var(--vb-primary-hs), 0%);
+  --vb-primary-5: hsl(var(--vb-primary-hs), 5%);
+  --vb-primary-10: hsl(var(--vb-primary-hs), 10%);
+  --vb-primary-12: hsl(var(--vb-primary-hs), 12%);
+  --vb-primary-15: hsl(var(--vb-primary-hs), 15%);
+  --vb-primary-20: hsl(var(--vb-primary-hs), 20%);
+  --vb-primary-30: hsl(var(--vb-primary-hs), 30%);
+  --vb-primary-40: hsl(var(--vb-primary-hs), 40%);
+  --vb-primary-50: hsl(var(--vb-primary-hs), 50%);
+  --vb-primary-60: hsl(var(--vb-primary-hs), 60%);
+  --vb-primary-70: hsl(var(--vb-primary-hs), 70%);
+  --vb-primary-80: hsl(var(--vb-primary-hs), 80%);
+  --vb-primary-90: hsl(var(--vb-primary-hs), 90%);
+  --vb-primary-95: hsl(var(--vb-primary-hs), 95%);
+  --vb-primary-98: hsl(var(--vb-primary-hs), 98%);
+  --vb-primary-100: hsl(var(--vb-primary-hs), 100%);
+  --vb-secondary-hs: 214deg, 50%;
+  --vb-secondary: var(--vb-secondary-50);
+  --vb-secondary-0: hsl(var(--vb-secondary-hs), 0%);
+  --vb-secondary-5: hsl(var(--vb-secondary-hs), 5%);
+  --vb-secondary-10: hsl(var(--vb-secondary-hs), 10%);
+  --vb-secondary-12: hsl(var(--vb-secondary-hs), 12%);
+  --vb-secondary-15: hsl(var(--vb-secondary-hs), 15%);
+  --vb-secondary-20: hsl(var(--vb-secondary-hs), 20%);
+  --vb-secondary-30: hsl(var(--vb-secondary-hs), 30%);
+  --vb-secondary-40: hsl(var(--vb-secondary-hs), 40%);
+  --vb-secondary-50: hsl(var(--vb-secondary-hs), 50%);
+  --vb-secondary-60: hsl(var(--vb-secondary-hs), 60%);
+  --vb-secondary-70: hsl(var(--vb-secondary-hs), 70%);
+  --vb-secondary-80: hsl(var(--vb-secondary-hs), 80%);
+  --vb-secondary-90: hsl(var(--vb-secondary-hs), 90%);
+  --vb-secondary-95: hsl(var(--vb-secondary-hs), 95%);
+  --vb-secondary-98: hsl(var(--vb-secondary-hs), 98%);
+  --vb-secondary-100: hsl(var(--vb-secondary-hs), 100%);
+  --vb-neutral-hs: 214deg, 20%;
+  --vb-neutral: var(--vb-neutral-50);
+  --vb-neutral-0: hsl(var(--vb-neutral-hs), 0%);
+  --vb-neutral-5: hsl(var(--vb-neutral-hs), 5%);
+  --vb-neutral-10: hsl(var(--vb-neutral-hs), 10%);
+  --vb-neutral-12: hsl(var(--vb-neutral-hs), 12%);
+  --vb-neutral-15: hsl(var(--vb-neutral-hs), 15%);
+  --vb-neutral-20: hsl(var(--vb-neutral-hs), 20%);
+  --vb-neutral-30: hsl(var(--vb-neutral-hs), 30%);
+  --vb-neutral-40: hsl(var(--vb-neutral-hs), 40%);
+  --vb-neutral-50: hsl(var(--vb-neutral-hs), 50%);
+  --vb-neutral-60: hsl(var(--vb-neutral-hs), 60%);
+  --vb-neutral-70: hsl(var(--vb-neutral-hs), 70%);
+  --vb-neutral-80: hsl(var(--vb-neutral-hs), 80%);
+  --vb-neutral-90: hsl(var(--vb-neutral-hs), 90%);
+  --vb-neutral-95: hsl(var(--vb-neutral-hs), 95%);
+  --vb-neutral-98: hsl(var(--vb-neutral-hs), 98%);
+  --vb-neutral-100: hsl(var(--vb-neutral-hs), 100%);
+  --vb-important-hs: 0deg, 80%;
+  --vb-important: var(--vb-important-50);
+  --vb-important-0: hsl(var(--vb-important-hs), 0%);
+  --vb-important-5: hsl(var(--vb-important-hs), 5%);
+  --vb-important-10: hsl(var(--vb-important-hs), 10%);
+  --vb-important-12: hsl(var(--vb-important-hs), 12%);
+  --vb-important-15: hsl(var(--vb-important-hs), 15%);
+  --vb-important-20: hsl(var(--vb-important-hs), 20%);
+  --vb-important-30: hsl(var(--vb-important-hs), 30%);
+  --vb-important-40: hsl(var(--vb-important-hs), 40%);
+  --vb-important-50: hsl(var(--vb-important-hs), 50%);
+  --vb-important-60: hsl(var(--vb-important-hs), 60%);
+  --vb-important-70: hsl(var(--vb-important-hs), 70%);
+  --vb-important-80: hsl(var(--vb-important-hs), 80%);
+  --vb-important-90: hsl(var(--vb-important-hs), 90%);
+  --vb-important-95: hsl(var(--vb-important-hs), 95%);
+  --vb-important-98: hsl(var(--vb-important-hs), 98%);
+  --vb-important-100: hsl(var(--vb-important-hs), 100%);
+}
+
+:root, .vb-theme-root {
+  --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
+  --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
+  --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
+  --vb-background-hover: rgba(0, 0, 0, 0.05);
+  --vb-background-focus: rgba(0, 0, 0, 0.05);
+  --vb-background-active: rgba(0, 0, 0, 0.1);
+  --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
+  --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
+  --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
+  --vb-border-color: rgba(0, 0, 0, 0.1);
+  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
+  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
+  --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
+  --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root, .vb-theme-root {
+    --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
+    --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
+    --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
+    --vb-background-hover: rgba(255, 255, 255, 0.05);
+    --vb-background-focus: rgba(255, 255, 255, 0.05);
+    --vb-background-active: rgba(255, 255, 255, 0.1);
+    --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
+    --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
+    --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
+    --vb-border-color: rgba(255, 255, 255, 0.1);
+    --vb-border-color-dark: rgba(255, 255, 255, 0.2);
+    --vb-border-color-darker: rgba(255, 255, 255, 0.3);
+    --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
+    --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
+    color-scheme: dark;
+  }
+}
+
+.vb-theme-light {
+  --vb-background: var(--vb-neutral-100, hsl(214, 20%, 100%));
+  --vb-background-dark: var(--vb-neutral-98, hsl(214, 20%, 98%));
+  --vb-background-darker: var(--vb-neutral-95, hsl(214, 20%, 95%));
+  --vb-background-hover: rgba(0, 0, 0, 0.05);
+  --vb-background-focus: rgba(0, 0, 0, 0.05);
+  --vb-background-active: rgba(0, 0, 0, 0.1);
+  --vb-foreground: var(--vb-neutral-20, hsl(214, 20%, 20%));
+  --vb-foreground-light: var(--vb-neutral-40, hsl(214, 20%, 40%));
+  --vb-foreground-lighter: var(--vb-neutral-60, hsl(214, 20%, 60%));
+  --vb-border-color: rgba(0, 0, 0, 0.1);
+  --vb-border-color-dark: rgba(0, 0, 0, 0.2);
+  --vb-border-color-darker: rgba(0, 0, 0, 0.3);
+  --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 20%, 20%);
+  --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
+  color-scheme: light;
+}
+
+.vb-theme-dark {
+  --vb-background: var(--vb-neutral-10, hsl(214, 20%, 10%));
+  --vb-background-dark: var(--vb-neutral-12, hsl(214, 20%, 12%));
+  --vb-background-darker: var(--vb-neutral-15, hsl(214, 20%, 15%));
+  --vb-background-hover: rgba(255, 255, 255, 0.05);
+  --vb-background-focus: rgba(255, 255, 255, 0.05);
+  --vb-background-active: rgba(255, 255, 255, 0.1);
+  --vb-foreground: var(--vb-neutral-90, hsl(214, 20%, 90%));
+  --vb-foreground-light: var(--vb-neutral-70, hsl(214, 20%, 70%));
+  --vb-foreground-lighter: var(--vb-neutral-50, hsl(214, 20%, 50%));
+  --vb-border-color: rgba(255, 255, 255, 0.1);
+  --vb-border-color-dark: rgba(255, 255, 255, 0.2);
+  --vb-border-color-darker: rgba(255, 255, 255, 0.3);
+  --vb-shadow-color: hsl(var(--vb-neutral-hs, 214deg, 20%), 0%, 20%);
+  --vb-focus-visible: var(--vb-primary-50, hsl(152, 60%, 50%));
+  color-scheme: dark;
+}
+
+:root {
+  --vb-breakpoint-xs: 480px;
+  --vb-breakpoint-sm: 620px;
+  --vb-breakpoint-md: 760px;
+  --vb-breakpoint-lg: 990px;
+  --vb-breakpoint-xl: 1380px;
+}
+
+:root {
+  --vb-border-radius: 0.25rem;
+  --vb-border-radius-lg: 0.5rem;
+  --vb-border-radius-circle: 9999px;
+}
+
+:root {
+  --vb-transition-duration: 0.3s;
+  --vb-transition-duration-short: 0.15s;
+  --vb-transition-duration-long: 0.6s;
+  --vb-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 /*# sourceMappingURL=index.css.map */