@volvo-cars/css 1.52.1 → 2.0.0

package/dist/meta.json

@@ -1,88 +1,5 @@
 {
-  "deprecatedClasses": [
-    {
-      "name": "dialog",
-      "replacement": "dialog-large"
-    },
-    {
-      "name": "reel-indicators",
-      "replacement": "pagination-dots"
-    },
-    {
-      "name": "toggle-group-button",
-      "replacement": "chip-selectable"
-    },
-    {
-      "name": "bg-surface-feedback-orange"
-    },
-    {
-      "name": "rounded",
-      "replacement": "shape-default"
-    },
-    {
-      "name": "rounded-sm",
-      "replacement": "shape-default"
-    },
-    {
-      "name": "rounded-md",
-      "replacement": "shape-default"
-    },
-    {
-      "name": "rounded-lg"
-    },
-    {
-      "name": "rounded-t"
-    },
-    {
-      "name": "rounded-t-sm"
-    },
-    {
-      "name": "rounded-t-md"
-    },
-    {
-      "name": "rounded-t-lg"
-    },
-    {
-      "name": "rounded-e"
-    },
-    {
-      "name": "rounded-e-sm"
-    },
-    {
-      "name": "rounded-e-md"
-    },
-    {
-      "name": "rounded-e-lg"
-    },
-    {
-      "name": "rounded-b"
-    },
-    {
-      "name": "rounded-b-sm"
-    },
-    {
-      "name": "rounded-b-md"
-    },
-    {
-      "name": "rounded-b-lg"
-    },
-    {
-      "name": "rounded-s"
-    },
-    {
-      "name": "rounded-s-sm"
-    },
-    {
-      "name": "rounded-s-md"
-    },
-    {
-      "name": "rounded-s-lg"
-    },
-    {
-      "name": "heading-3",
-      "replacement": "heading-2"
-    }
-  ],
+  "deprecatedClasses": [],
   "classNames": [
     "-m-12",
     "-m-16",
@@ -287,10 +204,8 @@
     "current:text-inverted",
     "current:text-primary",
     "details-open:rotate-180",
-    "dialog",
     "dialog-large",
     "dialog-small",
-    "dialog__close",
     "double-range",
     "empty:hidden",
     "empty:invisible",
@@ -692,6 +607,7 @@
     "lg:ml-8",
     "lg:ml-auto",
     "lg:ml-pagemargin",
+    "lg:ml-pageoffset",
     "lg:mr-0",
     "lg:mr-12",
     "lg:mr-16",
@@ -704,6 +620,7 @@
     "lg:mr-8",
     "lg:mr-auto",
     "lg:mr-pagemargin",
+    "lg:mr-pageoffset",
     "lg:mt-0",
     "lg:mt-12",
     "lg:mt-16",
@@ -736,6 +653,7 @@
     "lg:mx-8",
     "lg:mx-auto",
     "lg:mx-pagemargin",
+    "lg:mx-pageoffset",
     "lg:my-0",
     "lg:my-12",
     "lg:my-16",
@@ -808,6 +726,7 @@
     "lg:pl-64",
     "lg:pl-8",
     "lg:pl-pagemargin",
+    "lg:pl-pageoffset",
     "lg:pr-0",
     "lg:pr-12",
     "lg:pr-16",
@@ -819,6 +738,7 @@
     "lg:pr-64",
     "lg:pr-8",
     "lg:pr-pagemargin",
+    "lg:pr-pageoffset",
     "lg:pt-0",
     "lg:pt-12",
     "lg:pt-16",
@@ -849,6 +769,7 @@
     "lg:px-64",
     "lg:px-8",
     "lg:px-pagemargin",
+    "lg:px-pageoffset",
     "lg:py-0",
     "lg:py-12",
     "lg:py-16",
@@ -1213,6 +1134,7 @@
     "md:ml-8",
     "md:ml-auto",
     "md:ml-pagemargin",
+    "md:ml-pageoffset",
     "md:mr-0",
     "md:mr-12",
     "md:mr-16",
@@ -1225,6 +1147,7 @@
     "md:mr-8",
     "md:mr-auto",
     "md:mr-pagemargin",
+    "md:mr-pageoffset",
     "md:mt-0",
     "md:mt-12",
     "md:mt-16",
@@ -1257,6 +1180,7 @@
     "md:mx-8",
     "md:mx-auto",
     "md:mx-pagemargin",
+    "md:mx-pageoffset",
     "md:my-0",
     "md:my-12",
     "md:my-16",
@@ -1329,6 +1253,7 @@
     "md:pl-64",
     "md:pl-8",
     "md:pl-pagemargin",
+    "md:pl-pageoffset",
     "md:pr-0",
     "md:pr-12",
     "md:pr-16",
@@ -1340,6 +1265,7 @@
     "md:pr-64",
     "md:pr-8",
     "md:pr-pagemargin",
+    "md:pr-pageoffset",
     "md:pt-0",
     "md:pt-12",
     "md:pt-16",
@@ -1370,6 +1296,7 @@
     "md:px-64",
     "md:px-8",
     "md:px-pagemargin",
+    "md:px-pageoffset",
     "md:py-0",
     "md:py-12",
     "md:py-16",
@@ -1417,6 +1344,7 @@
     "media-banner",
     "media-card",
     "media-tile",
+    "message-bar",
     "micro",
     "min-h-0",
     "min-h-16",
@@ -1443,6 +1371,7 @@
     "ml-8",
     "ml-auto",
     "ml-pagemargin",
+    "ml-pageoffset",
     "mr-0",
     "mr-12",
     "mr-16",
@@ -1455,6 +1384,7 @@
     "mr-8",
     "mr-auto",
     "mr-pagemargin",
+    "mr-pageoffset",
     "mt-0",
     "mt-12",
     "mt-16",
@@ -1487,6 +1417,7 @@
     "mx-8",
     "mx-auto",
     "mx-pagemargin",
+    "mx-pageoffset",
     "my-0",
     "my-12",
     "my-16",
@@ -1570,6 +1501,7 @@
     "pl-64",
     "pl-8",
     "pl-pagemargin",
+    "pl-pageoffset",
     "pr-0",
     "pr-12",
     "pr-16",
@@ -1581,6 +1513,7 @@
     "pr-64",
     "pr-8",
     "pr-pagemargin",
+    "pr-pageoffset",
     "pt-0",
     "pt-12",
     "pt-16",
@@ -1611,6 +1544,7 @@
     "px-64",
     "px-8",
     "px-pagemargin",
+    "px-pageoffset",
     "py-0",
     "py-12",
     "py-16",
@@ -1637,38 +1571,13 @@
     "radio-checked:border-primary",
     "range",
     "reel",
-    "reel-indicators",
     "relative",
     "resize-handle",
     "rotate-0",
     "rotate-180",
     "rotate-90",
-    "rounded",
-    "rounded-b",
-    "rounded-b-full",
-    "rounded-b-lg",
-    "rounded-b-md",
-    "rounded-b-sm",
-    "rounded-e",
-    "rounded-e-full",
-    "rounded-e-lg",
-    "rounded-e-md",
-    "rounded-e-sm",
     "rounded-full",
-    "rounded-lg",
-    "rounded-md",
     "rounded-none",
-    "rounded-s",
-    "rounded-s-full",
-    "rounded-s-lg",
-    "rounded-s-md",
-    "rounded-s-sm",
-    "rounded-sm",
-    "rounded-t",
-    "rounded-t-full",
-    "rounded-t-lg",
-    "rounded-t-md",
-    "rounded-t-sm",
     "scale-100",
     "scale-110",
     "scale-96",
@@ -1763,7 +1672,6 @@
     "title-page",
     "title-section",
     "toast-message",
-    "toggle-group-button",
     "tooltip",
     "top-0",
     "top-1/2",
@@ -2080,6 +1988,7 @@
     "xl:ml-8",
     "xl:ml-auto",
     "xl:ml-pagemargin",
+    "xl:ml-pageoffset",
     "xl:mr-0",
     "xl:mr-12",
     "xl:mr-16",
@@ -2092,6 +2001,7 @@
     "xl:mr-8",
     "xl:mr-auto",
     "xl:mr-pagemargin",
+    "xl:mr-pageoffset",
     "xl:mt-0",
     "xl:mt-12",
     "xl:mt-16",
@@ -2124,6 +2034,7 @@
     "xl:mx-8",
     "xl:mx-auto",
     "xl:mx-pagemargin",
+    "xl:mx-pageoffset",
     "xl:my-0",
     "xl:my-12",
     "xl:my-16",
@@ -2196,6 +2107,7 @@
     "xl:pl-64",
     "xl:pl-8",
     "xl:pl-pagemargin",
+    "xl:pl-pageoffset",
     "xl:pr-0",
     "xl:pr-12",
     "xl:pr-16",
@@ -2207,6 +2119,7 @@
     "xl:pr-64",
     "xl:pr-8",
     "xl:pr-pagemargin",
+    "xl:pr-pageoffset",
     "xl:pt-0",
     "xl:pt-12",
     "xl:pt-16",
@@ -2237,6 +2150,7 @@
     "xl:px-64",
     "xl:px-8",
     "xl:px-pagemargin",
+    "xl:px-pageoffset",
     "xl:py-0",
     "xl:py-12",
     "xl:py-16",
@@ -2386,7 +2300,7 @@
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
-        "font-weight: var(--v-font-emphasis-weight)",
+        "font-weight: var(--v-font-regular-weight)",
         "white-space: nowrap",
         "overflow-x: clip",
         "--button-accent-color: var(--v-color-surface-neutral)",
@@ -2415,7 +2329,7 @@
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
-        "font-weight: var(--v-font-emphasis-weight)",
+        "font-weight: var(--v-font-regular-weight)",
         "white-space: nowrap",
         "overflow-x: clip",
         "background: color-mix(in oklab,\n    var(--_button-bg-color, transparent),\n    var(--button-accent-color) var(--_overlay-rate))",
@@ -2443,7 +2357,7 @@
         "max-width: 100%",
         "height: 3rem",
         "font-size: var(--v-font-16-size)",
-        "font-weight: var(--v-font-emphasis-weight)",
+        "font-weight: var(--v-font-regular-weight)",
         "white-space: nowrap",
         "overflow-x: clip",
         "--button-accent-color: var(--v-color-foreground-primary)",
@@ -2460,12 +2374,6 @@
       "declarations": [],
       "layer": "volvo.blocks"
     },
-    {
-      "name": "dialog",
-      "prefixes": [],
-      "declarations": [],
-      "layer": "volvo.blocks"
-    },
     {
       "name": "dialog-large",
       "prefixes": [],
@@ -2490,20 +2398,6 @@
       "declarations": [],
       "layer": "volvo.blocks"
     },
-    {
-      "name": "dialog__close",
-      "prefixes": [],
-      "declarations": [
-        "top: 0",
-        "height: var(--v-space-48)",
-        "justify-content: flex-end",
-        "align-items: center",
-        "display: flex",
-        "position: absolute",
-        "inset-inline-end: 0"
-      ],
-      "layer": "volvo.blocks"
-    },
     {
       "name": "radio",
       "prefixes": [],
@@ -2538,17 +2432,6 @@
       ],
       "layer": "volvo.layout"
     },
