@maggioli-design-system/styles 16.0.0 → 17.0.0

package/dist/css/tokens.editor.css

@@ -0,0 +1,1792 @@
+/*
+  GENERATED - do not edit, and do not import: this file is for editors, not for the
+  browser. It is the single source to point an editor at, so that every Magma token
+  appears exactly once in a var() completion, in scale order, with its value.
+
+  One deliberate difference from the real stylesheets: a palette token whose value is
+  a bare rgb triplet is written here as rgb(<triplet>), so that editors can show its
+  actual color. The token itself still holds the triplet, to be read as
+  rgb(var(--label-yellow-03)).
+
+  With CSS Var Complete (phoenisx.cssvar):
+    "cssvar.files": [
+      "node_modules/@maggioli-design-system/styles/dist/css/tokens.editor.css"
+    ],
+    "cssvar.ignore": [],
+    "cssvar.disableSort": true
+
+  Source: projects/styles/scripts/editor-tokens.ts.
+*/
+@media not all {
+  :root {
+    /* scale */
+    --font-title: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-info: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-read: 'Merriweather', Times, 'Times New Roman', serif;
+    --font-code: 'Roboto Mono', 'Courier New', monospace;
+    --text-size-title-h1: 3rem;
+    --text-size-title-h1--font-weight: 900;
+    --text-size-title-h1--letter-spacing: -0.025em;
+    --text-size-title-h1--line-height: 3rem;
+    --text-size-title-h2: 2.25rem;
+    --text-size-title-h2--font-weight: 900;
+    --text-size-title-h2--letter-spacing: -0.025em;
+    --text-size-title-h2--line-height: 2.5rem;
+    --text-size-title-h3: 1.875rem;
+    --text-size-title-h3--font-weight: 900;
+    --text-size-title-h3--letter-spacing: -0.025em;
+    --text-size-title-h3--line-height: 2.25rem;
+    --text-size-title-h4: 1.5rem;
+    --text-size-title-h4--font-weight: 900;
+    --text-size-title-h4--letter-spacing: -0.025em;
+    --text-size-title-h4--line-height: 2rem;
+    --text-size-title-h5: 1.25rem;
+    --text-size-title-h5--font-weight: 900;
+    --text-size-title-h5--letter-spacing: -0.025em;
+    --text-size-title-h5--line-height: 1.75rem;
+    --text-size-title-h6: 1rem;
+    --text-size-title-h6--font-weight: 700;
+    --text-size-title-h6--letter-spacing: -0.025em;
+    --text-size-title-h6--line-height: 1.5rem;
+    --text-size-title-action: 0.875rem;
+    --text-size-title-action--font-weight: 500;
+    --text-size-title-action--line-height: 1.5rem;
+    --text-size-info-paragraph: 1.25rem;
+    --text-size-info-paragraph--font-weight: 400;
+    --text-size-info-paragraph--line-height: 2rem;
+    --text-size-info-detail: 1rem;
+    --text-size-info-detail--font-weight: 400;
+    --text-size-info-detail--line-height: 1.5rem;
+    --text-size-info-caption: 0.875rem;
+    --text-size-info-caption--font-weight: 400;
+    --text-size-info-caption--line-height: 1.25rem;
+    --text-size-info-label: 0.75rem;
+    --text-size-info-label--font-weight: 700;
+    --text-size-info-label--line-height: 1rem;
+    --text-size-info-option: 0.625rem;
+    --text-size-info-option--font-weight: 700;
+    --text-size-info-option--letter-spacing: -0.025em;
+    --text-size-info-option--line-height: 0.625rem;
+    --text-size-info-tip: 0.75rem;
+    --text-size-info-tip--font-weight: 400;
+    --text-size-info-tip--line-height: 1rem;
+    --text-size-read-paragraph: 1.25rem;
+    --text-size-read-paragraph--font-weight: 300;
+    --text-size-read-paragraph--line-height: 2rem;
+    --text-size-read-detail: 1rem;
+    --text-size-read-detail--font-weight: 300;
+    --text-size-read-detail--line-height: 1.5rem;
+    --text-size-read-caption: 0.875rem;
+    --text-size-read-caption--font-weight: 400;
+    --text-size-read-caption--line-height: 1.25rem;
+    --text-size-code-snippet: 1rem;
+    --text-size-code-snippet--font-weight: 400;
+    --text-size-code-snippet--line-height: 1.5rem;
+    --text-size-code-hack: 0.875rem;
+    --text-size-code-hack--font-weight: 400;
+    --text-size-code-hack--line-height: 1.25rem;
+    --leading-2xs: 0.625rem;
+    --leading-xs: 1rem;
+    --leading-sm: 1.25rem;
+    --leading-md: 1.5rem;
+    --leading-lg: 1.75rem;
+    --leading-xl: 2rem;
+    --leading-2xl: 2.25rem;
+    --leading-3xl: 2.5rem;
+    --leading-4xl: 3rem;
+    --spacing: 0.0025rem;
+    --spacing-none: 0px;
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+    --spacing-4xl: 96px;
+    --spacing-phrase: 50ch;
+    --spacing-prose: 65ch;
+    --spacing-text: 75ch;
+    --spacing-title: 30ch;
+    --container-4xs: 128px;
+    --container-3xs: 192px;
+    --container-2xs: 240px;
+    --container-xs: 320px;
+    --container-sm: 384px;
+    --container-md: 448px;
+    --container-lg: 512px;
+    --container-xl: 568px;
+    --container-2xl: 640px;
+    --container-3xl: 768px;
+    --container-4xl: 960px;
+    --container-5xl: 1024px;
+    --container-6xl: 1152px;
+    --container-7xl: 1280px;
+    --breakpoint-mobile: 480px;
+    --breakpoint-tablet: 768px;
+    --breakpoint-desktop: 1024px;
+    --breakpoint-wide: 1280px;
+    --breakpoint-large: 1440px;
+    --breakpoint-xlarge: 1600px;
+    --breakpoint-tv: 1920px;
+    --aspect-cover: 5/3;
+    --aspect-picture: 4/3;
+    --aspect-landscape: 4/2;
+    --aspect-panorama: 4/1;
+    --aspect-square: 1/1;
+    --aspect-a4: 1/1.4;
+    --aspect-book: 1/1.4;
+    --aspect-video: 16/9;
+    --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+    --duration-75: 75ms;
+    --duration-100: 100ms;
+    --duration-150: 150ms;
+    --duration-200: 200ms;
+    --duration-300: 300ms;
+    --duration-500: 500ms;
+    --duration-700: 700ms;
+    --duration-1000: 1000ms;
+    --border-none: 0;
+    --border-xs: 1px;
+    --border-sm: 2px;
+    --border-md: 3px;
+    --border-lg: 4px;
+    --border-xl: 5px;
+    --radius-none: 0px;
+    --radius-3xs: 4px;
+    --radius-2xs: 6px;
+    --radius-xs: 8px;
+    --radius-sm: 10px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+    --radius-2xl: 24px;
+    --radius-3xl: 32px;
+    --radius-4xl: 48px;
+    --radius-5xl: 64px;
+    --radius-full: 1000px;
+    --radius-squircle-3xs: 6px;
+    --radius-squircle-2xs: 10px;
+    --radius-squircle-xs: 14px;
+    --radius-squircle-sm: 16px;
+    --radius-squircle-md: 20px;
+    --radius-squircle-lg: 28px;
+    --radius-squircle-xl: 36px;
+    --radius-squircle-2xl: 40px;
+    --radius-squircle-3xl: 56px;
+    --radius-squircle-4xl: 80px;
+    --radius-squircle-5xl: 112px;
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-xs-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-sm-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    --shadow-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-md-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-lg-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-2xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-inset-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.01);
+    --shadow-inset-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.02);
+    --shadow-inset-lg: inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
+    --shadow-inset-xl: inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
+    --shadow-glow-near-strong: rgb(0 0 0 / 0.2) 0px 12px 28px 0px, rgb(0 0 0 / 0.1) 0px 2px 4px 0px;
+    --shadow-glow-distant-weak: rgb(0 0 0 / 0.2) 0px 60px 40px -7px;
+    --shadow-glow-distant-strong: rgb(0 0 0 / 0.25) 0px 50px 100px -20px, rgb(0 0 0 / 0.3) 0px 30px 60px -30px;
+    --shadow-box-md: rgb(0 0 0 / 0.06) 0px 0px 0px 1px, rgb(0 0 0 / 0.03) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.04) 0px 2px 2px -1px, rgb(0 0 0 / 0.04) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.03) 0px 5px 5px -2.5px, rgb(0 0 0 / 0.03) 0px 10px 10px -5px, rgb(0 0 0 / 0.03) 0px 24px 24px -8px;
+    --shadow-box-lg: rgb(0 0 0 / 0.25) 0px 4px 8px -2px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
+    --shadow-box-xl: rgb(0 0 0 / 0.05) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.1) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.1) 0px 6px 6px -3px, rgb(0 0 0 / 0.1) 0px 12px 12px -6px, rgb(0 0 0 / 0.1) 0px 24px 24px -12px;
+    --shadow-box-solid-weak: rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
+    --shadow-box-solid-strong: rgb(0 0 0 / 0.4) 0px 2px 4px, rgb(0 0 0 / 0.3) 0px 7px 13px -3px, rgb(0 0 0 / 0.35) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
+    --shadow-outline-weak: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-outline-md: 0 0 0 1px rgb(0 0 0 / 0.1);
+    --shadow-outline-glow-weak: rgb(0 0 0 / 0.05) 0px 6px 24px 0px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
+    --shadow-outline-glow-strong: rgb(0 0 0 / 0.16) 0px 10px 36px 0px, rgb(0 0 0 / 0.06) 0px 0px 0px 1px;
+    --shadow-outline-strong: rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px;
+    --shadow-highlight-weak: rgb(0 0 0 / 0.3) 0px 0px 0px 1px;
+    --shadow-highlight-md: rgb(0 0 0 / 0.5) 0px 0px 0px 1px, rgb(0 0 0 / 0.3) 0px 4px 6px -1px;
+    --shadow-highlight-strong: rgb(0 0 0 / 0.4) 0px 0px 0px 2px, rgb(0 0 0 / 0.65) 0px 4px 6px -1px;
+    --shadow-ring: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);
+    --shadow-ring-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);
+    --shadow-ring-weak: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.15);
+    --shadow-ring-weak-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.15);
+    --shadow-ring-strong-2: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);
+    --shadow-ring-strong-4: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);
+
+    /* motion */
+    --transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
+    --transition-property-size: height, margin, padding, width;
+
+    /* palette */
+    --tone-porcelain-01: rgb(4 5 6);
+    --tone-porcelain-02: rgb(35 43 53);
+    --tone-porcelain-03: rgb(61 73 91);
+    --tone-porcelain-04: rgb(83 100 125);
+    --tone-porcelain-05: rgb(99 120 150);
+    --tone-porcelain-06: rgb(153 168 187);
+    --tone-porcelain-07: rgb(179 189 204);
+    --tone-porcelain-08: rgb(201 208 219);
+    --tone-porcelain-09: rgb(221 226 232);
+    --tone-porcelain-10: rgb(235 237 241);
+    --tone-porcelain-seed: rgb(255 255 255);
+    --tone-kaolin-01: rgb(5 5 6);
+    --tone-kaolin-02: rgb(39 42 48);
+    --tone-kaolin-03: rgb(67 72 82);
+    --tone-kaolin-04: rgb(91 99 113);
+    --tone-kaolin-05: rgb(110 119 136);
+    --tone-kaolin-06: rgb(160 166 178);
+    --tone-kaolin-07: rgb(183 188 197);
+    --tone-kaolin-08: rgb(205 208 215);
+    --tone-kaolin-09: rgb(223 225 229);
+    --tone-kaolin-10: rgb(236 237 240);
+    --tone-kaolin-seed: rgb(255 255 255);
+    --tone-neutral-01: rgb(5 5 5);
+    --tone-neutral-02: rgb(42 42 42);
+    --tone-neutral-03: rgb(73 73 73);
+    --tone-neutral-04: rgb(99 99 99);
+    --tone-neutral-05: rgb(119 119 119);
+    --tone-neutral-06: rgb(165 165 165);
+    --tone-neutral-07: rgb(188 188 188);
+    --tone-neutral-08: rgb(208 208 208);
+    --tone-neutral-09: rgb(225 225 225);
+    --tone-neutral-10: rgb(237 237 237);
+    --tone-neutral-seed: rgb(255 255 255);
+    --tone-fireclay-01: rgb(6 5 5);
+    --tone-fireclay-02: rgb(46 41 37);
+    --tone-fireclay-03: rgb(79 71 64);
+    --tone-fireclay-04: rgb(108 97 87);
+    --tone-fireclay-05: rgb(130 117 105);
+    --tone-fireclay-06: rgb(174 165 155);
+    --tone-fireclay-07: rgb(195 187 180);
+    --tone-fireclay-08: rgb(212 207 203);
+    --tone-fireclay-09: rgb(228 225 221);
+    --tone-fireclay-10: rgb(238 237 235);
+    --tone-fireclay-seed: rgb(255 255 255);
+    --tone-bisque-01: rgb(6 5 5);
+    --tone-bisque-02: rgb(48 41 39);
+    --tone-bisque-03: rgb(82 69 66);
+    --tone-bisque-04: rgb(113 96 90);
+    --tone-bisque-05: rgb(135 115 108);
+    --tone-bisque-06: rgb(178 163 158);
+    --tone-bisque-07: rgb(197 186 183);
+    --tone-bisque-08: rgb(214 206 204);
+    --tone-bisque-09: rgb(229 224 223);
+    --tone-bisque-10: rgb(239 236 236);
+    --tone-bisque-seed: rgb(255 255 255);
+    --status-info-01: rgb(0 45 86);
+    --status-info-02: rgb(0 71 114);
+    --status-info-03: rgb(0 94 137);
+    --status-info-04: rgb(0 119 164);
+    --status-info-05: rgb(0 138 184);
+    --status-info-06: rgb(63 183 227);
+    --status-info-07: rgb(124 202 235);
+    --status-info-08: rgb(168 219 242);
+    --status-info-09: rgb(193 230 246);
+    --status-info-10: rgb(220 240 250);
+    --status-info: rgb(35 178 225);
+    --status-success-01: rgb(0 53 0);
+    --status-success-02: rgb(0 80 7);
+    --status-success-03: rgb(0 102 32);
+    --status-success-04: rgb(0 128 57);
+    --status-success-05: rgb(0 148 76);
+    --status-success-06: rgb(51 193 120);
+    --status-success-07: rgb(120 210 155);
+    --status-success-08: rgb(165 225 186);
+    --status-success-09: rgb(191 233 205);
+    --status-success-10: rgb(220 243 227);
+    --status-success: rgb(33 191 115);
+    --status-error-01: rgb(89 0 0);
+    --status-error-02: rgb(132 0 11);
+    --status-error-03: rgb(165 33 40);
+    --status-error-04: rgb(196 64 65);
+    --status-error-05: rgb(217 83 82);
+    --status-error-06: rgb(246 142 136);
+    --status-error-07: rgb(251 171 166);
+    --status-error-08: rgb(254 198 194);
+    --status-error-09: rgb(255 214 211);
+    --status-error-10: rgb(255 232 230);
+    --status-error: rgb(237 102 99);
+    --status-warning-01: rgb(58 44 0);
+    --status-warning-02: rgb(88 66 0);
+    --status-warning-03: rgb(113 85 0);
+    --status-warning-04: rgb(142 106 0);
+    --status-warning-05: rgb(164 123 0);
+    --status-warning-06: rgb(217 162 0);
+    --status-warning-07: rgb(242 181 0);
+    --status-warning-08: rgb(255 205 57);
+    --status-warning-09: rgb(255 220 117);
+    --status-warning-10: rgb(255 237 181);
+    --status-warning: rgb(255 193 7);
+    --label-red-01: rgb(87 11 11);
+    --label-red-02: rgb(131 17 17);
+    --label-red-03: rgb(169 22 22);
+    --label-red-04: rgb(212 28 28);
+    --label-red-05: rgb(230 66 66);
+    --label-red-06: rgb(241 144 144);
+    --label-red-07: rgb(244 173 173);
+    --label-red-08: rgb(248 201 201);
+    --label-red-09: rgb(250 215 215);
+    --label-red-10: rgb(252 233 233);
+    --label-red: rgb(208 27 27);
+    --label-amaranth-01: rgb(88 5 19);
+    --label-amaranth-02: rgb(131 8 29);
+    --label-amaranth-03: rgb(170 10 37);
+    --label-amaranth-04: rgb(213 12 47);
+    --label-amaranth-05: rgb(242 37 72);
+    --label-amaranth-06: rgb(248 138 157);
+    --label-amaranth-07: rgb(250 170 183);
+    --label-amaranth-08: rgb(252 197 207);
+    --label-amaranth-09: rgb(253 214 221);
+    --label-amaranth-10: rgb(254 232 236);
+    --label-amaranth: rgb(244 63 94);
+    --label-orchid-01: rgb(85 9 47);
+    --label-orchid-02: rgb(127 13 70);
+    --label-orchid-03: rgb(165 17 90);
+    --label-orchid-04: rgb(206 21 113);
+    --label-orchid-05: rgb(233 44 137);
+    --label-orchid-06: rgb(243 137 189);
+    --label-orchid-07: rgb(246 169 207);
+    --label-orchid-08: rgb(249 197 223);
+    --label-orchid-09: rgb(251 213 232);
+    --label-orchid-10: rgb(253 231 242);
+    --label-orchid: rgb(236 72 153);
+    --label-purple-01: rgb(60 5 112);
+    --label-purple-02: rgb(90 8 168);
+    --label-purple-03: rgb(116 10 217);
+    --label-purple-04: rgb(150 51 245);
+    --label-purple-05: rgb(168 86 247);
+    --label-purple-06: rgb(201 149 250);
+    --label-purple-07: rgb(215 176 251);
+    --label-purple-08: rgb(228 202 252);
+    --label-purple-09: rgb(235 216 253);
+    --label-purple-10: rgb(244 233 254);
+    --label-purple: rgb(168 85 247);
+    --label-violet-01: rgb(43 7 127);
+    --label-violet-02: rgb(65 11 190);
+    --label-violet-03: rgb(87 20 242);
+    --label-violet-04: rgb(126 73 245);
+    --label-violet-05: rgb(145 100 246);
+    --label-violet-06: rgb(184 156 250);
+    --label-violet-07: rgb(202 181 251);
+    --label-violet-08: rgb(219 205 252);
+    --label-violet-09: rgb(229 218 253);
+    --label-violet-10: rgb(240 234 254);
+    --label-violet: rgb(139 92 246);
+    --label-blue-01: rgb(5 26 127);
+    --label-blue-02: rgb(7 39 192);
+    --label-blue-03: rgb(11 51 246);
+    --label-blue-04: rgb(63 94 248);
+    --label-blue-05: rgb(90 117 249);
+    --label-blue-06: rgb(149 166 251);
+    --label-blue-07: rgb(175 189 252);
+    --label-blue-08: rgb(200 210 253);
+    --label-blue-09: rgb(216 222 254);
+    --label-blue-10: rgb(233 236 254);
+    --label-blue: rgb(14 54 246);
+    --label-sky-01: rgb(4 48 68);
+    --label-sky-02: rgb(6 73 104);
+    --label-sky-03: rgb(8 94 133);
+    --label-sky-04: rgb(10 118 167);
+    --label-sky-05: rgb(12 136 193);
+    --label-sky-06: rgb(47 182 243);
+    --label-sky-07: rgb(106 203 246);
+    --label-sky-08: rgb(157 220 249);
+    --label-sky-09: rgb(185 231 251);
+    --label-sky-10: rgb(217 241 253);
+    --label-sky: rgb(14 165 233);
+    --label-aqua-01: rgb(2 50 59);
+    --label-aqua-02: rgb(2 75 88);
+    --label-aqua-03: rgb(3 97 114);
+    --label-aqua-04: rgb(4 122 143);
+    --label-aqua-05: rgb(5 141 165);
+    --label-aqua-06: rgb(6 186 217);
+    --label-aqua-07: rgb(7 208 243);
+    --label-aqua-08: rgb(99 229 251);
+    --label-aqua-09: rgb(151 237 252);
+    --label-aqua-10: rgb(199 245 253);
+    --label-aqua: rgb(6 182 212);
+    --label-green-01: rgb(9 52 25);
+    --label-green-02: rgb(14 80 38);
+    --label-green-03: rgb(18 103 49);
+    --label-green-04: rgb(22 128 61);
+    --label-green-05: rgb(26 148 71);
+    --label-green-06: rgb(34 195 93);
+    --label-green-07: rgb(44 218 108);
+    --label-green-08: rgb(125 232 164);
+    --label-green-09: rgb(165 240 193);
+    --label-green-10: rgb(206 247 221);
+    --label-green: rgb(34 197 94);
+    --label-lime-01: rgb(33 51 6);
+    --label-lime-02: rgb(49 76 8);
+    --label-lime-03: rgb(64 99 11);
+    --label-lime-04: rgb(81 124 13);
+    --label-lime-05: rgb(93 143 15);
+    --label-lime-06: rgb(123 189 20);
+    --label-lime-07: rgb(137 211 23);
+    --label-lime-08: rgb(159 232 46);
+    --label-lime-09: rgb(189 239 111);
+    --label-lime-10: rgb(219 247 178);
+    --label-lime: rgb(132 204 22);
+    --label-yellow-01: rgb(58 44 2);
+    --label-yellow-02: rgb(87 67 3);
+    --label-yellow-03: rgb(112 85 4);
+    --label-yellow-04: rgb(141 107 5);
+    --label-yellow-05: rgb(161 124 6);
+    --label-yellow-06: rgb(214 163 7);
+    --label-yellow-07: rgb(239 183 8);
+    --label-yellow-08: rgb(249 207 78);
+    --label-yellow-09: rgb(251 221 131);
+    --label-yellow-10: rgb(253 236 186);
+    --label-yellow: rgb(234 179 8);
+    --label-orange-01: rgb(76 32 2);
+    --label-orange-02: rgb(114 48 3);
+    --label-orange-03: rgb(147 63 4);
+    --label-orange-04: rgb(185 78 5);
+    --label-orange-05: rgb(213 90 5);
+    --label-orange-06: rgb(250 143 69);
+    --label-orange-07: rgb(252 174 121);
+    --label-orange-08: rgb(253 201 166);
+    --label-orange-09: rgb(253 217 191);
+    --label-orange-10: rgb(254 233 219);
+    --label-orange: rgb(249 115 22);
+    --variant-primary-01: rgb(5 40 103);
+    --variant-primary-02: rgb(0 57 163);
+    --variant-primary-03: rgb(7 76 204);
+    --variant-primary-04: rgb(36 103 231);
+    --variant-primary-05: rgb(74 126 224);
+    --variant-primary-06: rgb(148 172 218);
+    --variant-primary-07: rgb(178 192 220);
+    --variant-primary-08: rgb(204 212 226);
+    --variant-primary-09: rgb(220 224 231);
+    --variant-primary-10: rgb(236 237 240);
+    --variant-primary: rgb(0 55 158);
+    --variant-secondary-01: rgb(25 43 88);
+    --variant-secondary-02: rgb(18 59 156);
+    --variant-secondary-03: rgb(15 73 210);
+    --variant-secondary-04: rgb(46 101 233);
+    --variant-secondary-05: rgb(81 125 228);
+    --variant-secondary-06: rgb(150 171 223);
+    --variant-secondary-07: rgb(179 192 224);
+    --variant-secondary-08: rgb(205 211 228);
+    --variant-secondary-09: rgb(220 223 232);
+    --variant-secondary-10: rgb(236 237 240);
+    --variant-secondary: rgb(15 74 213);
+    --variant-ai-01: rgb(43 7 127);
+    --variant-ai-02: rgb(65 11 190);
+    --variant-ai-03: rgb(87 20 242);
+    --variant-ai-04: rgb(126 73 245);
+    --variant-ai-05: rgb(145 100 246);
+    --variant-ai-06: rgb(184 156 250);
+    --variant-ai-07: rgb(202 181 251);
+    --variant-ai-08: rgb(219 205 252);
+    --variant-ai-09: rgb(229 218 253);
+    --variant-ai-10: rgb(240 234 254);
+    --variant-ai: rgb(139 92 246);
+    --brand-maggioli-01: rgb(5 40 103);
+    --brand-maggioli-02: rgb(0 57 163);
+    --brand-maggioli-03: rgb(7 76 204);
+    --brand-maggioli-04: rgb(36 103 231);
+    --brand-maggioli-05: rgb(74 126 224);
+    --brand-maggioli-06: rgb(148 172 218);
+    --brand-maggioli-07: rgb(178 192 220);
+    --brand-maggioli-08: rgb(204 212 226);
+    --brand-maggioli-09: rgb(220 224 231);
+    --brand-maggioli-10: rgb(236 237 240);
+    --brand-maggioli: rgb(0 55 158);
+    --brand-maggioli-editore-01: rgb(25 43 88);
+    --brand-maggioli-editore-02: rgb(18 59 156);
+    --brand-maggioli-editore-03: rgb(15 73 210);
+    --brand-maggioli-editore-04: rgb(46 101 233);
+    --brand-maggioli-editore-05: rgb(81 125 228);
+    --brand-maggioli-editore-06: rgb(150 171 223);
+    --brand-maggioli-editore-07: rgb(179 192 224);
+    --brand-maggioli-editore-08: rgb(205 211 228);
+    --brand-maggioli-editore-09: rgb(220 223 232);
+    --brand-maggioli-editore-10: rgb(236 237 240);
+    --brand-maggioli-editore: rgb(15 74 213);
+    --brand-rnd-01: rgb(52 45 37);
+    --brand-rnd-02: rgb(81 67 49);
+    --brand-rnd-03: rgb(107 86 57);
+    --brand-rnd-04: rgb(139 106 64);
+    --brand-rnd-05: rgb(163 122 68);
+    --brand-rnd-06: rgb(204 165 111);
+    --brand-rnd-07: rgb(214 188 154);
+    --brand-rnd-08: rgb(222 210 193);
+    --brand-rnd-09: rgb(229 223 214);
+    --brand-rnd-10: rgb(239 237 234);
+    --brand-rnd: rgb(203 162 107);
+    --surface-porcelain-sunken: rgb(228 232 238);
+    --surface-porcelain-muted: rgb(232 235 241);
+    --surface-porcelain-default: rgb(239 242 245);
+    --surface-porcelain-raised: rgb(247 248 250);
+    --surface-porcelain-overlay: rgb(255 255 255);
+    --surface-neutral-sunken: rgb(232 232 232);
+    --surface-neutral-muted: rgb(235 235 235);
+    --surface-neutral-default: rgb(242 242 242);
+    --surface-neutral-raised: rgb(248 248 248);
+    --surface-neutral-overlay: rgb(255 255 255);
+    --surface-bisque-sunken: rgb(235 231 229);
+    --surface-bisque-muted: rgb(238 234 233);
+    --surface-bisque-default: rgb(244 241 240);
+    --surface-bisque-raised: rgb(249 248 248);
+    --surface-bisque-overlay: rgb(255 255 255);
+    --surface-info-sunken: rgb(209 237 250);
+    --surface-info-muted: rgb(216 240 251);
+    --surface-info-default: rgb(229 245 252);
+    --surface-info-raised: rgb(242 250 254);
+    --surface-info-overlay: rgb(255 255 255);
+    --surface-success-sunken: rgb(210 241 220);
+    --surface-success-muted: rgb(216 243 225);
+    --surface-success-default: rgb(229 247 235);
+    --surface-success-raised: rgb(242 251 245);
+    --surface-success-overlay: rgb(255 255 255);
+    --surface-error-sunken: rgb(255 221 218);
+    --surface-error-muted: rgb(255 226 223);
+    --surface-error-default: rgb(255 236 233);
+    --surface-error-raised: rgb(255 245 244);
+    --surface-error-overlay: rgb(255 255 255);
+    --surface-warning-sunken: rgb(246 230 199);
+    --surface-warning-muted: rgb(247 234 206);
+    --surface-warning-default: rgb(250 241 222);
+    --surface-warning-raised: rgb(253 248 238);
+    --surface-warning-overlay: rgb(255 255 255);
+    --border-porcelain-muted: rgb(213 219 228);
+    --border-porcelain-default: rgb(188 197 210);
+    --border-porcelain-strong: rgb(128 141 160);
+    --border-neutral-muted: rgb(219 219 219);
+    --border-neutral-default: rgb(196 196 196);
+    --border-neutral-strong: rgb(140 140 140);
+    --border-bisque-muted: rgb(224 217 215);
+    --border-bisque-default: rgb(203 194 191);
+    --border-bisque-strong: rgb(151 137 132);
+    --border-info-muted: rgb(184 226 245);
+    --border-info-default: rgb(141 207 235);
+    --border-info-strong: rgb(18 154 196);
+    --border-success-muted: rgb(185 232 201);
+    --border-success-default: rgb(143 215 169);
+    --border-success-strong: rgb(17 166 98);
+    --border-error-muted: rgb(255 203 198);
+    --border-error-default: rgb(254 171 165);
+    --border-error-strong: rgb(218 96 93);
+    --border-warning-muted: rgb(239 216 168);
+    --border-warning-default: rgb(226 191 117);
+    --border-warning-strong: rgb(184 130 0);
+    --text-porcelain-default: rgb(4 5 6);
+    --text-porcelain-muted: rgb(61 73 91);
+    --text-porcelain-subtle: rgb(83 100 125);
+    --text-porcelain-disabled: rgb(99 120 150);
+    --text-neutral-default: rgb(5 5 5);
+    --text-neutral-muted: rgb(73 73 73);
+    --text-neutral-subtle: rgb(99 99 99);
+    --text-neutral-disabled: rgb(119 119 119);
+    --text-bisque-default: rgb(6 5 5);
+    --text-bisque-muted: rgb(82 69 66);
+    --text-bisque-subtle: rgb(113 96 90);
+    --text-bisque-disabled: rgb(135 115 108);
+    --text-info-default: rgb(0 45 86);
+    --text-info-muted: rgb(0 71 114);
+    --text-info-subtle: rgb(0 94 137);
+    --text-info-disabled: rgb(0 138 184);
+    --text-success-default: rgb(0 53 0);
+    --text-success-muted: rgb(0 80 7);
+    --text-success-subtle: rgb(0 102 32);
+    --text-success-disabled: rgb(0 148 76);
+    --text-error-default: rgb(89 0 0);
+    --text-error-muted: rgb(132 0 11);
+    --text-error-subtle: rgb(165 33 40);
+    --text-error-disabled: rgb(217 83 82);
+    --text-warning-default: rgb(58 44 0);
+    --text-warning-muted: rgb(88 66 0);
+    --text-warning-subtle: rgb(113 85 0);
+    --text-warning-disabled: rgb(164 123 0);
+
+    /* semantic */
+    --magma-tint-sunken: var(--surface-neutral-sunken);
+    --magma-tint-muted: var(--surface-neutral-muted);
+    --magma-tint-default: var(--surface-neutral-default);
+    --magma-tint-raised: var(--surface-neutral-raised);
+    --magma-tint-overlay: var(--surface-neutral-overlay);
+    --magma-tint-border-muted: var(--border-neutral-muted);
+    --magma-tint-border-default: var(--border-neutral-default);
+    --magma-tint-border-strong: var(--border-neutral-strong);
+    --magma-tint-text-default: var(--text-neutral-default);
+    --magma-tint-text-muted: var(--text-neutral-muted);
+    --magma-tint-text-subtle: var(--text-neutral-subtle);
+    --magma-tint-text-disabled: var(--text-neutral-disabled);
+    --magma-tint-text-on-emphasis: var(--tone-neutral-seed);
+    --magma-tint-scale-01: var(--tone-neutral-01);
+    --magma-tint-scale-02: var(--tone-neutral-02);
+    --magma-tint-scale-03: var(--tone-neutral-03);
+    --magma-tint-scale-04: var(--tone-neutral-04);
+    --magma-tint-scale-05: var(--tone-neutral-05);
+    --magma-tint-scale-06: var(--tone-neutral-06);
+    --magma-tint-scale-07: var(--tone-neutral-07);
+    --magma-tint-scale-08: var(--tone-neutral-08);
+    --magma-tint-scale-09: var(--tone-neutral-09);
+    --magma-tint-scale-10: var(--tone-neutral-10);
+    --magma-surface-sunken: var(--magma-tint-sunken);
+    --magma-surface-muted: var(--magma-tint-muted);
+    --magma-surface-default: var(--magma-tint-default);
+    --magma-surface-raised: var(--magma-tint-raised);
+    --magma-surface-overlay: var(--magma-tint-overlay);
+    --magma-wash-soft: var(--magma-tint-scale-10);
+    --magma-wash-base: var(--magma-tint-scale-09);
+    --magma-wash-strong: var(--magma-tint-scale-08);
+    --magma-shadow-ink: var(--magma-tint-scale-01);
+    --magma-text-default: var(--magma-tint-text-default);
+    --magma-text-muted: var(--magma-tint-text-muted);
+    --magma-text-subtle: var(--magma-tint-text-subtle);
+    --magma-text-disabled: var(--magma-tint-text-disabled);
+    --magma-text-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-border-muted: var(--magma-tint-border-muted);
+    --magma-border-default: var(--magma-tint-border-default);
+    --magma-border-strong: var(--magma-tint-border-strong);
+    --magma-border-focus: var(--magma-accent-emphasis);
+    --magma-info-wash-soft: var(--status-info-10);
+    --magma-info-wash-base: var(--status-info-09);
+    --magma-info-wash-strong: var(--status-info-08);
+    --magma-info-text-default: var(--text-info-default);
+    --magma-info-text-muted: var(--text-info-muted);
+    --magma-info-text-subtle: var(--text-info-subtle);
+    --magma-info-text-disabled: var(--text-info-disabled);
+    --magma-info-border-muted: var(--border-info-muted);
+    --magma-info-border-default: var(--border-info-default);
+    --magma-info-border-strong: var(--border-info-strong);
+    --magma-info-emphasis: var(--status-info-04);
+    --magma-info-emphasis-hover: var(--status-info-03);
+    --magma-info-emphasis-active: var(--status-info-02);
+    --magma-info-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-info-surface: var(--magma-info-wash-base);
+    --magma-info-fg: var(--magma-info-text-default);
+    --magma-info-border: var(--magma-info-border-default);
+    --magma-success-wash-soft: var(--status-success-10);
+    --magma-success-wash-base: var(--status-success-09);
+    --magma-success-wash-strong: var(--status-success-08);
+    --magma-success-text-default: var(--text-success-default);
+    --magma-success-text-muted: var(--text-success-muted);
+    --magma-success-text-subtle: var(--text-success-subtle);
+    --magma-success-text-disabled: var(--text-success-disabled);
+    --magma-success-border-muted: var(--border-success-muted);
+    --magma-success-border-default: var(--border-success-default);
+    --magma-success-border-strong: var(--border-success-strong);
+    --magma-success-emphasis: var(--status-success-04);
+    --magma-success-emphasis-hover: var(--status-success-03);
+    --magma-success-emphasis-active: var(--status-success-02);
+    --magma-success-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-success-surface: var(--magma-success-wash-base);
+    --magma-success-fg: var(--magma-success-text-default);
+    --magma-success-border: var(--magma-success-border-default);
+    --magma-warning-wash-soft: var(--status-warning-10);
+    --magma-warning-wash-base: var(--status-warning-09);
+    --magma-warning-wash-strong: var(--status-warning-08);
+    --magma-warning-text-default: var(--text-warning-default);
+    --magma-warning-text-muted: var(--text-warning-muted);
+    --magma-warning-text-subtle: var(--text-warning-subtle);
+    --magma-warning-text-disabled: var(--text-warning-disabled);
+    --magma-warning-border-muted: var(--border-warning-muted);
+    --magma-warning-border-default: var(--border-warning-default);
+    --magma-warning-border-strong: var(--border-warning-strong);
+    --magma-warning-emphasis: var(--status-warning-04);
+    --magma-warning-emphasis-hover: var(--status-warning-03);
+    --magma-warning-emphasis-active: var(--status-warning-02);
+    --magma-warning-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-warning-surface: var(--magma-warning-wash-base);
+    --magma-warning-fg: var(--magma-warning-text-default);
+    --magma-warning-border: var(--magma-warning-border-default);
+    --magma-danger-wash-soft: var(--status-error-10);
+    --magma-danger-wash-base: var(--status-error-09);
+    --magma-danger-wash-strong: var(--status-error-08);
+    --magma-danger-text-default: var(--text-error-default);
+    --magma-danger-text-muted: var(--text-error-muted);
+    --magma-danger-text-subtle: var(--text-error-subtle);
+    --magma-danger-text-disabled: var(--text-error-disabled);
+    --magma-danger-border-muted: var(--border-error-muted);
+    --magma-danger-border-default: var(--border-error-default);
+    --magma-danger-border-strong: var(--border-error-strong);
+    --magma-danger-emphasis: var(--status-error-04);
+    --magma-danger-emphasis-hover: var(--status-error-03);
+    --magma-danger-emphasis-active: var(--status-error-02);
+    --magma-danger-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-danger-surface: var(--magma-danger-wash-base);
+    --magma-danger-fg: var(--magma-danger-text-default);
+    --magma-danger-border: var(--magma-danger-border-default);
+    --magma-neutral-fg: var(--magma-tint-scale-03);
+    --magma-neutral-border: var(--magma-tint-scale-06);
+    --magma-surface-inverse: var(--magma-tint-scale-02);
+    --magma-surface-inverse-muted: var(--magma-tint-scale-03);
+    --magma-on-inverse: var(--magma-tint-text-on-emphasis);
+    --magma-neutral-emphasis: var(--magma-surface-inverse);
+    --magma-neutral-on-emphasis: var(--magma-on-inverse);
+    --magma-tint-accent-surface: var(--variant-primary-09);
+    --magma-tint-accent-fg: var(--variant-primary-03);
+    --magma-tint-accent-border: var(--variant-primary-06);
+    --magma-tint-accent-emphasis: var(--variant-primary-04);
+    --magma-tint-accent-emphasis-hover: var(--variant-primary-03);
+    --magma-tint-accent-emphasis-active: var(--variant-primary-02);
+    --magma-tint-accent-surface-hover: var(--variant-primary-08);
+    --magma-tint-accent-surface-subtle: var(--variant-primary-10);
+    --magma-accent-surface: var(--magma-tint-accent-surface);
+    --magma-accent-fg: var(--magma-tint-accent-fg);
+    --magma-accent-border: var(--magma-tint-accent-border);
+    --magma-accent-emphasis: var(--magma-tint-accent-emphasis);
+    --magma-accent-emphasis-hover: var(--magma-tint-accent-emphasis-hover);
+    --magma-accent-emphasis-active: var(--magma-tint-accent-emphasis-active);
+    --magma-accent-surface-hover: var(--magma-tint-accent-surface-hover);
+    --magma-accent-surface-subtle: var(--magma-tint-accent-surface-subtle);
+    --magma-accent-on-emphasis: var(--magma-tint-text-on-emphasis);
+    --magma-tint-accent-ai-surface: var(--variant-ai-09);
+    --magma-tint-accent-ai-fg: var(--variant-ai-03);
+    --magma-tint-accent-ai-border: var(--variant-ai-06);
+    --magma-tint-accent-ai-emphasis: var(--variant-ai-04);
+    --magma-tint-accent-ai-emphasis-hover: var(--variant-ai-03);
+    --magma-tint-accent-ai-emphasis-active: var(--variant-ai-02);
+    --magma-tint-accent-ai-surface-hover: var(--variant-ai-08);
+    --magma-tint-accent-ai-surface-subtle: var(--variant-ai-10);
+    --magma-accent-ai-surface: var(--magma-tint-accent-ai-surface);
+    --magma-accent-ai-fg: var(--magma-tint-accent-ai-fg);
+    --magma-accent-ai-border: var(--magma-tint-accent-ai-border);
+    --magma-accent-ai-emphasis: var(--magma-tint-accent-ai-emphasis);
+    --magma-accent-ai-emphasis-hover: var(--magma-tint-accent-ai-emphasis-hover);
+    --magma-accent-ai-emphasis-active: var(--magma-tint-accent-ai-emphasis-active);
+    --magma-accent-ai-surface-hover: var(--magma-tint-accent-ai-surface-hover);
+    --magma-accent-ai-surface-subtle: var(--magma-tint-accent-ai-surface-subtle);
+    --magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis);
+
+    /* globals */
+    --magma-pref-mode: light;
+    --magma-pref-theme-scheme: light;
+    --magma-pref-theme: default;
+    --magma-pref-consumption: high;
+    --magma-pref-animation: no-preference;
+    --magma-pref-contrast: no-preference;
+    --magma-backdrop-animation-duration: 300ms;
+    --magma-outline-animation-duration: 1.5s;
+    --magma-backdrop-opacity: 0.1;
+    --magma-disabled-opacity: 0.5;
+    --magma-overlay-opacity: 0.5;
+    --magma-backdrop-blur: 4px;
+    --magma-outline-blur-offset: 6px;
+    --magma-outline-focus-offset: 2px;
+    --magma-backdrop-color: rgb(0 0 0);
+    --magma-on-backdrop: rgb(252 252 252);
+    --magma-outline-blur-color: transparent;
+    --magma-outline-focus-color: rgb(0 0 0);
+    --magma-overlay-color: rgb(0 0 0);
+    --magma-selection-background: rgb(0 120 255);
+    --magma-selection-color: rgb(255 255 255);
+    --magma-corner-shape: squircle;
+    --magma-header-z-index: 1000;
+    --magma-notification-z-index: 2000;
+    --magma-modal-z-index: 3000;
+    --magma-backdrop-z-index: 4000;
+    --magma-dropdown-z-index: 5000;
+    --magma-tooltip-z-index: 6000;
+    --magma-theme-overlay-z-index: 7000;
+    --magma-context-menu-z-index: 8000;
+    --magma-view-transition-navigation: auto;
+    --magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
+    --magma-outline-blur: 2px solid var(--magma-outline-blur-color);
+    --magma-outline-focus: 2px solid var(--magma-outline-focus-color);
+    --magma-overlay-blur: var(--magma-backdrop-blur);
+    --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
+
+    /* globals: theme */
+    --depth: 1;
+    --mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)));
+    --mds-elevation-overlay: 0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)));
+
+    /* component: mds-accordion */
+    --mds-accordion-color: rgb(var(--magma-text-default));
+    --mds-accordion-border-color: rgb(var(--magma-border-default));
+    --mds-accordion-border-width: 2px;
+    --mds-accordion-description-color: rgb(var(--magma-text-default));
+    --mds-accordion-duration: 300ms;
+    --mds-accordion-padding-selected: --spacing(400) 0 --spacing(800) 0;
+    --mds-accordion-padding-unselected: --spacing(400) 0;
+
+    /* component: mds-accordion-item */
+    --mds-accordion-item-border-color: rgb(196 196 196);
+    --mds-accordion-item-border-width: 2px;
+    --mds-accordion-item-color: rgb(73 73 73);
+    --mds-accordion-item-description-color: rgb(5 5 5);
+    --mds-accordion-item-duration: 300ms;
+    --mds-accordion-item-padding-selected: 16px 0 32px 0;
+    --mds-accordion-item-padding-unselected: 16px 0 16px 0;
+    --mds-accordion-item-transition-duration: var(--duration-500);
+
+    /* component: mds-accordion-timer */
+    --mds-accordion-timer-progress-bar-color: rgb(var(--magma-text-muted));
+    --mds-accordion-timer-progress-bar-background: rgb(var(--magma-wash-strong));
+    --mds-accordion-timer-progress-bar-thickness: --spacing(100);
+    --mds-accordion-timer-duration: 500ms;
+
+    /* component: mds-accordion-timer-item */
+    --mds-accordion-timer-item-color: rgb(5 5 5);
+    --mds-accordion-timer-item-duration: 500ms;
+    --mds-accordion-timer-item-progress-bar-background: rgb(208 208 208);
+    --mds-accordion-timer-item-progress-bar-color: rgb(73 73 73);
+    --mds-accordion-timer-item-progress-bar-thickness: 4px;
+    --mds-progress-color: var(--mds-accordion-timer-item-progress-bar-color);
+    --mds-progress-background: var(--mds-accordion-timer-item-progress-bar-background);
+    --mds-progress-thickness: var(--mds-accordion-timer-item-progress-bar-thickness);
+
+    /* component: mds-avatar */
+    --mds-avatar-background-color: rgb(7 76 204);
+    --mds-avatar-background-color-pending: rgb(208 208 208);
+    --mds-avatar-color: rgb(236 237 240);
+    --mds-avatar-initials-padding: 20%;
+    --mds-avatar-radius: 1000px;
+    --mds-avatar-transition-duration: var(--duration-200);
+
+    /* component: mds-avatar-stack */
+    --mds-avatar-stack-lg-border: 4px;
+    --mds-avatar-stack-lg-offset: 2;
+    --mds-avatar-stack-lg-size: 60px;
+    --mds-avatar-stack-sm-border: 2px;
+    --mds-avatar-stack-sm-offset: 1.5;
+    --mds-avatar-stack-sm-size: 36px;
+    --mds-avatar-stack-item-size: var(--mds-avatar-stack-sm-size);
+    --mds-avatar-stack-item-border: var(--mds-avatar-stack-sm-border);
+    --mds-avatar-stack-item-offset: var(--mds-avatar-stack-sm-offset);
+    --mds-avatar-stack-background: rgb(var(--magma-surface-overlay));
+    --mds-avatar-stack-count-background-color: rgb(var(--magma-wash-base));
+    --mds-avatar-stack-count-color: rgb(var(--magma-text-subtle));
+    --mds-avatar-stack-md-border: --spacing(100);
+    --mds-avatar-stack-md-offset: 1.75;
+    --mds-avatar-stack-md-size: --spacing(1200);
+
+    /* component: mds-avatar-stack-item */
+    --mds-avatar-stack-item-background: rgb(255 255 255);
+    --mds-avatar-stack-item-count-background-color: rgb(225 225 225);
+    --mds-avatar-stack-item-count-color: rgb(99 99 99);
+    --mds-avatar-stack-item-offset-margin: calc( var(--mds-avatar-stack-item-size) / var(--mds-avatar-stack-item-offset) );
+
+    /* component: mds-badge */
+    --mds-badge-background: rgb(185 231 251);
+    --mds-badge-border-color: rgb(47 182 243);
+    --mds-badge-border-width: 1px;
+    --mds-badge-color: rgb(255 255 255);
+    --mds-badge-radius: 16px;
+    --mds-badge-transition-duration: var(--duration-200);
+
+    /* component: mds-banner */
+    --mds-banner-background: rgb(255 255 255);
+    --mds-banner-cockade-background: rgb(220 224 231);
+    --mds-banner-cockade-distance: 24px;
+    --mds-banner-color: rgb(5 5 5);
+    --mds-banner-content-gap: 16px;
+    --mds-banner-headline-color: rgb(0 57 163);
+    --mds-banner-icon-color: rgb(7 76 204);
+    --mds-banner-radius: 40px;
+    --mds-banner-transition-duration: 300ms;
+    --mds-banner-shadow: var(--shadow-lg-sharp);
+    --mds-banner-transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
+
+    /* component: mds-bibliography */
+    --mds-bibliography-color: rgb(73 73 73);
+    --mds-bibliography-text-decoration: rgb(140 140 140);
+    --mds-bibliography-text-decoration-hover: rgb(5 5 5);
+
+    /* component: mds-breadcrumb */
+    --mds-breadcrumb-button-background-disabled: transparent;
+    --mds-breadcrumb-button-color-current: rgb(5 5 5);
+    --mds-breadcrumb-current-button-color: rgb(119 119 119);
+    --mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
+    --mds-breadcrumb-button-background-hover: rgb(var(--magma-wash-soft));
+    --mds-breadcrumb-button-background: transparent;
+    --mds-breadcrumb-button-color-hover: rgb(var(--magma-text-default));
+    --mds-breadcrumb-button-color: rgb(var(--magma-text-default));
+
+    /* component: mds-breadcrumb-item */
+    --mds-breadcrumb-item-arrow-depth-color: rgb(99 99 99);
+    --mds-breadcrumb-item-button-background: transparent;
+    --mds-breadcrumb-item-button-background-hover: rgb(237 237 237);
+    --mds-breadcrumb-item-button-background-selected: rgb(225 225 225);
+    --mds-breadcrumb-item-button-border-radius: 1000px;
+    --mds-breadcrumb-item-button-color: rgb(5 5 5);
+    --mds-breadcrumb-item-button-color-hover: rgb(5 5 5);
+    --mds-breadcrumb-item-button-color-selected: rgb(5 5 5);
+    --mds-breadcrumb-item-button-border-color-rgb-selected: var(--magma-wash-base);
+    --mds-breadcrumb-item-button-border-color-rgb-hover: var(--magma-wash-soft);
+    --mds-breadcrumb-item-button-border-color-rgb: var( --mds-breadcrumb-item-button-border-color-rgb-hover );
+    --mds-button-background: var(--mds-breadcrumb-item-button-background);
+    --mds-button-border-color-rgb: var(--mds-breadcrumb-item-button-border-color-rgb);
+    --mds-button-color: var(--mds-breadcrumb-item-button-color);
+    --mds-button-radius: var(--mds-breadcrumb-item-button-border-radius);
+
+    /* component: mds-button */
+    --mds-button-await-duration: 0.725s;
+    --mds-button-border-default-opacity: 0;
+    --mds-button-border-high-contrast-hover-width: 3px;
+    --mds-button-border-high-contrast-width: 2px;
+    --mds-button-border-hover-opacity: 0.75;
+    --mds-button-border-opacity: 0;
+    --mds-button-border-tone-outline-hover-width: 3px;
+    --mds-button-border-tone-strong-hover-width: 2px;
+    --mds-button-border-tone-weak-hover-width: 2px;
+    --mds-button-border-width: 2px;
+    --mds-button-gap: 8px;
+    --mds-button-line-clamp: 1;
+    --mds-spinner-duration: var(--mds-button-await-duration);
+    --mds-button-border-hover-width: --spacing(50);
+    --mds-button-transition-duration: var(--duration-300);
+    --mds-button-border-tone-outline-opacity: 0.3;
+    --mds-text-line-clamp: var(--mds-button-line-clamp);
+
+    /* component: mds-button-dropdown */
+    --mds-button-dropdown-radius: 24px;
+    --mds-button-dropdown-window-radius: 24px;
+
+    /* component: mds-calendar */
+    --mds-calendar-background: rgb(248 248 248);
+    --mds-calendar-border-radius: 16px;
+    --mds-calendar-day-number-color: rgb(5 5 5);
+    --mds-calendar-max-width: 480px;
+    --mds-calendar-padding: 16px;
+    --mds-calendar-select-month-or-year-height: 36px;
+    --mds-calendar-select-month-or-year-width: 224px;
+    --mds-calendar-cell-gap: --spacing(50);
+    --mds-calendar-cell-other-month-visibility: visible;
+
+    /* component: mds-calendar-cell */
+    --mds-calendar-cell-background: transparent;
+    --mds-calendar-cell-boundaries-background: transparent;
+    --mds-calendar-cell-boundaries-color: rgb(5 5 5);
+    --mds-calendar-cell-boundaries-padding: 4px;
+    --mds-calendar-cell-color: rgb(5 5 5);
+    --mds-calendar-cell-disabled-background: transparent;
+    --mds-calendar-cell-disabled-color: rgb(119 119 119);
+    --mds-calendar-cell-other-month-background: transparent;
+    --mds-calendar-cell-other-month-color: rgb(119 119 119);
+    --mds-calendar-cell-preselection-current-month-background: rgb(204 212 226);
+    --mds-calendar-cell-preselection-current-month-boundaries-background: rgb( 236 237 240 );
+    --mds-calendar-cell-preselection-current-month-boundaries-color: rgb(119 119 119);
+    --mds-calendar-cell-preselection-current-month-color: rgb(119 119 119);
+    --mds-calendar-cell-preselection-other-month-background: rgb(220 224 231);
+    --mds-calendar-cell-preselection-other-month-boundaries-background: rgb(248 248 248);
+    --mds-calendar-cell-preselection-other-month-boundaries-color: rgb(119 119 119);
+    --mds-calendar-cell-preselection-other-month-color: rgb(119 119 119);
+    --mds-calendar-cell-preselection-today-background: rgb(220 224 231);
+    --mds-calendar-cell-preselection-today-color: rgb(7 76 204);
+    --mds-calendar-cell-selection-boundaries-border-radius: 200px;
+    --mds-calendar-cell-selection-current-month-background: rgb(36 103 231);
+    --mds-calendar-cell-selection-current-month-boundaries-background: rgb(248 248 248);
+    --mds-calendar-cell-selection-current-month-boundaries-color: rgb(73 73 73);
+    --mds-calendar-cell-selection-current-month-color: rgb(255 255 255);
+    --mds-calendar-cell-selection-current-month-weekend-background: rgb(7 76 204);
+    --mds-calendar-cell-selection-current-month-weekend-boundaries-background: rgb( 7 76 204 );
+    --mds-calendar-cell-selection-current-month-weekend-boundaries-color: rgb(73 73 73);
+    --mds-calendar-cell-selection-current-month-weekend-color: rgb(148 172 218);
+    --mds-calendar-cell-selection-other-month-background: rgb(204 212 226);
+    --mds-calendar-cell-selection-other-month-boundaries-background: rgb(236 237 240);
+    --mds-calendar-cell-selection-other-month-boundaries-color: rgb(119 119 119);
+    --mds-calendar-cell-selection-other-month-color: rgb(99 99 99);
+    --mds-calendar-cell-selection-week-boundaries-border-radius: 200px;
+    --mds-calendar-cell-size: 48px;
+    --mds-calendar-cell-weekend-background: transparent;
+    --mds-calendar-cell-weekend-color: rgb(99 99 99);
+    --mds-calendar-cell-inner-background: var(--mds-calendar-cell-preselection-today-background);
+
+    /* component: mds-card */
+    --mds-card-gap: 0;
+    --mds-card-padding: 0;
+    --mds-card-background: rgb(var(--magma-surface-raised));
+
+    /* component: mds-chip */
+    --mds-chip-background: rgb(225 225 225);
+    --mds-chip-border: transparent;
+    --mds-chip-color: rgb(73 73 73);
+    --mds-chip-icon-background: rgb(7 76 204);
+    --mds-chip-icon-color: rgb(255 255 255);
+    --mds-chip-opacity-disabled: 0.5;
+    --mds-chip-color-selected: rgb(var(--magma-text-default));
+    --mds-chip-icon-background-selected: rgb(var(--magma-accent-emphasis-hover));
+    --mds-chip-icon-color-selected: rgb(var(--magma-text-on-emphasis));
+    --mds-chip-background-selected: rgb(var(--magma-wash-base));
+    --mds-chip-border-selected: transparent;
+    --mds-chip-shadow: var(--shadow-sm-sharp);
+    --mds-chip-shadow-selected: var(--shadow-sm-sharp);
+    --mds-chip-transition-duration: var(--duration-150);
+    --mds-chip-label-transition-duration: var(--duration-200);
+
+    /* component: mds-details */
+    --mds-details-duration: 300ms;
+    --mds-details-helper-icon-color: rgb(73 73 73);
+    --mds-details-icon-color: rgb(36 103 231);
+
+    /* component: mds-dropdown */
+    --mds-dropdown-arrow-background: rgb(255 255 255);
+    --mds-dropdown-backdrop-duration: 200ms;
+    --mds-dropdown-backdrop-z-index: 4000;
+    --mds-dropdown-background: rgb(255 255 255);
+    --mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
+    --mds-dropdown-duration: 0.5s;
+    --mds-dropdown-mouseover-delay: 0.5s;
+    --mds-dropdown-transform-from: scale(0.9) translateY(-3%);
+    --mds-dropdown-transform-to: scale(1) translate(0, 0);
+    --mds-dropdown-z-index: 5000;
+    --mds-dropdown-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-dropdown-ease: var(--ease-out-expo);
+
+    /* component: mds-emoji */
+    --mds-emoji-expression-follow-mouse-head-duration: 300ms;
+    --mds-emoji-expression-follow-mouse-traits-duration: 200ms;
+    --mds-emoji-expression-max-rotation: 16deg;
+    --mds-emoji-offset-ears: 0;
+    --mds-emoji-offset-eyebrows: 10px;
+    --mds-emoji-offset-eyes: 1px;
+    --mds-emoji-offset-gadget: 1px;
+    --mds-emoji-offset-hands: 2px;
+    --mds-emoji-offset-head: 0;
+    --mds-emoji-offset-mouth: 1px;
+    --mds-emoji-perspective: 400px;
+    --mds-emoji-simi-eye: #40281b;
+    --mds-emoji-simi-eye-light: #ffffff;
+    --mds-emoji-simi-eyebrow: #feefd8;
+    --mds-emoji-simi-gadget: #2b1c15;
+    --mds-emoji-simi-mouth: #2b1c15;
+    --mds-emoji-simi-mouth-teeth: #ffffff;
+    --mds-emoji-simi-mouth-throat: #c3481b;
+    --mds-emoji-simi-nose: #2b1c15;
+    --mds-emoji-simi-nose-light: #7e695f;
+    --mds-emoji-simi-outline: #2b1c15;
+    --mds-emoji-simi-skin: #f36320;
+    --mds-emoji-simi-skin-dark: #c3481b;
+    --mds-emoji-simi-skin-light: #feefd8;
+    --mds-emoji-mia-eyes-color: rgb(var(--magma-accent-ai-emphasis-hover));
+    --mds-emoji-mia-hands-color: rgb(var(--magma-accent-ai-emphasis));
+    --mds-emoji-mia-head-color: rgb(var(--magma-accent-ai-surface-hover));
+    --mds-emoji-mia-head-stroke-color: rgb(var(--magma-accent-ai-border));
+    --mds-emoji-mia-head-stroke-width: 0px;
+    --mds-emoji-mia-mouth-color: rgb(var(--magma-accent-ai-emphasis));
+
+    /* component: mds-entity */
+    --mds-entity-background: rgb(248 248 248);
+    --mds-entity-color: rgb(5 5 5);
+    --mds-entity-detail-color: rgb(73 73 73);
+    --mds-entity-icon-background: rgb(216 222 254);
+    --mds-entity-icon-color: rgb(63 94 248);
+    --mds-entity-icon-radius: 12px;
+
+    /* component: mds-file */
+    --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));
+    --mds-file-preview-color: rgb(var(--label-amaranth-04));
+    --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));
+    --mds-file-transition-duration: var(--duration-200);
+
+    /* component: mds-file-preview */
+    --mds-file-preview-background-color: rgb(248 248 248);
+    --mds-file-preview-border-radius: 40px;
+    --mds-file-preview-transition-duration: 0s;
+
+    /* component: mds-filter */
+    --mds-filter-items-background: rgb(225 225 225);
+    --mds-filter-items-background-active: rgb(225 225 225);
+    --mds-filter-items-gap: 8px;
+    --mds-filter-items-padding: 8px;
+    --mds-filter-items-radius: 1000px;
+    --mds-filter-items-scroll-behavior: smooth;
+    --mds-filter-label-padding: 0 24px;
+    --mds-filter-wrapper-shadow-color: rgb(196 196 196);
+    --mds-filter-wrapper-shadow-opacity: 0.1;
+    --mds-filter-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-filter-wrapper-shadow-color) inset;
+    --mds-filter-items-transition-duration: var(--duration-300);
+
+    /* component: mds-filter-item */
+    --mds-filter-item-count-background-default: rgb(208 208 208);
+    --mds-filter-item-count-background-selected: rgb(73 73 73);
+    --mds-filter-item-count-color-default: rgb(5 5 5);
+    --mds-filter-item-count-color-selected: rgb(255 255 255);
+    --mds-filter-item-transition-duration: var(--duration-200);
+
+    /* component: mds-header */
+    --mds-header-backdrop-blur-strength: 2px;
+    --mds-header-backdrop-height: 64px;
+    --mds-header-backdrop-show: true;
+    --mds-header-color: rgb(5 5 5);
+    --mds-header-icon-color: rgb(5 5 5);
+    --mds-header-inline-margin: 24px;
+    --mds-header-inline-margin-mobile: 16px;
+    --mds-header-modal-icon-color: rgb(255 255 255);
+    --mds-header-backdrop-background-image: none;
+    --mds-header-hidden-bar-translate-inline: translateY(-150%);
+    --mds-header-hidden-bar-translate-stripe: translateY(-110%);
+    --mds-header-z-index: var(--magma-header-z-index);
+    --mds-modal-close-icon-color: var(--mds-header-modal-icon-color);
+    --mds-header-inline-margin-current: var(--mds-header-inline-margin);
+
+    /* component: mds-header-bar */
+    --mds-header-bar-hamburger-color: rgb(73 73 73);
+    --mds-header-bar-transition-duration: 500ms;
+
+    /* component: mds-help */
+    --mds-help-tooltip-delay: 0.25s;
+    --mds-help-tooltip-max-width: 300px;
+    --mds-help-tooltip-min-width: 200px;
+    --mds-help-tooltip-width: fit-content;
+    --mds-tooltip-delay: var(--mds-help-tooltip-delay);
+
+    /* component: mds-horizontal-scroll */
+    --mds-horizontal-scroll-behavior: smooth;
+    --mds-horizontal-scroll-contents-padding: 24px;
+    --mds-horizontal-scroll-contents-scroll-padding: 0 24px;
+    --mds-horizontal-scroll-controls-margin: 48px;
+    --mds-horizontal-scroll-dot-area-background: rgb(208 208 208);
+    --mds-horizontal-scroll-dot-background: rgb(255 255 255);
+    --mds-horizontal-scroll-dot-size: 8px;
+    --mds-horizontal-scroll-dots-gap: 4px;
+    --mds-horizontal-scroll-gap: 24px;
+    --mds-horizontal-scroll-max-width: 1280px;
+    --mds-horizontal-scroll-scrollbar-margin: 0;
+    --mds-horizontal-scroll-scrollbar-radius: 0;
+    --mds-horizontal-scroll-scrollbar-size: 8px;
+    --mds-horizontal-scroll-scrollbar-thumb-background: rgb(42 42 42 / 0.3);
+    --mds-horizontal-scroll-scrollbar-track-background: rgb(225 225 225);
+    --mds-horizontal-scroll-dot-max-width: auto;
+
+    /* component: mds-img */
+    --mds-img-background: rgb(7 76 204);
+    --mds-img-color: rgb(220 224 231);
+    --mds-img-error-background: rgb(255 214 211);
+    --mds-img-error-color: rgb(89 0 0);
+    --mds-img-error-icon-color: rgb(89 0 0);
+    --mds-img-icon-color: rgb(148 172 218);
+
+    /* component: mds-input */
+    --mds-input-background: rgb(255 255 255);
+    --mds-input-icon-color: rgb(36 103 231);
+    --mds-input-placeholder-default-color: rgb(119 119 119);
+    --mds-input-placeholder-focus-color: rgb(119 119 119);
+    --mds-input-placeholder-hover-color: rgb(119 119 119);
+    --mds-input-textarea-field-sizing: content;
+    --mds-input-textarea-max-height: 256px;
+    --mds-input-textarea-min-height: 96px;
+    --mds-input-textarea-resize: none;
+    --mds-input-variant-color-rgb: rgb(0 0 0);
+    --mds-input-ring: var(--shadow-ring-strong-2);
+    --mds-input-tip-background: rgb(var(--magma-accent-ai-fg));
+    --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color-rgb) / 0.06);
+    --mds-input-tip-horizontal-offset-focused: --spacing(100);
+    --mds-input-tip-horizontal-offset: --spacing(100);
+    --mds-input-tip-vertical-offset: --spacing(100);
+    --mds-input-border-radius: var(--magma-radius-xl);
+    --mds-input-transition-duration: var(--duration-300);
+    --mds-input-controls-border: 2px solid rgb(var(--magma-border-muted));
+    --mds-input-controls-color: rgb(var(--magma-text-muted));
+
+    /* component: mds-input-date */
+    --mds-input-date-background: rgb(255 255 255);
+    --mds-input-date-field-background-empty: rgb(255 232 230);
+    --mds-input-date-field-color-empty: rgb(89 0 0);
+    --mds-input-date-icon-color: rgb(36 103 231);
+    --mds-input-date-icon-color-rgb: rgb(0 0 0);
+    --mds-input-date-variant-color-rgb: rgb(0 0 0);
+    --mds-input-date-ring: var(--shadow-ring-strong-2);
+    --mds-input-date-shadow: 0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
+    --mds-input-date-transition-duration: var(--duration-300);
+
+    /* component: mds-input-date-range */
+    --mds-input-date-range-background: rgb(255 255 255);
+    --mds-input-date-range-calendar-width: 352px;
+    --mds-input-date-range-fields-firefox-justify-content: start;
+    --mds-input-date-range-fields-gap: 0 8px;
+    --mds-input-date-range-icon-color: rgb(36 103 231);
+    --mds-input-date-range-variant-color-rgb: rgb(0 0 0);
+    --mds-input-date-range-ring: var(--shadow-ring-strong-2);
+    --mds-input-date-range-shadow: 0 1px 3px 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.06);
+    --mds-input-date-range-transition-duration: var(--duration-300);
+
+    /* component: mds-input-date-range-preselection */
+    --mds-date-range-preselection-default-background: rgb(208 208 208 / 0);
+    --mds-date-range-preselection-default-border: rgb(196 196 196);
+    --mds-date-range-preselection-default-color: rgb(73 73 73);
+    --mds-date-range-preselection-hover-background: rgb(237 237 237);
+    --mds-date-range-preselection-hover-border: rgb(237 237 237);
+    --mds-date-range-preselection-hover-color: rgb(73 73 73);
+    --mds-date-range-preselection-selected-background: rgb(7 76 204);
+    --mds-date-range-preselection-selected-border: rgb(7 76 204);
+    --mds-date-range-preselection-selected-color: rgb(255 255 255);
+    --mds-date-range-preselection-background: var(--mds-date-range-preselection-default-background);
+    --mds-date-range-preselection-border: var(--mds-date-range-preselection-default-border);
+    --mds-date-range-preselection-color: var(--mds-date-range-preselection-default-color);
+
+    /* component: mds-input-field */
+    --mds-input-field-message-background: rgb(237 237 237);
+    --mds-input-field-message-color: rgb(73 73 73);
+
+    /* component: mds-input-range */
+    --mds-input-range-thumb-background: var(--mds-input-range-thumb-background-disabled);
+    --mds-input-range-track-background: var(--mds-input-range-track-background-disabled);
+    --mds-input-range-track-progress-background: var( --mds-input-range-track-progress-background-disabled );
+    --mds-input-range-transition-duration: var(--duration-300);
+    --mds-input-range-thumb-background-disabled: rgb(var(--magma-wash-strong));
+    --mds-input-range-thumb-cursor: col-resize;
+    --mds-input-range-thumb-size: --spacing(400);
+    --mds-input-range-track-background-disabled: rgb(var(--magma-wash-strong));
+    --mds-input-range-track-progress-background-disabled: rgb(var(--magma-border-strong));
+    --mds-input-range-track-size: --spacing(600);
+
+    /* component: mds-input-select */
+    --mds-input-select-arrow-icon-background-color: transparent;
+    --mds-input-select-arrow-icon-blur-background-color: transparent;
+    --mds-input-select-arrow-icon-blur-color: rgb(36 103 231);
+    --mds-input-select-arrow-icon-color: rgb(36 103 231);
+    --mds-input-select-arrow-icon-hover-background-color: transparent;
+    --mds-input-select-arrow-icon-hover-color: rgb(7 76 204);
+    --mds-input-select-variant-color-rgb: rgb(0 0 0);
+    --mds-input-select-ring: var(--shadow-ring-strong-2);
+    --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.06);
+    --mds-input-select-transition-duration: var(--duration-300);
+    --mds-input-select-icon-transition-duration: var(--duration-200);
+
+    /* component: mds-input-switch */
+    --mds-input-switch-animation-timing-adjust: 1.4;
+    --mds-input-switch-box-color-disabled-checked: rgb(208 208 208);
+    --mds-input-switch-box-color-disabled-unchecked: rgb(208 208 208);
+    --mds-input-switch-box-color-enabled-checked: rgb(36 103 231);
+    --mds-input-switch-box-color-enabled-unchecked: rgb(140 140 140);
+    --mds-input-switch-box-padding: 4px;
+    --mds-input-switch-box-padding-lg: 4px;
+    --mds-input-switch-box-padding-md: 4px;
+    --mds-input-switch-box-padding-sm: 4px;
+    --mds-input-switch-duration: 300ms;
+    --mds-input-switch-icon-color-checked: rgb(36 103 231);
+    --mds-input-switch-icon-color-checked-disabled: rgb(119 119 119);
+    --mds-input-switch-icon-color-indeterminate: rgb(119 119 119);
+    --mds-input-switch-icon-color-indeterminate-disabled: rgb(119 119 119);
+    --mds-input-switch-icon-color-unchecked: rgb(99 99 99);
+    --mds-input-switch-icon-color-unchecked-disabled: rgb(119 119 119);
+    --mds-input-switch-icon-explicit-color: rgb(36 103 231);
+    --mds-input-switch-toggle-color-disabled-checked: rgb(255 255 255);
+    --mds-input-switch-toggle-color-disabled-unchecked: rgb(255 255 255);
+    --mds-input-switch-toggle-color-enabled-checked: rgb(255 255 255);
+    --mds-input-switch-toggle-color-enabled-unchecked: rgb(237 237 237);
+    --mds-input-switch-toggle-container-size: calc( calc(24px * 2) + calc(4px * 2) );
+    --mds-input-switch-toggle-size: 24px;
+    --mds-input-switch-toggle-size-sm: 16px;
+    --mds-input-switch-toggle-size-md: 24px;
+    --mds-input-switch-toggle-size-lg: 32px;
+    --mds-input-switch-animation-timing-function: var(--ease-in-out-quad);
+
+    /* component: mds-input-tip */
+    --mds-input-tip-active-translate: translate(0, 0);
+    --mds-input-tip-transition-duration: var(--duration-300);
+
+    /* component: mds-input-tip-item */
+    --mds-input-tip-item-background: rgb(73 73 73);
+    --mds-input-tip-item-color: rgb(255 255 255);
+    --mds-input-tip-item-icon-color: rgb(255 255 255);
+    --mds-input-tip-item-transition-duration: var(--duration-300);
+    --mds-input-tip-item-content-transition-duration: var(--duration-200);
+
+    /* component: mds-input-upload */
+    --mds-input-upload-drag-area-background-color: rgb(255 255 255);
+    --mds-input-upload-drag-area-background-color-on-drag: rgb(237 237 237);
+    --mds-input-upload-min-cols: 3;
+    --mds-input-upload-drag-area-border-on-drag: 3px dashed rgb(var(--magma-border-strong));
+    --mds-input-upload-drag-area-border: 3px dashed rgb(var(--magma-border-default));
+
+    /* component: mds-keyboard */
+    --mds-keyboard-background: rgb(201 208 219);
+    --mds-keyboard-background-default: rgb(201 208 219);
+    --mds-keyboard-background-fail: rgb(255 214 211);
+    --mds-keyboard-background-pass: rgb(191 233 205);
+    --mds-keyboard-color: rgb(99 99 99);
+    --mds-keyboard-fill-fail: rgb(89 0 0);
+    --mds-keyboard-fill-pass: rgb(0 53 0);
+    --mds-keyboard-illumination-dark-opacity: 0.05;
+    --mds-keyboard-illumination-dark-size: 6px;
+    --mds-keyboard-illumination-light-opacity: 0.075;
+    --mds-keyboard-illumination-light-size: 1px;
+    --mds-keyboard-padding: 8px;
+    --mds-keyboard-spinner-duration: 1s;
+    --mds-keyboard-illumination-shadow: 0 0 3px 0 rgb(255 255 255 / 0.5);
+    --mds-keyboard-key-background: rgb(var(--tone-porcelain-06));
+    --mds-keyboard-key-illumination-dark-opacity: 0.5;
+    --mds-keyboard-key-illumination-light-opacity: 0.15;
+    --mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
+    --mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-illumination-dark-opacity)) inset;
+    --mds-keyboard-illumination-light: 0 var(--mds-keyboard-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-illumination-light-opacity)) inset;
+
+    /* component: mds-keyboard-key */
+    --mds-keyboard-key-illumination-dark-size: 6px;
+    --mds-keyboard-key-illumination-light-size: 2px;
+    --mds-keyboard-key-padding: 4px;
+    --mds-keyboard-key-transition-duration: 300ms;
+    --mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(0 0 0 / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
+    --mds-keyboard-key-illumination-light: 0 var(--mds-keyboard-key-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-key-illumination-light-opacity, 0.5)) inset;
+
+    /* component: mds-kpi */
+    --mds-kpi-text-animation-speed: 0.15;
+    --mds-kpi-text-animation-placeholder-char: ' ';
+
+    /* component: mds-kpi-item */
+    --mds-kpi-item-info-background: rgb(var(--magma-surface-raised));
+    --mds-kpi-item-icon-color: rgb(var(--magma-accent-emphasis));
+    --mds-kpi-item-text-animation-placeholder-char: var( --mds-kpi-text-animation-placeholder-char, ' ' );
+    --mds-kpi-item-text-animation-speed: var(--mds-kpi-text-animation-speed, 0.15);
+    --mds-kpi-item-transition-duration: var(--duration-300);
+    --mds-text-animation-speed: var(--mds-kpi-item-text-animation-speed);
+    --mds-text-animation-placeholder-char: var(--mds-kpi-item-text-animation-placeholder-char);
+
+    /* component: mds-label */
+    --mds-label-background: rgb(200 210 253);
+    --mds-label-button-background: transparent;
+    --mds-label-button-background-hover: rgb(200 210 253);
+    --mds-label-button-icon-color: rgb(63 94 248);
+    --mds-label-color: rgb(7 39 192);
+    --mds-label-icon-color: rgb(7 39 192);
+    --mds-label-selection-background: rgb(149 166 251);
+    --mds-label-selection-color: rgb(233 236 254);
+    --mds-text-selection-background: var(--mds-label-selection-background);
+    --mds-text-selection-color: var(--mds-label-selection-color);
+
+    /* component: mds-list-item */
+    --mds-list-item-icon-margin: 0 8px 0 0;
+
+    /* component: mds-mention */
+    --mds-mention-icon-size: 24px;
+
+    /* component: mds-modal */
+    --mds-modal-custom-closed-transform: rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);
+    --mds-modal-custom-window-distance: 24px;
+    --mds-modal-overlay-color: rgb(0 0 0);
+    --mds-modal-overlay-opacity: 0.5;
+    --mds-modal-transition-duration: 500ms;
+    --mds-modal-window-background: rgb(255 255 255);
+    --mds-modal-window-distance: 0;
+    --mds-modal-window-max-width: 33%;
+    --mds-modal-window-min-width: 400px;
+    --mds-modal-window-overflow: auto;
+    --mds-modal-window-radius: 0;
+    --mds-modal-z-index: 3000;
+    --mds-modal-window-height: auto;
+    --mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
+    --mds-modal-window-shadow: var(--shadow-ring-strong-2), var(--shadow-2xl);
+    --mds-modal-transition-timing-funciton: var(--ease-in-out-quint);
+
+    /* component: mds-note */
+    --mds-note-background: rgb(253 236 186);
+    --mds-note-color: rgb(87 67 3);
+    --mds-note-fold-color: rgb(237 237 237);
+    --mds-note-fold-size: 40px;
+    --mds-note-selection-background: rgb(185 231 251);
+    --mds-note-selection-color: rgb(4 48 68);
+    --mds-note-transition-duration: var(--duration-300);
+
+    /* component: mds-notification */
+    --mds-notification-color: rgb(255 255 255);
+    --mds-notification-dot-background: rgb(196 64 65);
+    --mds-notification-dot-padding: 6px;
+    --mds-notification-min-width: 20px;
+    --mds-notification-ring-color: rgb(255 255 255);
+    --mds-notification-ring-size: 2px;
+    --mds-notification-size: 20px;
+    --mds-notification-transition-duration: 200ms;
+    --mds-notification-translate: translate( calc(20px / -1.75), calc(20px / -2) );
+    --mds-notification-translate-offset-y: -2;
+    --mds-notification-translate-offset-x: -1.75;
+    --mds-notification-dot-transition-duration: var(--duration-300);
+    --mds-notification-transition-timing-function: var(--ease-out-cubic);
+
+    /* component: mds-paginator */
+    --mds-paginator-background: rgb(225 225 225);
+    --mds-paginator-scroll-behavior: smooth;
+    --mds-paginator-item-background-hover: rgb(var(--magma-surface-default));
+    --mds-paginator-item-shadow-hover: var(--shadow-ring-2) inset;
+    --mds-paginator-item-shadow: none;
+    --mds-paginator-item-shadow-disabled: var(--shadow-ring-2) inset;
+    --mds-paginator-transition-duration: var(--duration-200);
+
+    /* component: mds-paginator-item */
+    --mds-paginator-item-background: transparent;
+    --mds-paginator-item-background-disabled: rgb(225 225 225);
+    --mds-paginator-item-background-selected: rgb(7 76 204);
+    --mds-paginator-item-color: rgb(5 5 5);
+    --mds-paginator-item-color-disabled: rgb(119 119 119);
+    --mds-paginator-item-color-hover: rgb(5 5 5);
+    --mds-paginator-item-color-selected: rgb(255 255 255);
+    --mds-paginator-item-size: 36px;
+    --mds-paginator-item-radius: 200px;
+    --mds-paginator-item-shadow-selected: var(--shadow-md-sharp);
+    --mds-paginator-item-transition-duration: var(--duration-200);
+
+    /* component: mds-pref-animation */
+    --mds-tab-item-color: rgb(var(--magma-text-default));
+    --mds-tab-item-default-color: rgb(var(--magma-text-disabled));
+    --mds-tab-item-selected-color: rgb(var(--magma-text-muted));
+
+    /* component: mds-pref-mode */
+    --mds-pref-mode-overlay-fadeout-duration: 200ms;
+    --mds-pref-mode-overlay-show-duration: 300ms;
+    --mds-pref-mode-overlay-z-index: 7000;
+
+    /* component: mds-pref-theme-item */
+    --mds-pref-theme-item-color-background: rgb(225 225 225);
+    --mds-pref-theme-item-color-status-error: rgb(196 64 65);
+    --mds-pref-theme-item-color-status-success: rgb(0 128 57);
+    --mds-pref-theme-item-color-status-warning: rgb(142 106 0);
+    --mds-pref-theme-item-color-variant-primary: rgb(36 103 231);
+
+    /* component: mds-price-table-features */
+    --mds-price-table-features-border-color: rgb(219 219 219);
+    --mds-price-table-features-padding: --spacing(300);
+    --mds-price-table-features-transition-duration: var(--duration-200);
+
+    /* component: mds-price-table-features-cell */
+    --mds-price-table-features-cell-border-color: rgb(219 219 219);
+    --mds-price-table-features-cell-icon-supported-color: rgb(34 195 93);
+    --mds-price-table-features-cell-icon-unsupported-color: rgb(119 119 119);
+    --mds-price-table-features-cell-padding: 12px;
+    --mds-price-table-features-cell-icon-supported-color-hover: rgb(var(--label-green-01));
+    --mds-price-table-features-cell-icon-unsupported-color-hover: rgb(var(--magma-text-default));
+    --mds-price-table-features-cell-transition-duration: var(--duration-200);
+
+    /* component: mds-price-table-features-row */
+    --mds-price-table-features-row-background: transparent;
+    --mds-price-table-features-row-background-hover: rgb(237 237 237);
+    --mds-price-table-features-row-color: rgb(99 99 99);
+    --mds-price-table-features-row-color-hover: rgb(5 5 5);
+    --mds-price-table-features-row-transition-duration: var(--duration-200);
+
+    /* component: mds-price-table-list */
+    --mds-price-table-list-separator-color: rgb(73 73 73 / 0.5);
+    --mds-price-table-list-transition-duration: var(--duration-200);
+
+    /* component: mds-price-table-list-item */
+    --mds-price-table-list-item-supported-icon-color: rgb(34 195 93);
+    --mds-price-table-list-item-supported-icon-color-hover: rgb(26 148 71);
+    --mds-price-table-list-item-unsupported-icon-color: rgb(119 119 119);
+
+    /* component: mds-progress */
+    --mds-progress-duration: 750ms;
+    --mds-progress-radius: 28px;
+    --mds-progress-transition-duration: var(--duration-300);
+
+    /* component: mds-push-notification */
+    --mds-push-notification-fadeout-delay: 0s;
+    --mds-push-notification-gap: 8px;
+    --mds-push-notification-items-duration: 300ms;
+    --mds-push-notification-items-intro-delay: 300ms;
+    --mds-push-notification-items-outro-delay: 0ms;
+    --mds-push-notification-background: linear-gradient( to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.5) 20%, rgb(0 0 0 / 0.85) 100% );
+    --mds-push-notification-items-gap: var(--mds-push-notification-gap);
+    --mds-push-notification-items-timing-function: var(--ease-in-out-quint);
+    --mds-push-notification-item-duration: var(--mds-push-notification-items-duration);
+    --mds-push-notification-item-timing-function: var(--mds-push-notification-items-timing-function);
+
+    /* component: mds-push-notification-item */
+    --mds-push-notification-item-icon-background-color: transparent;
+    --mds-push-notification-item-icon-color: rgb(99 99 99);
+    --mds-push-notification-item-message-line-clamp: 2;
+    --mds-push-notification-item-subject-line-clamp: 1;
+    --mds-push-notification-item-shadow: var(--shadow-ring-strong-2) inset;
+
+    /* component: mds-radial-menu */
+    --mds-radial-menu-angle-start: 0deg;
+    --mds-radial-menu-angle-end: 360deg;
+    --mds-radial-menu-context-menu-z-index: 8000;
+    --mds-radial-menu-delay: 0.01s;
+    --mds-radial-menu-direction: -1;
+    --mds-radial-menu-disc-background: rgb(255 255 255 / 0.5);
+    --mds-radial-menu-disc-size: calc(80px * 2);
+    --mds-radial-menu-radius: 80px;
+    --mds-radial-menu-disc-scale: 0;
+    --mds-radial-menu-disc-delay: calc( (var(--mds-radial-menu-nth-siblings) + 1) * var(--mds-radial-menu-delay) );
+    --mds-radial-menu-disc-filter: blur(8px);
+    --mds-radial-menu-disc-shadow: var(--shadow-lg-sharp);
+    --mds-radial-menu-transition-duration: 500ms;
+    --mds-radial-menu-transition-timing-function: var(--ease-out-expo);
+    --mds-radial-menu-nth-siblings: 0;
+    --mds-radial-menu-radius-current: 0;
+    --mds-radial-menu-is-full-circle: 1;
+    --mds-radial-menu-is-start-greater-than-end: 1;
+    --mds-radial-menu-item-offset-per-child: calc( (var(--mds-radial-menu-angle-end) - var(--mds-radial-menu-angle-start)) / (var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)) );
+    --mds-radial-menu-item-angle-offset: calc( var(--mds-radial-menu-direction) * var(--mds-radial-menu-item-index) * var(--mds-radial-menu-item-offset-per-child) );
+    --mds-radial-menu-item-delay: calc( (var(--mds-radial-menu-item-index) + 1) * var(--mds-radial-menu-delay) );
+    --mds-radial-menu-item-translate: calc( cos((var(--mds-radial-menu-angle-start) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) ) calc( sin((var(--mds-radial-menu-angle-start) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) * -1 );
+
+    /* component: mds-radial-menu-item */
+    --mds-radial-menu-item-transition-duration: 500ms;
+    --mds-radial-menu-item-transition-timing-function: var( --mds-radial-menu-transition-timing-function, var(--ease-out-expo) );
+    --mds-radial-menu-item-index: 0;
+
+    /* component: mds-radial-progress */
+    --mds-radial-progress: 0%;
+    --mds-radial-progress-color: rgb(var(--magma-danger-text-default));
+    --mds-radial-progress-background: rgb(var(--magma-danger-wash-base));
+    --mds-radial-progress-text-background: rgb(var(--magma-on-inverse) / 0.15);
+    --mds-radial-progress-text-background-shadow: var(--shadow-sm-sharp);
+    --mds-radial-progress-text-suffix: '%';
+
+    /* component: mds-separator */
+    --mds-separator-background: rgb(196 196 196);
+
+    /* component: mds-status-bar */
+    --mds-status-bar-backdrop: rgb(5 5 5 / 0.1);
+    --mds-status-bar-max-width: 500px;
+    --mds-status-bar-backdrop-filter: none;
+
+    /* component: mds-stepper-bar */
+    --mds-stepper-bar-offset-margin: 0;
+    --mds-stepper-bar-scroll-behavior: smooth;
+    --mds-stepper-bar-scrollbar-margin: 0;
+    --mds-stepper-bar-scrollbar-radius: 0;
+    --mds-stepper-bar-scrollbar-size: 8px;
+    --mds-stepper-bar-scrollbar-thumb-background: rgb(140 140 140);
+    --mds-stepper-bar-scrollbar-track-background: rgb(208 208 208);
+    --mds-stepper-bar-gap: --spacing(50);
+
+    /* component: mds-stepper-bar-item */
+    --mds-stepper-bar-item-color: rgb(73 73 73);
+    --mds-stepper-bar-item-duration: 250ms;
+    --mds-stepper-bar-item-icon-background: rgb(208 208 208);
+    --mds-stepper-bar-item-icon-background-current: rgb(36 103 231);
+    --mds-stepper-bar-item-icon-background-done: rgb(0 128 57);
+    --mds-stepper-bar-item-icon-color: rgb(99 99 99);
+    --mds-stepper-bar-item-icon-color-current: rgb(255 255 255);
+    --mds-stepper-bar-item-icon-color-done: rgb(255 255 255);
+    --mds-stepper-bar-item-min-width: 180px;
+    --mds-stepper-bar-item-progress-background: rgb(208 208 208);
+    --mds-stepper-bar-item-progress-color: rgb(0 128 57);
+    --mds-stepper-bar-item-progress-thickness: 8px;
+    --mds-stepper-bar-item-header-gap: var(--mds-stepper-bar-gap, --spacing(50));
+    --mds-stepper-bar-item-transition-duration: var(--duration-200);
+
+    /* component: mds-tab */
+    --mds-tab-direction-vertical-columns: auto auto;
+    --mds-tab-scroll-scrollbar-margin: 0;
+    --mds-tab-scroll-scrollbar-radius: 0;
+    --mds-tab-scroll-scrollbar-size: 8px;
+    --mds-tab-scroll-scrollbar-thumb-background: rgb(42 42 42 / 0.3);
+    --mds-tab-scroll-scrollbar-track-background: rgb(225 225 225);
+    --mds-tab-slide-delay: 0.125s;
+    --mds-tab-tabs-background: rgb(237 237 237);
+    --mds-tab-tabs-gap: 8px;
+    --mds-tab-tabs-overflow-shadow-size: 24px;
+    --mds-tab-tabs-padding: 8px;
+    --mds-tab-tabs-radius: 40px;
+    --mds-tab-tabs-wrapper-margin: 0;
+    --mds-tab-tabs-wrapper-outline-opacity: 0.7;
+    --mds-tab-tabs-wrapper-shadow-color: rgb(237 237 237);
+    --mds-tab-transition-duration: 0.5s;
+    --mds-tab-slider-offset-x: 0;
+    --mds-tab-slider-offset-y: 0;
+    --mds-tab-slider-width: 0;
+    --mds-tab-slider-height: 0;
+    --mds-tab-item-selected-shadow: var(--shadow-ring-2);
+    --mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color) inset;
+    --mds-tab-item-selected-background: rgb(var(--magma-wash-strong));
+    --mds-tab-item-default-background: transparent;
+    --mds-tab-item-default-shadow: transparent;
+    --mds-tab-item-hover-background: transparent;
+    --mds-tab-item-hover-color: rgb(var(--magma-text-default));
+    --mds-tab-item-hover-shadow: transparent;
+    --mds-tab-item-radius: calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding));
+    --mds-tab-scroll-behavior: smooth;
+    --mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) -2px rgb(0 0 0 / 0.375);
+    --mds-tab-transition-timing-function: var(--ease-out-expo);
+    --mds-tab-corner-shape: var(--magma-corner-shape);
+    --mds-tab-contents-height: auto;
+
+    /* component: mds-tab-bar */
+    --mds-tab-bar-transition-duration: var(--duration-200);
+
+    /* component: mds-tab-bar-item */
+    --mds-tab-bar-item-background: rgb(237 237 237);
+    --mds-tab-bar-item-background-selected: transparent;
+    --mds-tab-bar-item-color: rgb(99 99 99);
+    --mds-tab-bar-item-color-selected: rgb(7 76 204);
+    --mds-tab-bar-item-transition-duration: var(--duration-200);
+
+    /* component: mds-tab-item */
+    --mds-button-corner-shape: var(--mds-tab-item-corner-shape, var(--magma-corner-shape));
+
+    /* component: mds-table */
+    --mds-table-border-color: rgb(196 196 196);
+    --mds-table-background: rgb(var(--magma-wash-strong));
+    --mds-table-body-background-hover: rgb(var(--magma-surface-default));
+    --mds-table-color: rgb(var(--magma-text-default));
+    --mds-table-body-background: var(--mds-table-body-background-hover);
+    --mds-table-transition-duration: var(--duration-300);
+    --mds-table-actions-gap: --spacing(200);
+    --mds-table-background-alt: rgb(var(--magma-surface-raised));
+    --mds-table-border-width: 2px;
+    --mds-table-cell-padding: --spacing(400);
+    --mds-table-color-alt: rgb(var(--magma-text-muted));
+    --mds-table-batch-actions-width: --spacing(4800);
+
+    /* component: mds-table-body */
+    --mds-table-body-background-alt: rgb(248 248 248);
+    --mds-table-body-color: rgb(5 5 5);
+    --mds-table-body-color-alt: rgb(73 73 73);
+    --mds-table-row-background: var(--mds-table-body-background-hover);
+    --mds-table-row-color: var(--mds-table-body-color-alt);
+    --mds-table-body-transition-duration: var(--duration-200);
+
+    /* component: mds-table-cell */
+    --mds-table-cell-background: var(--mds-table-cell-background-alt);
+    --mds-table-cell-color: var(--mds-table-cell-color-alt);
+    --mds-table-cell-background-alt: var(--mds-table-row-background-alt);
+    --mds-table-cell-color-alt: var(--mds-table-row-color-alt);
+    --mds-table-cell-transition-duration: var(--duration-200);
+
+    /* component: mds-table-footer */
+    --mds-table-footer-transition-duration: var(--duration-200);
+
+    /* component: mds-table-header */
+    --mds-table-header-transition-duration: var(--duration-200);
+
+    /* component: mds-table-header-cell */
+    --mds-table-header-cell-transition-duration: var(--duration-200);
+
+    /* component: mds-table-row */
+    --mds-table-row-actions-gap: 16px;
+    --mds-table-row-background-hover: rgb(242 242 242);
+    --mds-table-row-color-hover: rgb(5 5 5);
+    --mds-table-row-actions-background: var(--mds-table-row-background);
+    --mds-table-row-color-alt: var(--mds-table-color-alt, rgb(var(--magma-text-default)));
+    --mds-table-row-background-alt: var(--mds-table-background-alt, rgb(var(--magma-surface-default)));
+    --mds-table-row-transition-duration: var(--duration-200);
+
+    /* component: mds-text */
+    --mds-text-transition-duration: var(--duration-200);
+
+    /* component: mds-toast */
+    --mds-toast-background: rgb(42 42 42);
+    --mds-toast-color: rgb(255 255 255);
+    --mds-toast-duration: 300ms;
+    --mds-toast-icon-color: rgb(255 255 255);
+    --mds-toast-width: auto;
+    --mds-toast-shadow: var(--shadow-ring-strong-2);
+
+    /* component: mds-tooltip */
+    --mds-tooltip-arrow-background: rgb(255 255 255);
+    --mds-tooltip-background: rgb(255 255 255);
+    --mds-tooltip-dot-padding: 4px;
+    --mds-tooltip-duration: 0.5s;
+    --mds-tooltip-transform-from: scale(0.9) translateY(calc(16px * -1));
+    --mds-tooltip-transform-to: scale(1) translate(0, 0);
+    --mds-tooltip-z-index: 6000;
+    --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.075)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45)) drop-shadow(0 0 4px rgb(var(--magma-shadow-ink) / 0.45));
+    --mds-tooltip-ease: var(--ease-out-expo);
+
+    /* component: mds-tree */
+    --mds-tree-branch-use-rounded-border: true;
+    --mds-tree-toggle-icon-chevron-expanded-background: rgb(36 103 231);
+    --mds-tree-toggle-icon-chevron-expanded-color: rgb(255 255 255);
+    --mds-tree-toggle-icon-folder-expanded-color: rgb(36 103 231);
+    --mds-tree-actions-border-radius: var(--radius-lg);
+    --mds-tree-actions-gap: --spacing(50);
+    --mds-tree-label-default-background: transparent;
+    --mds-tree-label-hover-background: rgb(var(--magma-wash-soft));
+    --mds-tree-label-icon-default-color: rgb(var(--magma-accent-emphasis));
+    --mds-tree-label-icon-hover-color: var(--mds-tree-label-icon-default-color);
+    --mds-tree-line-clamp: 2;
+    --mds-tree-branch-border-color: rgb(var(--magma-border-default));
+    --mds-tree-branch-border-size: --spacing(50);
+    --mds-tree-branch-dot-default-color: rgb(var(--magma-border-default));
+    --mds-tree-branch-dot-expanded-color: rgb(var(--magma-border-strong));
+    --mds-tree-toggle-gap: --spacing(150);
+    --mds-tree-toggle-icon-async-background: rgb(var(--magma-wash-base));
+    --mds-tree-toggle-icon-async-color: rgb(var(--magma-accent-fg));
+    --mds-tree-toggle-icon-chevron-default-background: rgb(var(--magma-accent-emphasis));
+    --mds-tree-toggle-icon-chevron-default-color: rgb(var(--magma-text-on-emphasis));
+    --mds-tree-toggle-icon-folder-default-background: rgb(var(--magma-wash-strong));
+    --mds-tree-toggle-icon-folder-default-color: rgb(var(--magma-accent-emphasis));
+    --mds-tree-toggle-icon-position-right-default-background: transparent;
+    --mds-tree-toggle-icon-position-right-default-color: rgb(var(--magma-text-subtle));
+    --mds-tree-toggle-icon-position-right-expanded-background: transparent;
+    --mds-tree-toggle-icon-position-right-expanded-color: rgb(var(--magma-text-subtle));
+    --mds-tree-transition-duration: 300ms;
+    --mds-tree-transition-timing-function: var(--ease-in-out-expo);
+    --mds-tree-toggle-border-radius: var(--radius-lg);
+    --mds-tree-toggle-size: --spacing(900);
+
+    /* component: mds-tree-item */
+    --mds-tree-item-branch-border-radius: 16px;
+    --mds-tree-item-children-padding-left: calc( calc(var(--mds-tree-item-toggle-size) - var(--mds-tree-item-branch-border-size)) / 2 );
+    --mds-tree-item-icon-background-color: var( --mds-tree-item-toggle-icon-chevron-default-background );
+    --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color);
+    --mds-tree-branch-border-radius: var(--radius-lg);
+    --mds-tree-item-actions-border-radius: var(--mds-tree-actions-border-radius);
+    --mds-tree-item-actions-gap: var(--mds-tree-actions-gap);
+    --mds-tree-item-branch-border-color: var(--mds-tree-branch-border-color);
+    --mds-tree-item-branch-border-size: var(--mds-tree-branch-border-size);
+    --mds-tree-item-branch-dot-default-color: var(--mds-tree-branch-dot-default-color);
+    --mds-tree-item-branch-dot-expanded-color: var(--mds-tree-branch-dot-expanded-color);
+    --mds-tree-item-label-default-background: var(--mds-tree-label-default-background);
+    --mds-tree-item-label-hover-background: var(--mds-tree-label-hover-background);
+    --mds-tree-item-label-icon-default-color: var(--mds-tree-label-icon-default-color);
+    --mds-tree-item-label-icon-hover-color: var(--mds-tree-label-icon-hover-color);
+    --mds-tree-item-line-clamp: var(--mds-tree-line-clamp);
+    --mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap);
+    --mds-tree-item-toggle-icon-async-background: var(--mds-tree-toggle-icon-async-background);
+    --mds-tree-item-toggle-icon-async-color: var(--mds-tree-toggle-icon-async-color);
+    --mds-tree-item-toggle-icon-chevron-default-background: var( --mds-tree-toggle-icon-chevron-default-background );
+    --mds-tree-item-toggle-icon-chevron-default-color: var( --mds-tree-toggle-icon-chevron-default-color );
+    --mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-item-toggle-icon-chevron-default-background );
+    --mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-item-toggle-icon-chevron-default-color );
+    --mds-tree-item-toggle-icon-folder-default-background: var( --mds-tree-toggle-icon-folder-default-background );
+    --mds-tree-item-toggle-icon-folder-default-color: var( --mds-tree-toggle-icon-folder-default-color );
+    --mds-tree-item-toggle-icon-folder-expanded-background: var( --mds-tree-item-toggle-icon-folder-default-background );
+    --mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-item-toggle-icon-folder-default-color );
+    --mds-tree-item-toggle-icon-position-right-default-background: var( --mds-tree-toggle-icon-position-right-default-background );
+    --mds-tree-item-toggle-icon-position-right-default-color: var( --mds-tree-toggle-icon-position-right-default-color );
+    --mds-tree-item-toggle-icon-position-right-expanded-background: var( --mds-tree-toggle-icon-position-right-expanded-background );
+    --mds-tree-item-toggle-icon-position-right-expanded-color: var( --mds-tree-toggle-icon-position-right-expanded-color );
+    --mds-tree-item-toggle-size: var(--mds-tree-toggle-size);
+    --mds-tree-item-transition-duration: var(--mds-tree-transition-duration);
+    --mds-tree-item-transition-timing-function: var(--mds-tree-transition-timing-function);
+
+    /* component: mds-url-view */
+    --mds-url-view-background: rgb(237 237 237);
+    --mds-url-view-color: rgb(5 5 5);
+    --mds-url-view-radius: 12px;
+    --mds-url-view-shadow: var(--shadow-ring-2);
+    --mds-url-view-transition-duration: var(--duration-200);
+    --mds-url-view-header-shadow: var(--shadow-sm-sharp);
+
+    /* component: mds-usage */
+    --mds-usage-border-color: rgb(18 154 196);
+    --mds-usage-header-background: rgb(18 154 196);
+    --mds-usage-header-color: rgb(255 255 255);
+    --mds-usage-transition-duration: var(--duration-200);
+
+    /* component: mds-video-wall */
+    --mds-video-wall-noise-background-color: rgb(7 76 204 / 0.8);
+    --mds-video-wall-noise-background-size: auto;
+    --mds-video-wall-video-fit: cover;
+    --mds-video-wall-noise-filter: none;
+
+    /* component: mds-zero */
+    --mds-zero-contents-max-width: 400px;
+    --mds-zero-transition-duration: var(--duration-200);
+  }
+}