-    {
-      "name": "heading-3",
-      "prefixes": [],
-      "declarations": [
-        "font-size: clamp(var(--v-font-heading-3-size-min),\n    var(--_size-override, var(--v-font-heading-3-size)),\n    var(--v-font-heading-3-size-max))",
-        "font-weight: var(--v-font-heading-3-weight)",
-        "line-height: var(--v-font-heading-3-lineheight)",
-        "text-wrap: balance"
-      ],
-      "layer": "volvo.layout"
-    },
     {
       "name": "wordmark",
       "prefixes": [],
@@ -2647,32 +2530,6 @@
       ],
       "layer": "volvo.blocks"
     },
-    {
-      "name": "toggle-group-button",
-      "prefixes": [],
-      "declarations": [
-        "--_overlay-rate: 0%",
-        "--_color: var(--v-color-foreground-primary)",
-        "--spinner-size: 1rem",
-        "min-width: max-content",
-        "max-width: 100%",
-        "height: 2.5rem",
-        "padding-inline: var(--v-space-16)",
-        "font: var(--v-font-16)",
-        "color: var(--_color)",
-        "white-space: nowrap",
-        "user-select: none",
-        "background-color: color-mix(in oklab,\n    var(--_chip-bg-color, transparent),\n    var(--_color) var(--_overlay-rate))",
-        "border-radius: var(--v-shape-emphasis)",
-        "box-shadow: inset 0 0 0 1px var(--v-color-foreground-tertiary)",
-        "transition: background-color var(--v-transition-default)",
-        "justify-content: center",
-        "align-items: center",
-        "display: inline-flex",
-        "position: relative"
-      ],
-      "layer": "volvo.blocks"
-    },
     {
       "name": "input-floating-label",
       "prefixes": [],
@@ -2998,6 +2855,26 @@
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "message-bar",
+      "prefixes": [],
+      "declarations": [
+        "--v-color-foreground-primary: var(--v-color-foreground-inverted)",
+        "--_dark-toggle: var(--_light-toggle)",
+        "gap: var(--v-space-8)",
+        "padding: var(--v-space-16) var(--v-space-pageoffset)",
+        "color: var(--v-color-foreground-inverted)",
+        "background-color: var(--v-color-surface-neutral)",
+        "flex-direction: column",
+        "display: flex",
+        "position: relative",
+        "gap: var(--v-space-16)",
+        "flex-direction: row",
+        "justify-content: center",
+        "align-items: center"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "tooltip",
       "prefixes": [],
@@ -3068,7 +2945,7 @@
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
         "font: var(--v-font-12)",
-        "border-radius: var(--v-radius-full)",
+        "border-radius: var(--v-shape-default)",
         "color: var(--v-color-foreground-inverted)",
         "background-color: var(--v-color-surface-neutral)"
       ],
@@ -3082,7 +2959,7 @@
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
         "font: var(--v-font-12)",
-        "border-radius: var(--v-radius-full)",
+        "border-radius: var(--v-shape-default)",
         "box-shadow: inset 0 0 0 1px\n    var(--_border-color, var(--v-color-ornament-primary))"
       ],
       "layer": "volvo.blocks"
@@ -3095,8 +2972,8 @@
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
         "font: var(--v-font-12)",
-        "border-radius: var(--v-radius-full)",
-        "background-color: var(--v-color-background-secondary)"
+        "border-radius: var(--v-shape-default)",
+        "background-color: var(--v-color-surface-gray)"
       ],
       "layer": "volvo.blocks"
     },
@@ -3307,18 +3184,6 @@
       ],
       "layer": "volvo.layout"
     },
-    {
-      "name": "reel-indicators",
-      "prefixes": [],
-      "declarations": [
-        "column-gap: var(--v-space-4)",
-        "margin-block: var(--v-space-32)",
-        "flex-direction: row",
-        "justify-content: center",
-        "display: flex"
-      ],
-      "layer": "volvo.layout"
-    },
     {
       "name": "stack-4",
       "prefixes": [],
@@ -3385,6 +3250,12 @@
       "declarations": [],
       "layer": "volvo.layout"
     },
+    {
+      "name": "heading-3",
+      "prefixes": [],
+      "declarations": [],
+      "layer": "volvo.layout"
+    },
     {
       "name": "font-20",
       "prefixes": [
@@ -4411,396 +4282,184 @@
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded",
+      "name": "rounded-full",
       "prefixes": [],
       "declarations": [
-        "border-radius: var(--v-radius-sm)"
+        "border-radius: var(--v-shape-emphasis)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-sm",
+      "name": "contain-none",
       "prefixes": [],
       "declarations": [
-        "border-radius: var(--v-radius-sm)"
+        "contain: none"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-md",
+      "name": "contain-content",
       "prefixes": [],
       "declarations": [
-        "border-radius: var(--v-radius-md)"
+        "contain: content"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-lg",
-      "prefixes": [],
+      "name": "flow-root",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-radius: var(--v-radius-lg)"
+        "--_display-inner: flow-root",
+        "display: var(--_display-outer) var(--_display-inner)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-full",
-      "prefixes": [],
+      "name": "block",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-radius: var(--v-radius-full)"
+        "--_display-outer: block",
+        "display: var(--_display-outer) var(--_display-inner)",
+        "--_display-outer: ",
+        "display: block"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-t",
-      "prefixes": [],
+      "name": "inline",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-start-radius: var(--v-radius-sm)",
-        "border-start-end-radius: var(--v-radius-sm)"
+        "--_display-outer: inline",
+        "display: var(--_display-outer) var(--_display-inner)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-t-sm",
-      "prefixes": [],
+      "name": "contents",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-start-radius: var(--v-radius-sm)",
-        "border-start-end-radius: var(--v-radius-sm)"
+        "display: contents"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-t-md",
-      "prefixes": [],
+      "name": "flex",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-start-radius: var(--v-radius-md)",
-        "border-start-end-radius: var(--v-radius-md)"
+        "--_display-inner: flex",
+        "display: var(--_display-outer) flex"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-t-lg",
-      "prefixes": [],
+      "name": "flex-row",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-start-radius: var(--v-radius-lg)",
-        "border-start-end-radius: var(--v-radius-lg)"
+        "--_display-inner: flex",
+        "display: var(--_display-outer) flex",
+        "flex-direction: row"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-t-full",
-      "prefixes": [],
+      "name": "flex-col",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-start-radius: var(--v-radius-full)",
-        "border-start-end-radius: var(--v-radius-full)"
+        "--_display-inner: flex",
+        "display: var(--_display-outer) flex",
+        "flex-direction: column"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-e",
-      "prefixes": [],
+      "name": "flex-row-reverse",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-end-radius: var(--v-radius-sm)",
-        "border-end-end-radius: var(--v-radius-sm)"
+        "--_display-inner: flex",
+        "display: var(--_display-outer) flex",
+        "flex-direction: row-reverse"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-e-sm",
-      "prefixes": [],
+      "name": "flex-col-reverse",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-end-radius: var(--v-radius-sm)",
-        "border-end-end-radius: var(--v-radius-sm)"
+        "--_display-inner: flex",
+        "display: var(--_display-outer) flex",
+        "flex-direction: column-reverse"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-e-md",
-      "prefixes": [],
+      "name": "flex-wrap",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-end-radius: var(--v-radius-md)",
-        "border-end-end-radius: var(--v-radius-md)"
+        "flex-wrap: wrap"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-e-lg",
-      "prefixes": [],
+      "name": "flex-nowrap",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-end-radius: var(--v-radius-lg)",
-        "border-end-end-radius: var(--v-radius-lg)"
+        "flex-wrap: nowrap"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "rounded-e-full",
-      "prefixes": [],
+      "name": "flex-grow",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
       "declarations": [
-        "border-start-end-radius: var(--v-radius-full)",
-        "border-end-end-radius: var(--v-radius-full)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-b",
-      "prefixes": [],
-      "declarations": [
-        "border-end-end-radius: var(--v-radius-sm)",
-        "border-end-start-radius: var(--v-radius-sm)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-b-sm",
-      "prefixes": [],
-      "declarations": [
-        "border-end-end-radius: var(--v-radius-sm)",
-        "border-end-start-radius: var(--v-radius-sm)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-b-md",
-      "prefixes": [],
-      "declarations": [
-        "border-end-end-radius: var(--v-radius-md)",
-        "border-end-start-radius: var(--v-radius-md)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-b-lg",
-      "prefixes": [],
-      "declarations": [
-        "border-end-end-radius: var(--v-radius-lg)",
-        "border-end-start-radius: var(--v-radius-lg)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-b-full",
-      "prefixes": [],
-      "declarations": [
-        "border-end-end-radius: var(--v-radius-full)",
-        "border-end-start-radius: var(--v-radius-full)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-s",
-      "prefixes": [],
-      "declarations": [
-        "border-start-start-radius: var(--v-radius-sm)",
-        "border-end-start-radius: var(--v-radius-sm)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-s-sm",
-      "prefixes": [],
-      "declarations": [
-        "border-start-start-radius: var(--v-radius-sm)",
-        "border-end-start-radius: var(--v-radius-sm)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-s-md",
-      "prefixes": [],
-      "declarations": [
-        "border-start-start-radius: var(--v-radius-md)",
-        "border-end-start-radius: var(--v-radius-md)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-s-lg",
-      "prefixes": [],
-      "declarations": [
-        "border-start-start-radius: var(--v-radius-lg)",
-        "border-end-start-radius: var(--v-radius-lg)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "rounded-s-full",
-      "prefixes": [],
-      "declarations": [
-        "border-start-start-radius: var(--v-radius-full)",
-        "border-end-start-radius: var(--v-radius-full)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "contain-none",
-      "prefixes": [],
-      "declarations": [
-        "contain: none"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "contain-content",
-      "prefixes": [],
-      "declarations": [
-        "contain: content"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flow-root",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flow-root",
-        "display: var(--_display-outer) var(--_display-inner)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "block",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-outer: block",
-        "display: var(--_display-outer) var(--_display-inner)",
-        "--_display-outer: ",
-        "display: block"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "inline",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-outer: inline",
-        "display: var(--_display-outer) var(--_display-inner)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "contents",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "display: contents"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flex",
-        "display: var(--_display-outer) flex"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-row",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flex",
-        "display: var(--_display-outer) flex",
-        "flex-direction: row"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-col",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flex",
-        "display: var(--_display-outer) flex",
-        "flex-direction: column"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-row-reverse",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flex",
-        "display: var(--_display-outer) flex",
-        "flex-direction: row-reverse"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-col-reverse",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "--_display-inner: flex",
-        "display: var(--_display-outer) flex",
-        "flex-direction: column-reverse"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-wrap",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "flex-wrap: wrap"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-nowrap",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "flex-wrap: nowrap"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "flex-grow",
-      "prefixes": [
-        "lg",
-        "md",
-        "xl"
-      ],
-      "declarations": [
-        "flex-grow: 1"
+        "flex-grow: 1"
       ],
       "layer": "volvo.utilities"
     },
@@ -6710,81 +6369,118 @@
       "layer": "volvo.utilities"
     },
     {
-      "name": "mx-pagemargin",
+      "name": "mx-pageoffset",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin-inline-end: var(--v-space-pagemargin)",
-        "margin-inline-start: var(--v-space-pagemargin)"
+        "margin-inline-end: var(--v-space-pageoffset)",
+        "margin-inline-start: var(--v-space-pageoffset)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "mr-pagemargin",
+      "name": "mr-pageoffset",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin-inline-end: var(--v-space-pagemargin)"
+        "margin-inline-end: var(--v-space-pageoffset)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "ml-pagemargin",
+      "name": "ml-pageoffset",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin-inline-start: var(--v-space-pagemargin)"
+        "margin-inline-start: var(--v-space-pageoffset)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "m-2",
+      "name": "mx-pagemargin",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin: .125rem"
+        "margin-inline-end: var(--v-space-pagemargin)",
+        "margin-inline-start: var(--v-space-pagemargin)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "-m-2",
+      "name": "mr-pagemargin",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin: -.125rem"
+        "margin-inline-end: var(--v-space-pagemargin)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "my-2",
+      "name": "ml-pagemargin",
       "prefixes": [
         "lg",
         "md",
         "xl"
       ],
       "declarations": [
-        "margin-top: .125rem",
-        "margin-bottom: .125rem"
+        "margin-inline-start: var(--v-space-pagemargin)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "mt-2",
+      "name": "m-2",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "margin: .125rem"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "-m-2",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "margin: -.125rem"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "my-2",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "margin-top: .125rem",
+        "margin-bottom: .125rem"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "mt-2",
       "prefixes": [
         "lg",
         "md",
@@ -8881,6 +8577,43 @@
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "px-pageoffset",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "padding-inline-end: var(--v-space-pageoffset)",
+        "padding-inline-start: var(--v-space-pageoffset)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "pr-pageoffset",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "padding-inline-end: var(--v-space-pageoffset)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "pl-pageoffset",
+      "prefixes": [
+        "lg",
+        "md",
+        "xl"
+      ],
+      "declarations": [
+        "padding-inline-start: var(--v-space-pageoffset)"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "px-pagemargin",
       "prefixes": [
@@ -10733,477 +10466,622 @@
   ],
   "tokens": [
     {
-      "css": "--v-color-always-black",
-      "type": "color",
-      "variant": "black",
-      "category": "always",
+      "css": "--v-space-l",
+      "type": "space",
+      "variant": "l",
       "meta": {
-        "description": "Always black regardless of colour mode."
+        "description": "--v-space-{l,m,s} will be deprecated. These are fallbacks for the new spacing system"
       },
-      "value": [
-        "#000000"
-      ]
+      "value": "var(--v-space-xl)"
     },
     {
-      "css": "--v-color-always-white",
-      "type": "color",
-      "variant": "white",
-      "category": "always",
-      "meta": {
-        "description": "Always white regardless of color mode."
-      },
-      "value": [
-        "#ffffff"
-      ]
+      "css": "--v-space-m",
+      "type": "space",
+      "variant": "m",
+      "meta": {},
+      "value": "var(--v-space-lg)"
     },
     {
-      "css": "--v-color-background-feedback-gray",
-      "type": "color",
-      "property": "background",
-      "variant": "gray",
-      "category": "feedback",
-      "meta": {
-        "description": "Use as a background color to indicate informational messages."
-      },
-      "value": [
-        "#f5f5f5",
-        "#2e2e2e"
-      ]
+      "css": "--v-space-s",
+      "type": "space",
+      "variant": "s",
+      "meta": {},
+      "value": "var(--v-space-md)"
     },
     {
-      "css": "--v-color-background-feedback-green",
-      "type": "color",
-      "property": "background",
-      "variant": "green",
-      "category": "feedback",
+      "css": "--v-size-grid-column",
+      "type": "size",
+      "category": "grid-column",
       "meta": {
-        "description": "Use as a background color to highlight successful and positive states."
+        "description": "The width of a single grid column."
       },
-      "value": [
-        "#d7f9df",
-        "#02310c"
-      ]
+      "value": "calc(\n    (\n      var(--v-size-grid-maxwidth) -\n      (var(--v-grid-columns) - 1) *\n      var(--v-space-gutter)\n    ) /\n    var(--v-grid-columns)\n  )"
     },
     {
-      "css": "--v-color-background-feedback-orange",
-      "type": "color",
-      "property": "background",
-      "variant": "orange",
-      "category": "feedback",
+      "css": "--v-size-grid-maxwidth",
+      "type": "size",
+      "category": "grid-maxwidth",
       "meta": {
-        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
+        "description": "The maximum width of the 12 column grid."
       },
-      "value": [
-        "#ffe8d1",
-        "#522900"
-      ]
+      "value": "min(81rem, 100vw - var(--_pagemargin-min) * 2)"
     },
     {
-      "css": "--v-color-background-feedback-red",
-      "type": "color",
-      "property": "background",
-      "variant": "red",
-      "category": "feedback",
+      "css": "--v-size-pagemax",
+      "type": "size",
+      "category": "pagemax",
       "meta": {
-        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
+        "description": "The maximum width a page is allowed to grow to."
       },
-      "value": [
-        "#fce5e3",
-        "#4a0d07"
-      ]
+      "value": "min(160rem, 100vw)"
     },
     {
-      "css": "--v-color-background-primary",
-      "type": "color",
-      "property": "background",
-      "variant": "primary",
+      "css": "--v-space-pageoffset",
+      "type": "space",
+      "variant": "pageoffset",
       "meta": {
-        "description": "Use as a primary background color."
+        "direction": "horizontal",
+        "property": "margin,padding,inset",
+        "description": "The inline offset from the viewport edge to the content area,\nmatching the page layout. On viewports within pagemax this equals\npagemargin; on wider viewports it adds the extra centering space."
       },
-      "value": [
-        "#ffffff",
-        "#141414"
-      ]
+      "value": "max(\n    var(--v-space-pagemargin),\n    calc((100% - var(--v-size-pagemax)) / 2 + var(--v-space-pagemargin))\n  )"
     },
     {
-      "css": "--v-color-background-secondary",
-      "type": "color",
-      "property": "background",
-      "variant": "secondary",
+      "css": "--v-size-grid-xs",
+      "type": "size",
+      "variant": "xs",
+      "category": "grid",
       "meta": {
-        "description": "Use as a secondary background color for elevated sections."
+        "description": "Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)"
       },
-      "value": [
-        "#fafafa",
-        "#1f1f1f"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xs-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xs-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-foreground-accent-blue",
-      "type": "color",
-      "property": "foreground",
-      "variant": "blue",
-      "category": "accent",
+      "css": "--v-size-grid-sm",
+      "type": "size",
+      "variant": "sm",
+      "category": "grid",
       "meta": {
-        "description": "For use in links and as a border in emphasized selected states."
+        "description": "Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)"
       },
-      "value": [
-        "#1c6eba",
-        "#378fe1"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_sm-cols)) +\n    var(--v-space-gutter) *\n    (var(--_sm-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-foreground-feedback-green",
-      "type": "color",
-      "property": "foreground",
-      "variant": "green",
-      "category": "feedback",
+      "css": "--v-size-grid-md",
+      "type": "size",
+      "category": "grid-md",
       "meta": {
-        "description": "Use as a foreground or border color to highlight successful states and positive actions."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)"
       },
-      "value": [
-        "#04771d",
-        "#07ca31"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_md-cols)) +\n    var(--v-space-gutter) *\n    (var(--_md-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-foreground-feedback-orange",
-      "type": "color",
-      "property": "foreground",
-      "variant": "orange",
-      "category": "feedback",
+      "css": "--v-size-grid-lg",
+      "type": "size",
+      "variant": "lg",
+      "category": "grid",
       "meta": {
-        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12)"
       },
-      "value": [
-        "#ce6700",
-        "#ff9933"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_lg-cols)) +\n    var(--v-space-gutter) *\n    (var(--_lg-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-foreground-feedback-red",
-      "type": "color",
-      "property": "foreground",
-      "variant": "red",
-      "category": "feedback",
+      "css": "--v-size-grid-xl",
+      "type": "size",
+      "variant": "xl",
+      "category": "grid",
       "meta": {
-        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12)"
       },
-      "value": [
-        "#cd2314",
-        "#ef6658"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xl-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xl-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-foreground-inverted",
-      "type": "color",
-      "property": "foreground",
-      "variant": "inverted",
+      "css": "--v-size-grid-max",
+      "type": "size",
+      "category": "grid-max",
       "meta": {
-        "description": "The inverse of the primary foreground color. For use on filled surfaces."
+        "description": "Width based on the maximum extent of a `max` container"
       },
-      "value": [
-        "#ffffff",
-        "#0a0a0a"
-      ]
+      "value": "min(\n    (100vw - var(--v-space-pagemargin) * 2) +\n    var(--_outer-margin, 0rem),\n    160rem\n  )"
     },
     {
-      "css": "--v-color-foreground-primary",
-      "type": "color",
-      "property": "foreground",
-      "variant": "primary",
+      "css": "--v-size-contentmax",
+      "type": "size",
+      "category": "contentmax",
       "meta": {
-        "description": "Use for primary text, icons and borders."
+        "description": "The maximum width a block of content should be allowed to grow to while maintaining readability\nhttps://baymard.com/blog/line-length-readability"
       },
-      "value": [
-        "#0a0a0a",
-        "#ffffff"
-      ]
+      "value": "70ch"
     },
     {
-      "css": "--v-color-foreground-secondary",
-      "type": "color",
-      "property": "foreground",
-      "variant": "secondary",
+      "css": "--v-radius-sm",
+      "type": "radius",
+      "variant": "sm",
+      "meta": {},
+      "value": "0.25rem"
+    },
+    {
+      "css": "--v-radius-md",
+      "type": "radius",
+      "variant": "md",
+      "meta": {},
+      "value": "0.5rem"
+    },
+    {
+      "css": "--v-radius-lg",
+      "type": "radius",
+      "variant": "lg",
+      "meta": {},
+      "value": "1rem"
+    },
+    {
+      "css": "--v-radius-full",
+      "type": "radius",
+      "variant": "full",
+      "meta": {},
+      "value": "9999px"
+    },
+    {
+      "css": "--v-index-spinner",
+      "type": "index",
+      "variant": "spinner",
+      "meta": {},
+      "value": "30"
+    },
+    {
+      "css": "--v-index-overlay",
+      "type": "index",
+      "variant": "overlay",
+      "meta": {},
+      "value": "20"
+    },
+    {
+      "css": "--v-index-navigation",
+      "type": "index",
+      "variant": "navigation",
+      "meta": {},
+      "value": "10"
+    },
+    {
+      "css": "--v-index-default",
+      "type": "index",
+      "variant": "default",
+      "meta": {},
+      "value": "0"
+    },
+    {
+      "css": "--v-index-deep",
+      "type": "index",
+      "variant": "deep",
+      "meta": {},
+      "value": "-1"
+    },
+    {
+      "css": "--v-grid-columns",
+      "type": "grid",
+      "variant": "columns",
       "meta": {
-        "description": "Use for secondary text, icons and borders."
+        "description": "The total number of grid columns at the current breakpoint."
       },
+      "value": "8"
+    },
+    {
+      "css": "--v-font-heading-1-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "1",
+      "category": "heading",
+      "meta": {},
+      "value": "3rem"
+    },
+    {
+      "css": "--v-font-heading-2-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "2",
+      "category": "heading",
+      "meta": {},
+      "value": "2rem"
+    },
+    {
+      "css": "--v-font-heading-3-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "3",
+      "category": "heading",
+      "meta": {},
+      "value": "2rem"
+    },
+    {
+      "css": "--v-font-statement-1-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "1",
+      "category": "statement",
+      "meta": {},
+      "value": "8rem"
+    },
+    {
+      "css": "--v-font-statement-2-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "2",
+      "category": "statement",
+      "meta": {},
+      "value": "6rem"
+    },
+    {
+      "css": "--v-font-statement-3-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "3",
+      "category": "statement",
+      "meta": {},
+      "value": "4.5rem"
+    },
+    {
+      "css": "--v-font-statement-signature-size-max",
+      "type": "font",
+      "modifier": "max",
+      "property": "size",
+      "variant": "signature",
+      "category": "statement",
+      "meta": {},
+      "value": "4.5rem"
+    },
+    {
+      "css": "--v-transition-default",
+      "type": "transition",
+      "variant": "default",
+      "meta": {},
+      "value": "var(--_v-transition-speed-default) ease"
+    },
+    {
+      "css": "--v-transition-micro",
+      "type": "transition",
+      "variant": "micro",
+      "meta": {},
+      "value": "var(--_v-transition-speed-fast) ease"
+    },
+    {
+      "css": "--v-transition-notable",
+      "type": "transition",
+      "variant": "notable",
+      "meta": {},
+      "value": "var(--_v-transition-speed-slow) ease"
+    },
+    {
+      "css": "--v-color-foreground-primary",
+      "type": "color",
+      "property": "foreground",
+      "variant": "primary",
+      "meta": {},
       "value": [
-        "#616161",
-        "#bababa"
+        "#ffffff",
+        "#000000"
       ]
     },
     {
-      "css": "--v-color-foreground-tertiary",
+      "css": "--v-color-foreground-secondary",
       "type": "color",
       "property": "foreground",
-      "variant": "tertiary",
+      "variant": "secondary",
       "meta": {
-        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
+        "description": "Use for primary text, icons and borders."
       },
       "value": [
-        "#838383"
+        "#969696",
+        "#5e5e5e"
       ]
     },
     {
-      "css": "--v-color-ornament-primary",
+      "css": "--v-color-foreground-tertiary",
       "type": "color",
-      "property": "ornament",
-      "variant": "primary",
+      "property": "foreground",
+      "variant": "tertiary",
       "meta": {
-        "description": "Use for strokes or dividers to visually group or separate elements."
+        "description": "Use for secondary text, icons and borders."
       },
       "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(255 255 255 / 12%)"
+        "#787878"
       ]
     },
     {
-      "css": "--v-color-ornament-scrim",
+      "css": "--v-color-foreground-inverted",
       "type": "color",
-      "property": "ornament",
-      "variant": "scrim",
+      "property": "foreground",
+      "variant": "inverted",
       "meta": {
-        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
+        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
       },
       "value": [
-        "rgb(0 0 0 / 64%)"
+        "#000000",
+        "#ffffff"
       ]
     },
     {
-      "css": "--v-color-state-accent-blue-medium",
+      "css": "--v-color-foreground-accent-blue",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
+      "property": "foreground",
       "variant": "blue",
       "category": "accent",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "The inverse of the primary foreground color. For use on filled surfaces."
       },
       "value": [
-        "rgb(28 110 186 / 12%)",
-        "rgb(31 120 209 / 16%)"
+        "#3354ff",
+        "#0b2ded"
       ]
     },
     {
-      "css": "--v-color-state-accent-blue-strong",
+      "css": "--v-color-foreground-feedback-green",
       "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "blue",
-      "category": "accent",
+      "property": "foreground",
+      "variant": "green",
+      "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "For emphasized selection borders and graphic accents (icons, illustrations)."
       },
       "value": [
-        "rgb(28 110 186 / 20%)",
-        "rgb(31 120 209 / 24%)"
+        "#07ca31",
+        "#04771d"
       ]
     },
     {
-      "css": "--v-color-state-accent-blue-subtle",
+      "css": "--v-color-foreground-feedback-red",
       "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "blue",
-      "category": "accent",
+      "property": "foreground",
+      "variant": "red",
+      "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "Use as a foreground or border color to highlight successful states and positive actions."
       },
       "value": [
-        "rgb(28 110 186 / 4%)",
-        "rgb(31 120 209 / 8%)"
+        "#ef6658",
+        "#cd2314"
       ]
     },
     {
-      "css": "--v-color-state-always-black-medium",
+      "css": "--v-color-foreground-feedback-orange",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "black",
-      "category": "always",
+      "property": "foreground",
+      "variant": "orange",
+      "category": "feedback",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
       },
       "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(0 0 0 / 16%)"
+        "#ff9933",
+        "#ce6700"
       ]
     },
     {
-      "css": "--v-color-state-always-black-strong",
+      "css": "--v-color-surface-neutral",
       "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "black",
-      "category": "always",
+      "property": "surface",
+      "variant": "neutral",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
       },
       "value": [
-        "rgb(0 0 0 / 20%)",
-        "rgb(0 0 0 / 24%)"
+        "#ffffff",
+        "#000000"
       ]
     },
     {
-      "css": "--v-color-state-always-black-subtle",
+      "css": "--v-color-surface-gray",
       "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "black",
-      "category": "always",
+      "property": "surface",
+      "variant": "gray",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
       },
       "value": [
-        "rgb(0 0 0 / 4%)",
-        "rgb(0 0 0 / 8%)"
+        "#3b3b3b",
+        "#e3e3e3"
       ]
     },
     {
-      "css": "--v-color-state-always-white-medium",
+      "css": "--v-color-surface-accent-blue",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "white",
-      "category": "always",
+      "property": "surface",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "description": "Use for state layers with an always/white foreground color."
+        "description": "Used as surface fill."
       },
       "value": [
-        "rgb(255 255 255 / 12%)",
-        "rgb(255 255 255 / 16%)"
+        "#3354ff",
+        "#0b2ded"
       ]
     },
     {
-      "css": "--v-color-state-always-white-strong",
+      "css": "--v-color-surface-accent-safety",
       "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "white",
-      "category": "always",
+      "property": "surface",
+      "variant": "safety",
+      "category": "accent",
       "meta": {
-        "description": "Use for state layers with an always/white foreground color."
+        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
       },
       "value": [
-        "rgb(255 255 255 / 20%)",
-        "rgb(255 255 255 / 24%)"
+        "#fc6408"
       ]
     },
     {
-      "css": "--v-color-state-always-white-subtle",
+      "css": "--v-color-surface-feedback-green",
       "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "white",
-      "category": "always",
+      "property": "surface",
+      "variant": "green",
+      "category": "feedback",
       "meta": {
-        "description": "Use for state layers with an always/white foreground color."
+        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
       },
       "value": [
-        "rgb(255 255 255 / 4%)",
-        "rgb(255 255 255 / 8%)"
+        "#048220"
       ]
     },
     {
-      "css": "--v-color-state-feedback-red-medium",
+      "css": "--v-color-surface-feedback-orange",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "red",
+      "property": "surface",
+      "variant": "orange",
       "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
+        "description": "Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color."
       },
       "value": [
-        "rgb(214 36 21 / 12%)",
-        "rgb(239 102 88 / 16%)"
+        "#ce6700"
       ]
     },
     {
-      "css": "--v-color-state-feedback-red-strong",
+      "css": "--v-color-surface-feedback-red",
       "type": "color",
-      "property": "state",
-      "scale": "strong",
+      "property": "surface",
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
+        "description": "[Deprecated]"
       },
       "value": [
-        "rgb(214 36 21 / 20%)",
-        "rgb(239 102 88 / 24%)"
+        "#e52715"
       ]
     },
     {
-      "css": "--v-color-state-feedback-red-subtle",
+      "css": "--v-color-background-primary",
       "type": "color",
-      "property": "state",
-      "scale": "subtle",
+      "property": "background",
+      "variant": "primary",
+      "meta": {
+        "description": "Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color."
+      },
+      "value": [
+        "#000000",
+        "#ffffff"
+      ]
+    },
+    {
+      "css": "--v-color-background-secondary",
+      "type": "color",
+      "property": "background",
+      "variant": "secondary",
+      "meta": {
+        "description": "Use as a primary background color."
+      },
+      "value": [
+        "#171717",
+        "#fafafa"
+      ]
+    },
+    {
+      "css": "--v-color-background-feedback-gray",
+      "type": "color",
+      "property": "background",
+      "variant": "gray",
+      "category": "feedback",
+      "meta": {
+        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
+      },
+      "value": [
+        "#242424",
+        "#f0f0f0"
+      ]
+    },
+    {
+      "css": "--v-color-background-feedback-green",
+      "type": "color",
+      "property": "background",
+      "variant": "green",
+      "category": "feedback",
+      "meta": {
+        "description": "Use as a secondary background color for elevated sections."
+      },
+      "value": [
+        "#02310c",
+        "#d7f9df"
+      ]
+    },
+    {
+      "css": "--v-color-background-feedback-red",
+      "type": "color",
+      "property": "background",
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
+        "description": "Use as a background color to highlight successful and positive states."
       },
       "value": [
-        "rgb(214 36 21 / 4%)",
-        "rgb(239 102 88 / 8%)"
+        "#4a0d07",
+        "#fce5e3"
       ]
     },
     {
-      "css": "--v-color-state-inverted-medium",
+      "css": "--v-color-background-feedback-orange",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "inverted",
+      "property": "background",
+      "variant": "orange",
+      "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/inverted."
+        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
       },
       "value": [
-        "rgb(255 255 255 / 12%)",
-        "rgb(0 0 0 / 16%)"
+        "#522900",
+        "#ffe8d1"
       ]
     },
     {
-      "css": "--v-color-state-inverted-strong",
+      "css": "--v-color-always-white",
       "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "inverted",
+      "variant": "white",
+      "category": "always",
       "meta": {
-        "description": "Use for state layers with foreground/inverted."
+        "description": "Use as a background color to indicate informational messages."
       },
       "value": [
-        "rgb(255 255 255 / 20%)",
-        "rgb(0 0 0 / 24%)"
+        "#ffffff"
       ]
     },
     {
-      "css": "--v-color-state-inverted-subtle",
+      "css": "--v-color-always-black",
       "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "inverted",
+      "variant": "black",
+      "category": "always",
       "meta": {
-        "description": "Use for state layers with foreground/inverted."
+        "description": "Always white regardless of color mode."
       },
       "value": [
-        "rgb(255 255 255 / 4%)",
-        "rgb(0 0 0 / 8%)"
+        "#000000"
       ]
     },
     {
-      "css": "--v-color-state-primary-medium",
+      "css": "--v-color-ornament-primary",
       "type": "color",
-      "property": "state",
-      "scale": "medium",
+      "property": "ornament",
       "variant": "primary",
       "meta": {
-        "description": "Use for state layers with foreground/primary."
+        "description": "Always black regardless of colour mode."
+      },
+      "value": [
+        "rgb(100% 100% 100% / 0.16)",
+        "rgb(0% 0% 0% / 0.12)"
+      ]
+    },
+    {
+      "css": "--v-color-ornament-scrim",
+      "type": "color",
+      "property": "ornament",
+      "variant": "scrim",
+      "meta": {
+        "description": "Use for strokes or dividers to visually group or separate elements."
       },
       "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(255 255 255 / 16%)"
+        "rgb(9.0196% 9.0196% 9.0196% / 0.64)"
       ]
     },
     {
@@ -11212,12 +11090,26 @@
       "property": "state",
       "scale": "strong",
       "variant": "primary",
+      "meta": {
+        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
+      },
+      "value": [
+        "rgb(100% 100% 100% / 0.24)",
+        "rgb(0% 0% 0% / 0.2)"
+      ]
+    },
+    {
+      "css": "--v-color-state-primary-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "primary",
       "meta": {
         "description": "Use for state layers with foreground/primary."
       },
       "value": [
-        "rgb(0 0 0 / 20%)",
-        "rgb(255 255 255 / 24%)"
+        "rgb(100% 100% 100% / 0.16)",
+        "rgb(0% 0% 0% / 0.12)"
       ]
     },
     {
@@ -11230,343 +11122,561 @@
         "description": "Use for state layers with foreground/primary."
       },
       "value": [
-        "rgb(0 0 0 / 4%)",
-        "rgb(255 255 255 / 8%)"
+        "rgb(100% 100% 100% / 0.08)",
+        "rgb(0% 0% 0% / 0.04)"
       ]
     },
     {
-      "css": "--v-color-surface-accent-blue",
+      "css": "--v-color-state-inverted-strong",
       "type": "color",
-      "property": "surface",
+      "property": "state",
+      "scale": "strong",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/primary."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.24)",
+        "rgb(100% 100% 100% / 0.2)"
+      ]
+    },
+    {
+      "css": "--v-color-state-inverted-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/inverted."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.16)",
+        "rgb(100% 100% 100% / 0.12)"
+      ]
+    },
+    {
+      "css": "--v-color-state-inverted-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/inverted."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.08)",
+        "rgb(100% 100% 100% / 0.04)"
+      ]
+    },
+    {
+      "css": "--v-color-state-accent-blue-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
       "variant": "blue",
       "category": "accent",
       "meta": {
-        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
+        "description": "Use for state layers with foreground/inverted."
       },
       "value": [
-        "#1c6eba",
-        "#1f78d1"
+        "rgb(20% 32.941% 100% / 0.24)",
+        "rgb(4.3137% 17.647% 92.941% / 0.2)"
       ]
     },
     {
-      "css": "--v-color-surface-feedback-green",
+      "css": "--v-color-state-accent-blue-medium",
       "type": "color",
-      "property": "surface",
-      "variant": "green",
-      "category": "feedback",
+      "property": "state",
+      "scale": "medium",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color."
+        "description": "Use for state layers with foreground/accent/blue."
       },
       "value": [
-        "#04771d",
-        "#048220"
+        "rgb(20% 32.941% 100% / 0.16)",
+        "rgb(4.3137% 17.647% 92.941% / 0.12)"
       ]
     },
     {
-      "css": "--v-color-surface-feedback-orange",
+      "css": "--v-color-state-accent-blue-subtle",
       "type": "color",
-      "property": "surface",
-      "variant": "orange",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "blue",
+      "category": "accent",
+      "meta": {
+        "description": "Use for state layers with foreground/accent/blue."
+      },
+      "value": [
+        "rgb(20% 32.941% 100% / 0.08)",
+        "rgb(4.3137% 17.647% 92.941% / 0.04)"
+      ]
+    },
+    {
+      "css": "--v-color-state-feedback-red-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "[Deprecated]",
-        "deprecated": "The color will be removed in a future version."
+        "description": "Use for state layers with foreground/accent/blue."
       },
       "value": [
-        "#ce6700"
+        "rgb(89.804% 15.294% 8.2353% / 0.24)",
+        "rgb(89.804% 15.294% 8.2353% / 0.2)"
       ]
     },
     {
-      "css": "--v-color-surface-feedback-red",
+      "css": "--v-color-state-feedback-red-medium",
       "type": "color",
-      "property": "surface",
+      "property": "state",
+      "scale": "medium",
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color."
+        "description": "Use for state layers with foreground/feedback/red."
       },
       "value": [
-        "#cd2314",
-        "#e52715"
+        "rgb(89.804% 15.294% 8.2353% / 0.16)",
+        "rgb(89.804% 15.294% 8.2353% / 0.12)"
       ]
     },
     {
-      "css": "--v-color-surface-neutral",
+      "css": "--v-color-state-feedback-red-subtle",
       "type": "color",
-      "property": "surface",
-      "variant": "neutral",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "red",
+      "category": "feedback",
       "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
+        "description": "Use for state layers with foreground/feedback/red."
       },
       "value": [
-        "#1f1f1f",
-        "#ffffff"
+        "rgb(89.804% 15.294% 8.2353% / 0.08)",
+        "rgb(89.804% 15.294% 8.2353% / 0.04)"
       ]
     },
     {
-      "css": "--v-font-sans-family",
-      "type": "font",
-      "property": "family",
-      "variant": "sans",
-      "meta": {},
-      "value": "'Volvo Novum', 'Helvetica Neue', 'Helvetica', 'Noto Sans', 'Segoe UI',\n    'Arial', sans-serif"
-    },
-    {
-      "css": "--v-font-broad-family",
-      "type": "font",
-      "property": "family",
-      "variant": "broad",
-      "meta": {},
-      "value": "'Volvo Broad', 'Arial Black', sans-serif"
+      "css": "--v-color-state-always-black-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "black",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with foreground/feedback/red."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.24)",
+        "rgb(0% 0% 0% / 0.2)"
+      ]
     },
     {
-      "css": "--v-font-mono-family",
-      "type": "font",
-      "property": "family",
-      "variant": "mono",
-      "meta": {},
-      "value": "monospace"
+      "css": "--v-color-state-always-black-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "black",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/black foreground color."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.16)",
+        "rgb(0% 0% 0% / 0.12)"
+      ]
     },
     {
-      "css": "--v-font-regular-weight",
-      "type": "font",
-      "property": "weight",
-      "variant": "regular",
-      "meta": {},
-      "value": "300"
+      "css": "--v-color-state-always-black-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "black",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/black foreground color."
+      },
+      "value": [
+        "rgb(0% 0% 0% / 0.08)",
+        "rgb(0% 0% 0% / 0.04)"
+      ]
     },
     {
-      "css": "--v-font-emphasis-weight",
-      "type": "font",
-      "property": "weight",
-      "variant": "emphasis",
-      "meta": {},
-      "value": "500"
+      "css": "--v-color-state-always-white-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/black foreground color."
+      },
+      "value": [
+        "rgb(100% 100% 100% / 0.24)",
+        "rgb(100% 100% 100% / 0.2)"
+      ]
     },
     {
-      "css": "--v-font-24-size",
-      "type": "font",
-      "property": "size",
-      "variant": "24",
-      "meta": {},
-      "value": "1.5rem"
+      "css": "--v-color-state-always-white-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/white foreground color."
+      },
+      "value": [
+        "rgb(100% 100% 100% / 0.16)",
+        "rgb(100% 100% 100% / 0.12)"
+      ]
     },
     {
-      "css": "--v-font-24-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "24",
-      "meta": {},
-      "value": "1.334"
+      "css": "--v-color-state-always-white-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/white foreground color."
+      },
+      "value": [
+        "rgb(100% 100% 100% / 0.08)",
+        "rgb(100% 100% 100% / 0.04)"
+      ]
     },
     {
-      "css": "--v-font-24",
-      "type": "font",
-      "variant": "24",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-24-size) /\n    var(--v-font-24-lineheight) var(--v-font-sans-family)"
+      "css": "--v-space-2",
+      "type": "space",
+      "variant": "2",
+      "meta": {
+        "description": "Fixed 2px spacing"
+      },
+      "value": "0.125rem"
     },
     {
-      "css": "--v-font-20-size",
-      "type": "font",
-      "property": "size",
-      "variant": "20",
-      "meta": {},
-      "value": "1.25rem"
+      "css": "--v-space-4",
+      "type": "space",
+      "variant": "4",
+      "meta": {
+        "description": "Fixed 4px spacing"
+      },
+      "value": "0.25rem"
     },
     {
-      "css": "--v-font-20-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "20",
-      "meta": {},
-      "value": "1.4"
+      "css": "--v-space-8",
+      "type": "space",
+      "variant": "8",
+      "meta": {
+        "description": "Fixed 8px spacing"
+      },
+      "value": "0.5rem"
     },
     {
-      "css": "--v-font-20",
-      "type": "font",
-      "variant": "20",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-20-size) /\n    var(--v-font-20-lineheight) var(--v-font-sans-family)"
+      "css": "--v-space-12",
+      "type": "space",
+      "variant": "12",
+      "meta": {
+        "description": "Fixed 12px spacing"
+      },
+      "value": "0.75rem"
     },
     {
-      "css": "--v-font-16-size",
-      "type": "font",
-      "property": "size",
+      "css": "--v-space-16",
+      "type": "space",
       "variant": "16",
-      "meta": {},
+      "meta": {
+        "description": "Fixed 16px spacing"
+      },
       "value": "1rem"
     },
     {
-      "css": "--v-font-16-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "16",
-      "meta": {},
-      "value": "1.5"
-    },
-    {
-      "css": "--v-font-16",
-      "type": "font",
-      "variant": "16",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-16-size) /\n    var(--v-font-16-lineheight) var(--v-font-sans-family)"
+      "css": "--v-space-24",
+      "type": "space",
+      "variant": "24",
+      "meta": {
+        "description": "Fixed 24px spacing"
+      },
+      "value": "1.5rem"
     },
     {
-      "css": "--v-font-14-size",
-      "type": "font",
-      "property": "size",
-      "variant": "14",
-      "meta": {},
-      "value": "0.875rem"
+      "css": "--v-space-32",
+      "type": "space",
+      "variant": "32",
+      "meta": {
+        "description": "Fixed 32px spacing"
+      },
+      "value": "2rem"
     },
     {
-      "css": "--v-font-14-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "14",
-      "meta": {},
-      "value": "1.57"
+      "css": "--v-space-48",
+      "type": "space",
+      "variant": "48",
+      "meta": {
+        "description": "Fixed 48px spacing"
+      },
+      "value": "3rem"
     },
     {
-      "css": "--v-font-14",
-      "type": "font",
-      "variant": "14",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-14-size) /\n    var(--v-font-14-lineheight) var(--v-font-sans-family)"
+      "css": "--v-space-64",
+      "type": "space",
+      "variant": "64",
+      "meta": {
+        "description": "Fixed 64px spacing"
+      },
+      "value": "4rem"
     },
     {
-      "css": "--v-font-12-size",
-      "type": "font",
-      "property": "size",
-      "variant": "12",
-      "meta": {},
-      "value": "0.75rem"
+      "css": "--v-space-gridded-element-gap",
+      "type": "space",
+      "variant": "gridded-element-gap",
+      "meta": {
+        "reference": true,
+        "property": "gap",
+        "description": "Divider between gridded elements. Do not use for text."
+      },
+      "value": "var(--v-space-2)"
     },
     {
-      "css": "--v-font-12-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "12",
-      "meta": {},
-      "value": "1.67"
+      "css": "--v-space-pagemargin",
+      "type": "space",
+      "variant": "pagemargin",
+      "meta": {
+        "direction": "horizontal",
+        "property": "margin,padding,inset",
+        "description": "The fluid outer horizontal margins of the main page container.\n402  - 16px\n1600  - 64px"
+      },
+      "value": "round(clamp(1rem, 4.286vw + -0.286rem, 4rem), 2px)"
     },
     {
-      "css": "--v-font-12",
-      "type": "font",
-      "variant": "12",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-12-size) /\n    var(--v-font-12-lineheight) var(--v-font-sans-family)"
+      "css": "--v-space-xs",
+      "type": "space",
+      "variant": "xs",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 8px-20px."
+      },
+      "value": "round(clamp(0.5rem, 1.071vw + 0.179rem, 1.25rem), 2px)"
     },
     {
-      "css": "--v-font-heading-1-weight",
-      "type": "font",
-      "property": "weight",
-      "variant": "1",
-      "category": "heading",
-      "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "css": "--v-space-sm",
+      "type": "space",
+      "variant": "sm",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 16px-32px."
+      },
+      "value": "round(clamp(1rem, 1.429vw + 0.571rem, 2rem), 2px)"
     },
     {
-      "css": "--v-font-heading-1-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "1",
-      "category": "heading",
-      "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "css": "--v-space-md",
+      "type": "space",
+      "variant": "md",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 24px-48px."
+      },
+      "value": "round(clamp(1.5rem, 2.143vw + 0.857rem, 3rem), 2px)"
     },
     {
-      "css": "--v-font-heading-1-size-min",
+      "css": "--v-space-lg",
+      "type": "space",
+      "variant": "lg",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 32px-56px."
+      },
+      "value": "round(clamp(2rem, 2.143vw + 1.357rem, 3.5rem), 2px)"
+    },
+    {
+      "css": "--v-space-xl",
+      "type": "space",
+      "variant": "xl",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 48px-72px."
+      },
+      "value": "round(clamp(3rem, 2.143vw + 2.357rem, 4.5rem), 2px)"
+    },
+    {
+      "css": "--v-space-2xl",
+      "type": "space",
+      "variant": "2xl",
+      "meta": {
+        "direction": "vertical",
+        "description": "Fluid spacing between 64px-128px."
+      },
+      "value": "round(clamp(4rem, 5.714vw + 2.286rem, 8rem), 2px)"
+    },
+    {
+      "css": "--v-space-gutter",
+      "type": "space",
+      "variant": "gutter",
+      "meta": {
+        "direction": "horizontal",
+        "property": "gap",
+        "description": "The horizontal gap between grid columns. Fluid between 16px-32px."
+      },
+      "value": "round(clamp(1rem, 1.429vw + 0.571rem, 2rem), 2px)"
+    },
+    {
+      "css": "--v-border-width-default",
+      "type": "border",
+      "variant": "width-default",
+      "meta": {
+        "description": "Use for any UI element that needs a border in the default state."
+      },
+      "value": "1px"
+    },
+    {
+      "css": "--v-border-width-selected",
+      "type": "border",
+      "variant": "width-selected",
+      "meta": {
+        "description": "Use for any UI element that needs a border in the selected state."
+      },
+      "value": "2px"
+    },
+    {
+      "css": "--v-size-overlay-narrow",
+      "type": "size",
+      "variant": "narrow",
+      "category": "overlay",
+      "meta": {
+        "description": "Used to set the width of small overlays such as small dialogs, toasts"
+      },
+      "value": "45ch"
+    },
+    {
+      "css": "--v-size-overlay-wide",
+      "type": "size",
+      "variant": "wide",
+      "category": "overlay",
+      "meta": {
+        "description": "Used to set the width of large overlays such as sheet, large dialogs"
+      },
+      "value": "60ch"
+    },
+    {
+      "css": "--v-size-sidebar-narrow",
+      "type": "size",
+      "variant": "narrow",
+      "category": "sidebar",
+      "meta": {
+        "description": "Narrow sidebar width is 240 to 304 between lg and xl"
+      },
+      "value": "round(clamp(15rem, 11.111vw + 7.889rem, 19rem), 2px)"
+    },
+    {
+      "css": "--v-size-sidebar-wide",
+      "type": "size",
+      "variant": "wide",
+      "category": "sidebar",
+      "meta": {
+        "description": "Wide sidebar width is 368 to 464 between lg and xl"
+      },
+      "value": "round(clamp(23rem, 16.667vw + 12.333rem, 29rem), 2px)"
+    },
+    {
+      "css": "--v-shape-default",
+      "type": "shape",
+      "variant": "default",
+      "meta": {
+        "description": "Use as default value for all all non-interactive UI elements."
+      },
+      "value": "0px"
+    },
+    {
+      "css": "--v-shape-emphasis",
+      "type": "shape",
+      "variant": "emphasis",
+      "meta": {
+        "description": "Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page."
+      },
+      "value": "9999px"
+    },
+    {
+      "css": "--v-font-12-size",
       "type": "font",
-      "modifier": "min",
       "property": "size",
-      "variant": "1",
-      "category": "heading",
+      "variant": "12",
       "meta": {},
-      "value": "2rem"
+      "value": "0.75rem"
     },
     {
-      "css": "--v-font-heading-1-size-max",
+      "css": "--v-font-12-lineheight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
-      "variant": "1",
-      "category": "heading",
+      "property": "lineheight",
+      "variant": "12",
       "meta": {},
-      "value": "2.5rem"
+      "value": "1.667"
     },
     {
-      "css": "--v-font-heading-1-size",
+      "css": "--v-font-14-size",
       "type": "font",
       "property": "size",
-      "variant": "1",
-      "category": "heading",
+      "variant": "14",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-heading-1-size-min),\n    1vw +\n    1.7rem,\n    var(--v-font-heading-1-size-max)\n  )"
+      "value": "0.875rem"
     },
     {
-      "css": "--v-font-heading-1",
+      "css": "--v-font-14-lineheight",
       "type": "font",
-      "variant": "1",
-      "category": "heading",
+      "property": "lineheight",
+      "variant": "14",
       "meta": {},
-      "value": "var(--v-font-heading-1-weight) var(--v-font-heading-1-size) /\n    var(--v-font-heading-1-lineheight) var(--v-font-sans-family)"
+      "value": "1.572"
     },
     {
-      "css": "--v-font-heading-2-weight",
+      "css": "--v-font-16-size",
       "type": "font",
-      "property": "weight",
-      "variant": "2",
-      "category": "heading",
+      "property": "size",
+      "variant": "16",
       "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "value": "1rem"
     },
     {
-      "css": "--v-font-heading-2-lineheight",
+      "css": "--v-font-16-lineheight",
       "type": "font",
       "property": "lineheight",
-      "variant": "2",
-      "category": "heading",
+      "variant": "16",
       "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "value": "1.5"
     },
     {
-      "css": "--v-font-heading-2-size-min",
+      "css": "--v-font-20-size",
       "type": "font",
-      "modifier": "min",
       "property": "size",
-      "variant": "2",
-      "category": "heading",
+      "variant": "20",
       "meta": {},
-      "value": "1.5rem"
+      "value": "1.25rem"
     },
     {
-      "css": "--v-font-heading-2-size-max",
+      "css": "--v-font-20-lineheight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
-      "variant": "2",
-      "category": "heading",
+      "property": "lineheight",
+      "variant": "20",
       "meta": {},
-      "value": "2rem"
+      "value": "1.4"
     },
     {
-      "css": "--v-font-heading-2-size",
+      "css": "--v-font-24-size",
       "type": "font",
       "property": "size",
-      "variant": "2",
-      "category": "heading",
+      "variant": "24",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-heading-2-size-min),\n    1vw +\n    1.2rem,\n    var(--v-font-heading-2-size-max)\n  )"
+      "value": "1.5rem"
     },
     {
-      "css": "--v-font-heading-2",
+      "css": "--v-font-24-lineheight",
       "type": "font",
-      "variant": "2",
-      "category": "heading",
+      "property": "lineheight",
+      "variant": "24",
       "meta": {},
-      "value": "var(--v-font-heading-2-weight) var(--v-font-heading-2-size) /\n    var(--v-font-heading-2-lineheight) var(--v-font-sans-family)"
+      "value": "1.334"
     },
     {
       "css": "--v-font-heading-3-weight",
@@ -11575,7 +11685,16 @@
       "variant": "3",
       "category": "heading",
       "meta": {},
-      "value": "var(--v-font-regular-weight)"
+      "value": "400"
+    },
+    {
+      "css": "--v-font-heading-3-size",
+      "type": "font",
+      "property": "size",
+      "variant": "3",
+      "category": "heading",
+      "meta": {},
+      "value": "round(down, clamp(var(--v-font-heading-3-size-min), 1.071vw + 1.179rem, var(--v-font-heading-3-size-max)), 2px)"
     },
     {
       "css": "--v-font-heading-3-lineheight",
@@ -11584,7 +11703,7 @@
       "variant": "3",
       "category": "heading",
       "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "value": "calc(1em + 0.5rem)"
     },
     {
       "css": "--v-font-heading-3-size-min",
@@ -11597,196 +11716,189 @@
       "value": "1.5rem"
     },
     {
-      "css": "--v-font-heading-3-size-max",
+      "css": "--v-font-heading-2-weight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
-      "variant": "3",
+      "property": "weight",
+      "variant": "2",
       "category": "heading",
       "meta": {},
-      "value": "2rem"
+      "value": "400"
     },
     {
-      "css": "--v-font-heading-3-size",
+      "css": "--v-font-heading-2-size",
       "type": "font",
       "property": "size",
-      "variant": "3",
+      "variant": "2",
       "category": "heading",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-heading-3-size-min),\n    1vw +\n    1.2rem,\n    var(--v-font-heading-3-size-max)\n  )"
+      "value": "round(down, clamp(var(--v-font-heading-2-size-min), 1.071vw + 1.179rem, var(--v-font-heading-2-size-max)), 2px)"
     },
     {
-      "css": "--v-font-heading-3",
+      "css": "--v-font-heading-2-size-min",
       "type": "font",
-      "variant": "3",
+      "modifier": "min",
+      "property": "size",
+      "variant": "2",
       "category": "heading",
       "meta": {},
-      "value": "var(--v-font-heading-3-weight) var(--v-font-heading-3-size) /\n    var(--v-font-heading-3-lineheight) var(--v-font-sans-family)"
+      "value": "1.5rem"
     },
     {
-      "css": "--v-font-statement-1-weight",
+      "css": "--v-font-heading-2-lineheight",
       "type": "font",
-      "property": "weight",
-      "variant": "1",
-      "category": "statement",
+      "property": "lineheight",
+      "variant": "2",
+      "category": "heading",
       "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "value": "calc(1em + 0.5rem)"
     },
     {
-      "css": "--v-font-statement-1-lineheight",
+      "css": "--v-font-heading-1-weight",
       "type": "font",
-      "property": "lineheight",
+      "property": "weight",
       "variant": "1",
-      "category": "statement",
+      "category": "heading",
       "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-1-size-min",
+      "css": "--v-font-heading-1-size",
       "type": "font",
-      "modifier": "min",
       "property": "size",
       "variant": "1",
-      "category": "statement",
+      "category": "heading",
       "meta": {},
-      "value": "4rem"
+      "value": "round(down, clamp(var(--v-font-heading-1-size-min), 2.143vw + 1.357rem, var(--v-font-heading-1-size-max)), 2px)"
     },
     {
-      "css": "--v-font-statement-1-size-max",
+      "css": "--v-font-heading-1-lineheight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
+      "property": "lineheight",
       "variant": "1",
-      "category": "statement",
+      "category": "heading",
       "meta": {},
-      "value": "6rem"
+      "value": "calc(1em + 0.5rem)"
     },
     {
-      "css": "--v-font-statement-1-size",
+      "css": "--v-font-heading-1-size-min",
       "type": "font",
+      "modifier": "min",
       "property": "size",
       "variant": "1",
-      "category": "statement",
-      "meta": {},
-      "value": "clamp(\n    var(--v-font-statement-1-size-min),\n    4vw +\n    2.8rem,\n    var(--v-font-statement-1-size-max)\n  )"
-    },
-    {
-      "css": "--v-font-statement-1",
-      "type": "font",
-      "variant": "1",
-      "category": "statement",
+      "category": "heading",
       "meta": {},
-      "value": "var(--v-font-statement-1-weight) var(--v-font-statement-1-size) /\n    var(--v-font-statement-1-lineheight) var(--v-font-sans-family)"
+      "value": "2rem"
     },
     {
-      "css": "--v-font-statement-2-weight",
+      "css": "--v-font-statement-3-weight",
       "type": "font",
       "property": "weight",
-      "variant": "2",
+      "variant": "3",
       "category": "statement",
       "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-2-lineheight",
+      "css": "--v-font-statement-3-size",
       "type": "font",
-      "property": "lineheight",
-      "variant": "2",
+      "property": "size",
+      "variant": "3",
       "category": "statement",
       "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "value": "round(down, clamp(var(--v-font-statement-3-size-min), 2.143vw + 2.357rem, var(--v-font-statement-3-size-max)), 2px)"
     },
     {
-      "css": "--v-font-statement-2-size-min",
+      "css": "--v-font-statement-3-size-min",
       "type": "font",
       "modifier": "min",
       "property": "size",
-      "variant": "2",
+      "variant": "3",
       "category": "statement",
       "meta": {},
-      "value": "3.5rem"
+      "value": "3rem"
     },
     {
-      "css": "--v-font-statement-2-size-max",
+      "css": "--v-font-statement-3-lineheight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
-      "variant": "2",
+      "property": "lineheight",
+      "variant": "3",
       "category": "statement",
       "meta": {},
-      "value": "4.5rem"
+      "value": "calc(1em + 0.5rem)"
     },
     {
-      "css": "--v-font-statement-2-size",
+      "css": "--v-font-statement-2-weight",
       "type": "font",
-      "property": "size",
+      "property": "weight",
       "variant": "2",
       "category": "statement",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-statement-2-size-min),\n    2vw +\n    2.9rem,\n    var(--v-font-statement-2-size-max)\n  )"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-2",
+      "css": "--v-font-statement-2-size",
       "type": "font",
+      "property": "size",
       "variant": "2",
       "category": "statement",
       "meta": {},
-      "value": "var(--v-font-statement-2-weight) var(--v-font-statement-2-size) /\n    var(--v-font-statement-2-lineheight) var(--v-font-sans-family)"
+      "value": "round(down, clamp(var(--v-font-statement-2-size-min), 5vw + 2rem, var(--v-font-statement-2-size-max)), 2px)"
     },
     {
-      "css": "--v-font-statement-3-weight",
+      "css": "--v-font-statement-2-size-min",
       "type": "font",
-      "property": "weight",
-      "variant": "3",
+      "modifier": "min",
+      "property": "size",
+      "variant": "2",
       "category": "statement",
       "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "value": "3.5rem"
     },
     {
-      "css": "--v-font-statement-3-lineheight",
+      "css": "--v-font-statement-2-lineheight",
       "type": "font",
       "property": "lineheight",
-      "variant": "3",
+      "variant": "2",
       "category": "statement",
       "meta": {},
-      "value": "var(--_heading-lineheight)"
+      "value": "calc(1em + 0.5rem)"
     },
     {
-      "css": "--v-font-statement-3-size-min",
+      "css": "--v-font-statement-1-weight",
       "type": "font",
-      "modifier": "min",
-      "property": "size",
-      "variant": "3",
+      "property": "weight",
+      "variant": "1",
       "category": "statement",
       "meta": {},
-      "value": "3rem"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-3-size-max",
+      "css": "--v-font-statement-1-size",
       "type": "font",
-      "modifier": "max",
       "property": "size",
-      "variant": "3",
+      "variant": "1",
       "category": "statement",
       "meta": {},
-      "value": "3.5rem"
+      "value": "round(down, clamp(var(--v-font-statement-1-size-min), 6.786vw + 2.464rem, var(--v-font-statement-1-size-max)), 2px)"
     },
     {
-      "css": "--v-font-statement-3-size",
+      "css": "--v-font-statement-1-size-min",
       "type": "font",
+      "modifier": "min",
       "property": "size",
-      "variant": "3",
+      "variant": "1",
       "category": "statement",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-statement-3-size-min),\n    1vw +\n    2.7rem,\n    var(--v-font-statement-3-size-max)\n  )"
+      "value": "4.5rem"
     },
     {
-      "css": "--v-font-statement-3",
+      "css": "--v-font-statement-1-lineheight",
       "type": "font",
-      "variant": "3",
+      "property": "lineheight",
+      "variant": "1",
       "category": "statement",
       "meta": {},
-      "value": "var(--v-font-statement-3-weight) var(--v-font-statement-3-size) /\n    var(--v-font-statement-3-lineheight) var(--v-font-sans-family)"
+      "value": "calc(1em + 0.5rem)"
     },
     {
       "css": "--v-font-statement-signature-weight",
@@ -11795,16 +11907,16 @@
       "variant": "signature",
       "category": "statement",
       "meta": {},
-      "value": "var(--v-font-emphasis-weight)"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-signature-lineheight",
+      "css": "--v-font-statement-signature-size",
       "type": "font",
-      "property": "lineheight",
+      "property": "size",
       "variant": "signature",
       "category": "statement",
       "meta": {},
-      "value": "1"
+      "value": "round(down, clamp(var(--v-font-statement-signature-size-min), 3.929vw + 1.321rem, var(--v-font-statement-signature-size-max)), 2px)"
     },
     {
       "css": "--v-font-statement-signature-size-min",
@@ -11817,478 +11929,53 @@
       "value": "2.5rem"
     },
     {
-      "css": "--v-font-statement-signature-size-max",
+      "css": "--v-font-statement-signature-lineheight",
       "type": "font",
-      "modifier": "max",
-      "property": "size",
+      "property": "lineheight",
       "variant": "signature",
       "category": "statement",
       "meta": {},
-      "value": "4.5rem"
+      "value": "calc(1em + 0.5rem)"
     },
     {
-      "css": "--v-font-statement-signature-size",
+      "css": "--v-font-regular-weight",
       "type": "font",
-      "property": "size",
-      "variant": "signature",
-      "category": "statement",
+      "property": "weight",
+      "variant": "regular",
       "meta": {},
-      "value": "clamp(\n    var(--v-font-statement-signature-size-min),\n    4vw +\n    1.3rem,\n    var(--v-font-statement-signature-size-max)\n  )"
+      "value": "400"
     },
     {
-      "css": "--v-font-statement-signature",
+      "css": "--v-font-emphasis-weight",
       "type": "font",
-      "variant": "signature",
-      "category": "statement",
-      "meta": {},
-      "value": "var(--v-font-statement-signature-weight)\n    var(--v-font-statement-signature-size) /\n    var(--v-font-statement-signature-lineheight) var(--v-font-broad-family)"
-    },
-    {
-      "css": "--v-space-l",
-      "type": "space",
-      "variant": "l",
-      "meta": {
-        "description": "Fluid spacing between 64px-96px.",
-        "direction": "vertical"
-      },
-      "value": "var(--v-space-xl)"
-    },
-    {
-      "css": "--v-space-m",
-      "type": "space",
-      "variant": "m",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 48px-64px."
-      },
-      "value": "var(--v-space-lg)"
-    },
-    {
-      "css": "--v-space-s",
-      "type": "space",
-      "variant": "s",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 32px-48px."
-      },
-      "value": "var(--v-space-md)"
-    },
-    {
-      "css": "--v-size-grid-column",
-      "type": "size",
-      "category": "grid-column",
-      "meta": {
-        "description": "The width of a single grid column."
-      },
-      "value": "calc(\n    (\n      var(--v-size-grid-maxwidth) -\n      (var(--v-grid-columns) - 1) *\n      var(--v-space-gutter)\n    ) /\n    var(--v-grid-columns)\n  )"
-    },
-    {
-      "css": "--v-size-grid-maxwidth",
-      "type": "size",
-      "category": "grid-maxwidth",
-      "meta": {
-        "description": "The maximum width of the 12 column grid."
-      },
-      "value": "min(81rem, 100vw - var(--_pagemargin-min) * 2)"
-    },
-    {
-      "css": "--v-size-pagemax",
-      "type": "size",
-      "category": "pagemax",
-      "meta": {
-        "description": "The maximum width a page is allowed to grow to."
-      },
-      "value": "min(160rem, 100vw)"
-    },
-    {
-      "css": "--v-size-grid-xs",
-      "type": "size",
-      "variant": "xs",
-      "category": "grid",
-      "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)"
-      },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xs-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xs-cols) - 1)\n  )"
-    },
-    {
-      "css": "--v-size-grid-sm",
-      "type": "size",
-      "variant": "sm",
-      "category": "grid",
-      "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)"
-      },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_sm-cols)) +\n    var(--v-space-gutter) *\n    (var(--_sm-cols) - 1)\n  )"
-    },
-    {
-      "css": "--v-size-grid-md",
-      "type": "size",
-      "category": "grid-md",
-      "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)"
-      },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_md-cols)) +\n    var(--v-space-gutter) *\n    (var(--_md-cols) - 1)\n  )"
-    },
-    {
-      "css": "--v-size-grid-lg",
-      "type": "size",
-      "variant": "lg",
-      "category": "grid",
-      "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12)"
-      },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_lg-cols)) +\n    var(--v-space-gutter) *\n    (var(--_lg-cols) - 1)\n  )"
-    },
-    {
-      "css": "--v-size-grid-xl",
-      "type": "size",
-      "variant": "xl",
-      "category": "grid",
-      "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12)"
-      },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xl-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xl-cols) - 1)\n  )"
-    },
-    {
-      "css": "--v-size-grid-max",
-      "type": "size",
-      "category": "grid-max",
-      "meta": {
-        "description": "Width based on the maximum extent of a `max` container"
-      },
-      "value": "min(\n    (100vw - var(--v-space-pagemargin) * 2) +\n    var(--_outer-margin, 0rem),\n    160rem\n  )"
-    },
-    {
-      "css": "--v-size-contentmax",
-      "type": "size",
-      "category": "contentmax",
-      "meta": {
-        "description": "The maximum width a block of content should be allowed to grow to while maintaining readability\nhttps://baymard.com/blog/line-length-readability"
-      },
-      "value": "70ch"
-    },
-    {
-      "css": "--v-radius-sm",
-      "type": "radius",
-      "variant": "sm",
+      "property": "weight",
+      "variant": "emphasis",
       "meta": {},
-      "value": "0.25rem"
+      "value": "600"
     },
     {
-      "css": "--v-radius-md",
-      "type": "radius",
-      "variant": "md",
+      "css": "--v-font-sans-family",
+      "type": "font",
+      "property": "family",
+      "variant": "sans",
       "meta": {},
-      "value": "0.5rem"
+      "value": "\"Volvo Centum\", \"Helvetica Neue\", \"Helvetica\", \"Noto Sans\", \"Segoe UI\", \"Arial\", sans-serif"
     },
     {
-      "css": "--v-radius-lg",
-      "type": "radius",
-      "variant": "lg",
+      "css": "--v-font-broad-family",
+      "type": "font",
+      "property": "family",
+      "variant": "broad",
       "meta": {},
-      "value": "1rem"
+      "value": "\"Volvo Broad Pro\", \"Volvo Broad\", \"Arial Black\", sans-serif"
     },
     {
-      "css": "--v-radius-full",
-      "type": "radius",
-      "variant": "full",
+      "css": "--v-font-mono-family",
+      "type": "font",
+      "property": "family",
+      "variant": "mono",
       "meta": {},
-      "value": "9999px"
-    },
-    {
-      "css": "--v-index-spinner",
-      "type": "index",
-      "variant": "spinner",
-      "meta": {},
-      "value": "30"
-    },
-    {
-      "css": "--v-index-overlay",
-      "type": "index",
-      "variant": "overlay",
-      "meta": {},
-      "value": "20"
-    },
-    {
-      "css": "--v-index-navigation",
-      "type": "index",
-      "variant": "navigation",
-      "meta": {},
-      "value": "10"
-    },
-    {
-      "css": "--v-index-default",
-      "type": "index",
-      "variant": "default",
-      "meta": {},
-      "value": "0"
-    },
-    {
-      "css": "--v-index-deep",
-      "type": "index",
-      "variant": "deep",
-      "meta": {},
-      "value": "-1"
-    },
-    {
-      "css": "--v-grid-columns",
-      "type": "grid",
-      "variant": "columns",
-      "meta": {
-        "description": "The total number of grid columns at the current breakpoint."
-      },
-      "value": "8"
-    },
-    {
-      "css": "--v-space-pagemargin",
-      "type": "space",
-      "variant": "pagemargin",
-      "meta": {
-        "direction": "horizontal",
-        "property": "margin,padding,inset",
-        "description": "The fluid outer horizontal margins of the main page container.\n402  - 16px\n1600  - 64px"
-      },
-      "value": "clamp(var(--_pagemargin-min), 22vw - 16.3rem, 8rem)"
-    },
-    {
-      "css": "--v-space-gutter",
-      "type": "space",
-      "variant": "gutter",
-      "meta": {
-        "direction": "horizontal",
-        "property": "gap",
-        "description": "The horizontal gap between grid columns. Fluid between 16px-32px."
-      },
-      "value": "clamp(1rem, 2.6vw + 0.3rem, 1.5rem)"
-    },
-    {
-      "css": "--v-shape-default",
-      "type": "shape",
-      "variant": "default",
-      "meta": {
-        "description": "Use as default value for all all non-interactive UI elements."
-      },
-      "value": "var(--v-radius-sm)"
-    },
-    {
-      "css": "--v-shape-emphasis",
-      "type": "shape",
-      "variant": "emphasis",
-      "meta": {
-        "description": "Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page."
-      },
-      "value": "var(--v-radius-sm)"
-    },
-    {
-      "css": "--v-transition-default",
-      "type": "transition",
-      "variant": "default",
-      "meta": {},
-      "value": "var(--_v-transition-speed-default) ease"
-    },
-    {
-      "css": "--v-transition-micro",
-      "type": "transition",
-      "variant": "micro",
-      "meta": {},
-      "value": "var(--_v-transition-speed-fast) ease"
-    },
-    {
-      "css": "--v-transition-notable",
-      "type": "transition",
-      "variant": "notable",
-      "meta": {},
-      "value": "var(--_v-transition-speed-slow) ease"
-    },
-    {
-      "css": "--v-space-2",
-      "type": "space",
-      "variant": "2",
-      "meta": {
-        "description": "Fixed 2px spacing"
-      },
-      "value": "0.125rem"
-    },
-    {
-      "css": "--v-space-4",
-      "type": "space",
-      "variant": "4",
-      "meta": {
-        "description": "Fixed 4px spacing"
-      },
-      "value": "0.25rem"
-    },
-    {
-      "css": "--v-space-8",
-      "type": "space",
-      "variant": "8",
-      "meta": {
-        "description": "Fixed 8px spacing"
-      },
-      "value": "0.5rem"
-    },
-    {
-      "css": "--v-space-12",
-      "type": "space",
-      "variant": "12",
-      "meta": {
-        "description": "Fixed 12px spacing"
-      },
-      "value": "0.75rem"
-    },
-    {
-      "css": "--v-space-16",
-      "type": "space",
-      "variant": "16",
-      "meta": {
-        "description": "Fixed 16px spacing"
-      },
-      "value": "1rem"
-    },
-    {
-      "css": "--v-space-24",
-      "type": "space",
-      "variant": "24",
-      "meta": {
-        "description": "Fixed 24px spacing"
-      },
-      "value": "1.5rem"
-    },
-    {
-      "css": "--v-space-32",
-      "type": "space",
-      "variant": "32",
-      "meta": {
-        "description": "Fixed 32px spacing"
-      },
-      "value": "2rem"
-    },
-    {
-      "css": "--v-space-48",
-      "type": "space",
-      "variant": "48",
-      "meta": {
-        "description": "Fixed 48px spacing"
-      },
-      "value": "3rem"
-    },
-    {
-      "css": "--v-space-64",
-      "type": "space",
-      "variant": "64",
-      "meta": {
-        "description": "Fixed 64px spacing"
-      },
-      "value": "4rem"
-    },
-    {
-      "css": "--v-space-gridded-element-gap",
-      "type": "space",
-      "variant": "gridded-element-gap",
-      "meta": {
-        "reference": true,
-        "property": "gap",
-        "description": "Divider between gridded elements. Do not use for text."
-      },
-      "value": "var(--v-space-2)"
-    },
-    {
-      "css": "--v-space-xs",
-      "type": "space",
-      "variant": "xs",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 8px-20px."
-      },
-      "value": "round(clamp(0.5rem, 1.071vw + 0.179rem, 1.25rem), 2px)"
-    },
-    {
-      "css": "--v-space-sm",
-      "type": "space",
-      "variant": "sm",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 16px-32px."
-      },
-      "value": "round(clamp(1rem, 1.429vw + 0.571rem, 2rem), 2px)"
-    },
-    {
-      "css": "--v-space-md",
-      "type": "space",
-      "variant": "md",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 24px-48px."
-      },
-      "value": "round(clamp(1.5rem, 2.143vw + 0.857rem, 3rem), 2px)"
-    },
-    {
-      "css": "--v-space-lg",
-      "type": "space",
-      "variant": "lg",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 32px-56px."
-      },
-      "value": "round(clamp(2rem, 2.143vw + 1.357rem, 3.5rem), 2px)"
-    },
-    {
-      "css": "--v-space-xl",
-      "type": "space",
-      "variant": "xl",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 48px-72px."
-      },
-      "value": "round(clamp(3rem, 2.143vw + 2.357rem, 4.5rem), 2px)"
-    },
-    {
-      "css": "--v-space-2xl",
-      "type": "space",
-      "variant": "2xl",
-      "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 64px-128px."
-      },
-      "value": "round(clamp(4rem, 5.714vw + 2.286rem, 8rem), 2px)"
-    },
-    {
-      "css": "--v-border-width-default",
-      "type": "border",
-      "variant": "width-default",
-      "meta": {
-        "description": "Use for any UI element that needs a border in the default state."
-      },
-      "value": "1px"
-    },
-    {
-      "css": "--v-border-width-selected",
-      "type": "border",
-      "variant": "width-selected",
-      "meta": {
-        "description": "Use for any UI element that needs a border in the selected state."
-      },
-      "value": "2px"
-    },
-    {
-      "css": "--v-size-sidebar-narrow",
-      "type": "size",
-      "variant": "narrow",
-      "category": "sidebar",
-      "meta": {
-        "description": "Narrow sidebar width is 240 to 304 between lg and xl"
-      },
-      "value": "round(clamp(15rem, 11.111vw + 7.889rem, 19rem), 2px)"
-    },
-    {
-      "css": "--v-size-sidebar-wide",
-      "type": "size",
-      "variant": "wide",
-      "category": "sidebar",
-      "meta": {
-        "description": "Wide sidebar width is 368 to 464 between lg and xl"
-      },
-      "value": "round(clamp(23rem, 16.667vw + 12.333rem, 29rem), 2px)"
+      "value": "monospace"
     }
   ],
   "customMedia": [