@felleslosninger/minid-elements 0.0.138 → 0.1.0

package/dist/theme.css

@@ -0,0 +1,1155 @@
+@charset "UTF-8";
+/*
+build: v1.13.2
+design-tokens: v1.13.2
+*/
+
+@layer ds.theme.size-mode {
+:root /* small */ {
+  --ds-size-mode-font-size--sm: 1;
+}
+}
+
+@layer ds.theme.size-mode {
+:root /* medium */ {
+  --ds-size-mode-font-size--md: 1.125;
+}
+}
+
+@layer ds.theme.size-mode {
+:root /* large */ {
+  --ds-size-mode-font-size--lg: 1.3125;
+}
+}
+
+@layer ds.theme.size-mode {
+:root, [data-size] {
+  --ds-size: var(--ds-size--md);
+  --ds-size--sm: var(--ds-size,);
+  --ds-size--md: var(--ds-size,);
+  --ds-size--lg: var(--ds-size,);
+  --ds-size-mode-font-size:
+    var(--ds-size--sm, var(--ds-size-mode-font-size--sm))
+    var(--ds-size--md, var(--ds-size-mode-font-size--md))
+    var(--ds-size--lg, var(--ds-size-mode-font-size--lg));
+}
+
+[data-size='sm'] { --ds-size: var(--ds-size--sm); }
+[data-size='md'] { --ds-size: var(--ds-size--md); }
+[data-size='lg'] { --ds-size: var(--ds-size--lg); }
+}
+
+@layer ds.theme.type-scale {
+:root, [data-size] {
+  --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / 16));
+  --ds-font-size-1: calc(0.75rem * var(--_ds-font-size-factor));
+  --ds-font-size-2: calc(0.875rem * var(--_ds-font-size-factor));
+  --ds-font-size-3: calc(1rem * var(--_ds-font-size-factor));
+  --ds-font-size-4: calc(1.125rem * var(--_ds-font-size-factor));
+  --ds-font-size-5: calc(1.3125rem * var(--_ds-font-size-factor));
+  --ds-font-size-6: calc(1.5rem * var(--_ds-font-size-factor));
+  --ds-font-size-7: calc(1.875rem * var(--_ds-font-size-factor));
+  --ds-font-size-8: calc(2.25rem * var(--_ds-font-size-factor));
+  --ds-font-size-9: calc(3rem * var(--_ds-font-size-factor));
+  --ds-font-size-10: calc(3.75rem * var(--_ds-font-size-factor));
+  --ds-heading-2xl-font-size: var(--ds-font-size-10);
+  --ds-heading-xl-font-size: var(--ds-font-size-9);
+  --ds-heading-lg-font-size: var(--ds-font-size-8);
+  --ds-heading-md-font-size: var(--ds-font-size-7);
+  --ds-heading-sm-font-size: var(--ds-font-size-6);
+  --ds-heading-xs-font-size: var(--ds-font-size-5);
+  --ds-heading-2xs-font-size: var(--ds-font-size-4);
+  --ds-body-xl-font-size: var(--ds-font-size-6);
+  --ds-body-lg-font-size: var(--ds-font-size-5);
+  --ds-body-md-font-size: var(--ds-font-size-4);
+  --ds-body-sm-font-size: var(--ds-font-size-3);
+  --ds-body-xs-font-size: var(--ds-font-size-2);
+  --ds-body-short-xl-font-size: var(--ds-font-size-6);
+  --ds-body-short-lg-font-size: var(--ds-font-size-5);
+  --ds-body-short-md-font-size: var(--ds-font-size-4);
+  --ds-body-short-sm-font-size: var(--ds-font-size-3);
+  --ds-body-short-xs-font-size: var(--ds-font-size-2);
+  --ds-body-long-xl-font-size: var(--ds-font-size-6);
+  --ds-body-long-lg-font-size: var(--ds-font-size-5);
+  --ds-body-long-md-font-size: var(--ds-font-size-4);
+  --ds-body-long-sm-font-size: var(--ds-font-size-3);
+  --ds-body-long-xs-font-size: var(--ds-font-size-2);
+
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-font-size-1: round(calc(0.75rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-2: round(calc(0.875rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-3: round(calc(1rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-4: round(calc(1.125rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-5: round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-6: round(calc(1.5rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-7: round(calc(1.875rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-8: round(calc(2.25rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-9: round(calc(3rem * var(--_ds-font-size-factor)), 1px);
+    --ds-font-size-10: round(calc(3.75rem * var(--_ds-font-size-factor)), 1px);
+  }
+}
+}
+@layer ds.theme.color-scheme.light {
+:root, [data-color-scheme="light"] {
+  --ds-color-accent-background-default: #ffffff;
+  --ds-color-accent-background-tinted: #eef4fa;
+  --ds-color-accent-surface-default: #ffffff;
+  --ds-color-accent-surface-tinted: #ddeaf6;
+  --ds-color-accent-surface-hover: #c7ddf0;
+  --ds-color-accent-surface-active: #afcee9;
+  --ds-color-accent-border-subtle: #99c0e3;
+  --ds-color-accent-border-default: #2a7cc5;
+  --ds-color-accent-border-strong: #005db1;
+  --ds-color-accent-text-subtle: #005db1;
+  --ds-color-accent-text-default: #002c54;
+  --ds-color-accent-base-default: #0062BA;
+  --ds-color-accent-base-hover: #004f96;
+  --ds-color-accent-base-active: #003d75;
+  --ds-color-accent-base-contrast-subtle: #dbe9f5;
+  --ds-color-accent-base-contrast-default: #ffffff;
+  --ds-color-neutral-background-default: #ffffff;
+  --ds-color-neutral-background-tinted: #f3f4f4;
+  --ds-color-neutral-surface-default: #ffffff;
+  --ds-color-neutral-surface-tinted: #e7e9ea;
+  --ds-color-neutral-surface-hover: #d8dadd;
+  --ds-color-neutral-surface-active: #c7cacf;
+  --ds-color-neutral-border-subtle: #b8bcc1;
+  --ds-color-neutral-border-default: #717a84;
+  --ds-color-neutral-border-strong: #545e6b;
+  --ds-color-neutral-text-subtle: #545e6b;
+  --ds-color-neutral-text-default: #1f2c3d;
+  --ds-color-neutral-base-default: #1E2B3C;
+  --ds-color-neutral-base-hover: #313d4d;
+  --ds-color-neutral-base-active: #444f5d;
+  --ds-color-neutral-base-contrast-subtle: #babec4;
+  --ds-color-neutral-base-contrast-default: #ffffff;
+  --ds-color-brand1-background-default: #ffffff;
+  --ds-color-brand1-background-tinted: #fef0f1;
+  --ds-color-brand1-surface-default: #ffffff;
+  --ds-color-brand1-surface-tinted: #fde2e3;
+  --ds-color-brand1-surface-hover: #fccfd1;
+  --ds-color-brand1-surface-active: #fababc;
+  --ds-color-brand1-border-subtle: #f9a5a8;
+  --ds-color-brand1-border-default: #cb4f53;
+  --ds-color-brand1-border-strong: #9e3d40;
+  --ds-color-brand1-text-subtle: #9e3d40;
+  --ds-color-brand1-text-default: #4b1d1e;
+  --ds-color-brand1-base-default: #F45F63;
+  --ds-color-brand1-base-hover: #f78588;
+  --ds-color-brand1-base-active: #f9a6a8;
+  --ds-color-brand1-base-contrast-subtle: #020101;
+  --ds-color-brand1-base-contrast-default: #000000;
+  --ds-color-brand2-background-default: #ffffff;
+  --ds-color-brand2-background-tinted: #fbf3df;
+  --ds-color-brand2-surface-default: #ffffff;
+  --ds-color-brand2-surface-tinted: #f8e7c1;
+  --ds-color-brand2-surface-hover: #f3d797;
+  --ds-color-brand2-surface-active: #edc567;
+  --ds-color-brand2-border-subtle: #e8b43a;
+  --ds-color-brand2-border-default: #9a7216;
+  --ds-color-brand2-border-strong: #775811;
+  --ds-color-brand2-text-subtle: #775811;
+  --ds-color-brand2-text-default: #382908;
+  --ds-color-brand2-base-default: #E5AA20;
+  --ds-color-brand2-base-hover: #c9951c;
+  --ds-color-brand2-base-active: #af8218;
+  --ds-color-brand2-base-contrast-subtle: #2c2006;
+  --ds-color-brand2-base-contrast-default: #000000;
+  --ds-color-brand3-background-default: #ffffff;
+  --ds-color-brand3-background-tinted: #eaf5fe;
+  --ds-color-brand3-surface-default: #ffffff;
+  --ds-color-brand3-surface-tinted: #d5ecfd;
+  --ds-color-brand3-surface-hover: #b9dffc;
+  --ds-color-brand3-surface-active: #99d0fa;
+  --ds-color-brand3-border-subtle: #7bc3f9;
+  --ds-color-brand3-border-default: #197dc9;
+  --ds-color-brand3-border-strong: #13619c;
+  --ds-color-brand3-text-subtle: #13619c;
+  --ds-color-brand3-text-default: #092d49;
+  --ds-color-brand3-base-default: #1E98F5;
+  --ds-color-brand3-base-hover: #53b0f7;
+  --ds-color-brand3-base-active: #81c5f9;
+  --ds-color-brand3-base-contrast-subtle: #010507;
+  --ds-color-brand3-base-contrast-default: #000000;
+  --ds-color-info-background-default: #ffffff;
+  --ds-color-info-background-tinted: #edf5fa;
+  --ds-color-info-surface-default: #ffffff;
+  --ds-color-info-surface-tinted: #dcebf6;
+  --ds-color-info-surface-hover: #c5ddf0;
+  --ds-color-info-surface-active: #abcfe9;
+  --ds-color-info-border-subtle: #94c1e3;
+  --ds-color-info-border-default: #1f7dc5;
+  --ds-color-info-border-strong: #0860a3;
+  --ds-color-info-text-subtle: #0860a3;
+  --ds-color-info-text-default: #042d4d;
+  --ds-color-info-base-default: #0A71C0;
+  --ds-color-info-base-hover: #085d9f;
+  --ds-color-info-base-active: #074a7e;
+  --ds-color-info-base-contrast-subtle: #eff6fb;
+  --ds-color-info-base-contrast-default: #ffffff;
+  --ds-color-success-background-default: #ffffff;
+  --ds-color-success-background-tinted: #ecf6ee;
+  --ds-color-success-surface-default: #ffffff;
+  --ds-color-success-surface-tinted: #daeddd;
+  --ds-color-success-surface-hover: #c3e2c7;
+  --ds-color-success-surface-active: #a8d5ae;
+  --ds-color-success-border-subtle: #8fc997;
+  --ds-color-success-border-default: #108c22;
+  --ds-color-success-border-strong: #056d13;
+  --ds-color-success-text-subtle: #056d13;
+  --ds-color-success-text-default: #023409;
+  --ds-color-success-base-default: #068718;
+  --ds-color-success-base-hover: #057014;
+  --ds-color-success-base-active: #045a10;
+  --ds-color-success-base-contrast-subtle: #fafdfb;
+  --ds-color-success-base-contrast-default: #ffffff;
+  --ds-color-warning-background-default: #ffffff;
+  --ds-color-warning-background-tinted: #fcf2e2;
+  --ds-color-warning-surface-default: #ffffff;
+  --ds-color-warning-surface-tinted: #fae6c6;
+  --ds-color-warning-surface-hover: #f6d5a0;
+  --ds-color-warning-surface-active: #f2c275;
+  --ds-color-warning-border-subtle: #eeb04c;
+  --ds-color-warning-border-default: #a56d13;
+  --ds-color-warning-border-strong: #80540f;
+  --ds-color-warning-text-subtle: #80540f;
+  --ds-color-warning-text-default: #3c2807;
+  --ds-color-warning-base-default: #EA9B1B;
+  --ds-color-warning-base-hover: #cd8818;
+  --ds-color-warning-base-active: #b27614;
+  --ds-color-warning-base-contrast-subtle: #271a04;
+  --ds-color-warning-base-contrast-default: #000000;
+  --ds-color-danger-background-default: #ffffff;
+  --ds-color-danger-background-tinted: #fbf1f1;
+  --ds-color-danger-surface-default: #ffffff;
+  --ds-color-danger-surface-tinted: #f8e4e4;
+  --ds-color-danger-surface-hover: #f3d2d2;
+  --ds-color-danger-surface-active: #edbfbf;
+  --ds-color-danger-border-subtle: #e8adad;
+  --ds-color-danger-border-default: #ce4d4d;
+  --ds-color-danger-border-strong: #b81a1a;
+  --ds-color-danger-text-subtle: #b81a1a;
+  --ds-color-danger-text-default: #590d0d;
+  --ds-color-danger-base-default: #C01B1B;
+  --ds-color-danger-base-hover: #9b1616;
+  --ds-color-danger-base-active: #791111;
+  --ds-color-danger-base-contrast-subtle: #f7e1e1;
+  --ds-color-danger-base-contrast-default: #ffffff;
+  --ds-color-focus-inner: #ffffff;
+  --ds-color-focus-outer: #1f2c3d;
+  --ds-link-color-visited: #663299;
+
+  color-scheme: light;
+}
+ 
+@media (prefers-color-scheme: light) {
+  [data-color-scheme="auto"] {
+  --ds-color-accent-background-default: #ffffff;
+  --ds-color-accent-background-tinted: #eef4fa;
+  --ds-color-accent-surface-default: #ffffff;
+  --ds-color-accent-surface-tinted: #ddeaf6;
+  --ds-color-accent-surface-hover: #c7ddf0;
+  --ds-color-accent-surface-active: #afcee9;
+  --ds-color-accent-border-subtle: #99c0e3;
+  --ds-color-accent-border-default: #2a7cc5;
+  --ds-color-accent-border-strong: #005db1;
+  --ds-color-accent-text-subtle: #005db1;
+  --ds-color-accent-text-default: #002c54;
+  --ds-color-accent-base-default: #0062BA;
+  --ds-color-accent-base-hover: #004f96;
+  --ds-color-accent-base-active: #003d75;
+  --ds-color-accent-base-contrast-subtle: #dbe9f5;
+  --ds-color-accent-base-contrast-default: #ffffff;
+  --ds-color-neutral-background-default: #ffffff;
+  --ds-color-neutral-background-tinted: #f3f4f4;
+  --ds-color-neutral-surface-default: #ffffff;
+  --ds-color-neutral-surface-tinted: #e7e9ea;
+  --ds-color-neutral-surface-hover: #d8dadd;
+  --ds-color-neutral-surface-active: #c7cacf;
+  --ds-color-neutral-border-subtle: #b8bcc1;
+  --ds-color-neutral-border-default: #717a84;
+  --ds-color-neutral-border-strong: #545e6b;
+  --ds-color-neutral-text-subtle: #545e6b;
+  --ds-color-neutral-text-default: #1f2c3d;
+  --ds-color-neutral-base-default: #1E2B3C;
+  --ds-color-neutral-base-hover: #313d4d;
+  --ds-color-neutral-base-active: #444f5d;
+  --ds-color-neutral-base-contrast-subtle: #babec4;
+  --ds-color-neutral-base-contrast-default: #ffffff;
+  --ds-color-brand1-background-default: #ffffff;
+  --ds-color-brand1-background-tinted: #fef0f1;
+  --ds-color-brand1-surface-default: #ffffff;
+  --ds-color-brand1-surface-tinted: #fde2e3;
+  --ds-color-brand1-surface-hover: #fccfd1;
+  --ds-color-brand1-surface-active: #fababc;
+  --ds-color-brand1-border-subtle: #f9a5a8;
+  --ds-color-brand1-border-default: #cb4f53;
+  --ds-color-brand1-border-strong: #9e3d40;
+  --ds-color-brand1-text-subtle: #9e3d40;
+  --ds-color-brand1-text-default: #4b1d1e;
+  --ds-color-brand1-base-default: #F45F63;
+  --ds-color-brand1-base-hover: #f78588;
+  --ds-color-brand1-base-active: #f9a6a8;
+  --ds-color-brand1-base-contrast-subtle: #020101;
+  --ds-color-brand1-base-contrast-default: #000000;
+  --ds-color-brand2-background-default: #ffffff;
+  --ds-color-brand2-background-tinted: #fbf3df;
+  --ds-color-brand2-surface-default: #ffffff;
+  --ds-color-brand2-surface-tinted: #f8e7c1;
+  --ds-color-brand2-surface-hover: #f3d797;
+  --ds-color-brand2-surface-active: #edc567;
+  --ds-color-brand2-border-subtle: #e8b43a;
+  --ds-color-brand2-border-default: #9a7216;
+  --ds-color-brand2-border-strong: #775811;
+  --ds-color-brand2-text-subtle: #775811;
+  --ds-color-brand2-text-default: #382908;
+  --ds-color-brand2-base-default: #E5AA20;
+  --ds-color-brand2-base-hover: #c9951c;
+  --ds-color-brand2-base-active: #af8218;
+  --ds-color-brand2-base-contrast-subtle: #2c2006;
+  --ds-color-brand2-base-contrast-default: #000000;
+  --ds-color-brand3-background-default: #ffffff;
+  --ds-color-brand3-background-tinted: #eaf5fe;
+  --ds-color-brand3-surface-default: #ffffff;
+  --ds-color-brand3-surface-tinted: #d5ecfd;
+  --ds-color-brand3-surface-hover: #b9dffc;
+  --ds-color-brand3-surface-active: #99d0fa;
+  --ds-color-brand3-border-subtle: #7bc3f9;
+  --ds-color-brand3-border-default: #197dc9;
+  --ds-color-brand3-border-strong: #13619c;
+  --ds-color-brand3-text-subtle: #13619c;
+  --ds-color-brand3-text-default: #092d49;
+  --ds-color-brand3-base-default: #1E98F5;
+  --ds-color-brand3-base-hover: #53b0f7;
+  --ds-color-brand3-base-active: #81c5f9;
+  --ds-color-brand3-base-contrast-subtle: #010507;
+  --ds-color-brand3-base-contrast-default: #000000;
+  --ds-color-info-background-default: #ffffff;
+  --ds-color-info-background-tinted: #edf5fa;
+  --ds-color-info-surface-default: #ffffff;
+  --ds-color-info-surface-tinted: #dcebf6;
+  --ds-color-info-surface-hover: #c5ddf0;
+  --ds-color-info-surface-active: #abcfe9;
+  --ds-color-info-border-subtle: #94c1e3;
+  --ds-color-info-border-default: #1f7dc5;
+  --ds-color-info-border-strong: #0860a3;
+  --ds-color-info-text-subtle: #0860a3;
+  --ds-color-info-text-default: #042d4d;
+  --ds-color-info-base-default: #0A71C0;
+  --ds-color-info-base-hover: #085d9f;
+  --ds-color-info-base-active: #074a7e;
+  --ds-color-info-base-contrast-subtle: #eff6fb;
+  --ds-color-info-base-contrast-default: #ffffff;
+  --ds-color-success-background-default: #ffffff;
+  --ds-color-success-background-tinted: #ecf6ee;
+  --ds-color-success-surface-default: #ffffff;
+  --ds-color-success-surface-tinted: #daeddd;
+  --ds-color-success-surface-hover: #c3e2c7;
+  --ds-color-success-surface-active: #a8d5ae;
+  --ds-color-success-border-subtle: #8fc997;
+  --ds-color-success-border-default: #108c22;
+  --ds-color-success-border-strong: #056d13;
+  --ds-color-success-text-subtle: #056d13;
+  --ds-color-success-text-default: #023409;
+  --ds-color-success-base-default: #068718;
+  --ds-color-success-base-hover: #057014;
+  --ds-color-success-base-active: #045a10;
+  --ds-color-success-base-contrast-subtle: #fafdfb;
+  --ds-color-success-base-contrast-default: #ffffff;
+  --ds-color-warning-background-default: #ffffff;
+  --ds-color-warning-background-tinted: #fcf2e2;
+  --ds-color-warning-surface-default: #ffffff;
+  --ds-color-warning-surface-tinted: #fae6c6;
+  --ds-color-warning-surface-hover: #f6d5a0;
+  --ds-color-warning-surface-active: #f2c275;
+  --ds-color-warning-border-subtle: #eeb04c;
+  --ds-color-warning-border-default: #a56d13;
+  --ds-color-warning-border-strong: #80540f;
+  --ds-color-warning-text-subtle: #80540f;
+  --ds-color-warning-text-default: #3c2807;
+  --ds-color-warning-base-default: #EA9B1B;
+  --ds-color-warning-base-hover: #cd8818;
+  --ds-color-warning-base-active: #b27614;
+  --ds-color-warning-base-contrast-subtle: #271a04;
+  --ds-color-warning-base-contrast-default: #000000;
+  --ds-color-danger-background-default: #ffffff;
+  --ds-color-danger-background-tinted: #fbf1f1;
+  --ds-color-danger-surface-default: #ffffff;
+  --ds-color-danger-surface-tinted: #f8e4e4;
+  --ds-color-danger-surface-hover: #f3d2d2;
+  --ds-color-danger-surface-active: #edbfbf;
+  --ds-color-danger-border-subtle: #e8adad;
+  --ds-color-danger-border-default: #ce4d4d;
+  --ds-color-danger-border-strong: #b81a1a;
+  --ds-color-danger-text-subtle: #b81a1a;
+  --ds-color-danger-text-default: #590d0d;
+  --ds-color-danger-base-default: #C01B1B;
+  --ds-color-danger-base-hover: #9b1616;
+  --ds-color-danger-base-active: #791111;
+  --ds-color-danger-base-contrast-subtle: #f7e1e1;
+  --ds-color-danger-base-contrast-default: #ffffff;
+  --ds-color-focus-inner: #ffffff;
+  --ds-color-focus-outer: #1f2c3d;
+  --ds-link-color-visited: #663299;
+
+  color-scheme: light;
+}
+
+}
+
+}
+
+@layer ds.theme.typography.secondary {
+[data-typography="secondary"] {
+  --ds-line-height-sm: 1.3;
+  --ds-line-height-md: 1.5;
+  --ds-line-height-lg: 1.7;
+  --ds-letter-spacing-1: -0.01em;
+  --ds-letter-spacing-2: -0.005em;
+  --ds-letter-spacing-3: -0.0025em;
+  --ds-letter-spacing-4: -0.0015em;
+  --ds-letter-spacing-5: 0em;
+  --ds-letter-spacing-6: 0.0015em;
+  --ds-letter-spacing-7: 0.0025em;
+  --ds-letter-spacing-8: 0.005em;
+  --ds-letter-spacing-9: 0.015em;
+  --ds-font-family: Inter;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-regular: 400;
+  --ds-heading-2xl-font-weight: 500;
+  --ds-heading-2xl-line-height: 1.3;
+  --ds-heading-2xl-letter-spacing: -0.01em;
+  --ds-heading-xl-font-weight: 500;
+  --ds-heading-xl-line-height: 1.3;
+  --ds-heading-xl-letter-spacing: -0.01em;
+  --ds-heading-lg-font-weight: 500;
+  --ds-heading-lg-line-height: 1.3;
+  --ds-heading-lg-letter-spacing: -0.005em;
+  --ds-heading-md-font-weight: 500;
+  --ds-heading-md-line-height: 1.3;
+  --ds-heading-md-letter-spacing: -0.0025em;
+  --ds-heading-sm-font-weight: 500;
+  --ds-heading-sm-line-height: 1.3;
+  --ds-heading-sm-letter-spacing: 0em;
+  --ds-heading-xs-font-weight: 500;
+  --ds-heading-xs-line-height: 1.3;
+  --ds-heading-xs-letter-spacing: 0.0015em;
+  --ds-heading-2xs-font-weight: 500;
+  --ds-heading-2xs-line-height: 1.3;
+  --ds-heading-2xs-letter-spacing: 0.0015em;
+  --ds-body-xl-font-weight: 400;
+  --ds-body-xl-line-height: 1.5;
+  --ds-body-xl-letter-spacing: 0.005em;
+  --ds-body-lg-font-weight: 400;
+  --ds-body-lg-line-height: 1.5;
+  --ds-body-lg-letter-spacing: 0.005em;
+  --ds-body-md-font-weight: 400;
+  --ds-body-md-line-height: 1.5;
+  --ds-body-md-letter-spacing: 0.005em;
+  --ds-body-sm-font-weight: 400;
+  --ds-body-sm-line-height: 1.5;
+  --ds-body-sm-letter-spacing: 0.0025em;
+  --ds-body-xs-font-weight: 400;
+  --ds-body-xs-line-height: 1.5;
+  --ds-body-xs-letter-spacing: 0.0015em;
+  --ds-body-short-xl-font-weight: 400;
+  --ds-body-short-xl-line-height: 1.3;
+  --ds-body-short-xl-letter-spacing: 0.005em;
+  --ds-body-short-lg-font-weight: 400;
+  --ds-body-short-lg-line-height: 1.3;
+  --ds-body-short-lg-letter-spacing: 0.005em;
+  --ds-body-short-md-font-weight: 400;
+  --ds-body-short-md-line-height: 1.3;
+  --ds-body-short-md-letter-spacing: 0.005em;
+  --ds-body-short-sm-font-weight: 400;
+  --ds-body-short-sm-line-height: 1.3;
+  --ds-body-short-sm-letter-spacing: 0.0025em;
+  --ds-body-short-xs-font-weight: 400;
+  --ds-body-short-xs-line-height: 1.3;
+  --ds-body-short-xs-letter-spacing: 0.0015em;
+  --ds-body-long-xl-font-weight: 400;
+  --ds-body-long-xl-line-height: 1.7;
+  --ds-body-long-xl-letter-spacing: 0.005em;
+  --ds-body-long-lg-font-weight: 400;
+  --ds-body-long-lg-line-height: 1.7;
+  --ds-body-long-lg-letter-spacing: 0.005em;
+  --ds-body-long-md-font-weight: 400;
+  --ds-body-long-md-line-height: 1.7;
+  --ds-body-long-md-letter-spacing: 0.005em;
+  --ds-body-long-sm-font-weight: 400;
+  --ds-body-long-sm-line-height: 1.7;
+  --ds-body-long-sm-letter-spacing: 0.0025em;
+  --ds-body-long-xs-font-weight: 400;
+  --ds-body-long-xs-line-height: 1.7;
+  --ds-body-long-xs-letter-spacing: 0.0015em;
+}
+}
+@layer ds.theme.size {
+:root, [data-size] {
+  --ds-size-base: 18;
+  --ds-size-step: 4;
+
+  --ds-size-0: calc(var(--ds-size-unit) * 0);
+  --ds-size-1: calc(var(--ds-size-unit) * 1);
+  --ds-size-2: calc(var(--ds-size-unit) * 2);
+  --ds-size-3: calc(var(--ds-size-unit) * 3);
+  --ds-size-4: calc(var(--ds-size-unit) * 4);
+  --ds-size-5: calc(var(--ds-size-unit) * 5);
+  --ds-size-6: calc(var(--ds-size-unit) * 6);
+  --ds-size-7: calc(var(--ds-size-unit) * 7);
+  --ds-size-8: calc(var(--ds-size-unit) * 8);
+  --ds-size-9: calc(var(--ds-size-unit) * 9);
+  --ds-size-10: calc(var(--ds-size-unit) * 10);
+  --ds-size-11: calc(var(--ds-size-unit) * 11);
+  --ds-size-12: calc(var(--ds-size-unit) * 12);
+  --ds-size-13: calc(var(--ds-size-unit) * 13);
+  --ds-size-14: calc(var(--ds-size-unit) * 14);
+  --ds-size-15: calc(var(--ds-size-unit) * 15);
+  --ds-size-18: calc(var(--ds-size-unit) * 18);
+  --ds-size-22: calc(var(--ds-size-unit) * 22);
+  --ds-size-26: calc(var(--ds-size-unit) * 26);
+  --ds-size-30: calc(var(--ds-size-unit) * 30);
+  --ds-size-unit: calc(1rem * var(--ds-size-step) / var(--ds-size-base) * var(--ds-size-mode-font-size));
+
+  @supports (width: round(down, .1em, 1px)) {
+    --ds-size-0: round(down, calc(var(--ds-size-unit) * 0), 1px);
+    --ds-size-1: round(down, calc(var(--ds-size-unit) * 1), 1px);
+    --ds-size-2: round(down, calc(var(--ds-size-unit) * 2), 1px);
+    --ds-size-3: round(down, calc(var(--ds-size-unit) * 3), 1px);
+    --ds-size-4: round(down, calc(var(--ds-size-unit) * 4), 1px);
+    --ds-size-5: round(down, calc(var(--ds-size-unit) * 5), 1px);
+    --ds-size-6: round(down, calc(var(--ds-size-unit) * 6), 1px);
+    --ds-size-7: round(down, calc(var(--ds-size-unit) * 7), 1px);
+    --ds-size-8: round(down, calc(var(--ds-size-unit) * 8), 1px);
+    --ds-size-9: round(down, calc(var(--ds-size-unit) * 9), 1px);
+    --ds-size-10: round(down, calc(var(--ds-size-unit) * 10), 1px);
+    --ds-size-11: round(down, calc(var(--ds-size-unit) * 11), 1px);
+    --ds-size-12: round(down, calc(var(--ds-size-unit) * 12), 1px);
+    --ds-size-13: round(down, calc(var(--ds-size-unit) * 13), 1px);
+    --ds-size-14: round(down, calc(var(--ds-size-unit) * 14), 1px);
+    --ds-size-15: round(down, calc(var(--ds-size-unit) * 15), 1px);
+    --ds-size-18: round(down, calc(var(--ds-size-unit) * 18), 1px);
+    --ds-size-22: round(down, calc(var(--ds-size-unit) * 22), 1px);
+    --ds-size-26: round(down, calc(var(--ds-size-unit) * 26), 1px);
+    --ds-size-30: round(down, calc(var(--ds-size-unit) * 30), 1px);
+  }
+}
+
+}
+
+@layer ds.theme.semantic {
+:root {
+  --ds-border-radius-base: 0.25rem;
+  --ds-border-radius-scale: 0.25rem;
+  --ds-border-radius-sm: min(var(--ds-border-radius-base)*0.5,var(--ds-border-radius-scale));
+  --ds-border-radius-md: min(var(--ds-border-radius-base),var(--ds-border-radius-scale)*2);
+  --ds-border-radius-lg: min(var(--ds-border-radius-base)*2,var(--ds-border-radius-scale)*5);
+  --ds-border-radius-xl: min(var(--ds-border-radius-base)*3,var(--ds-border-radius-scale)*7);
+  --ds-border-radius-default: var(--ds-border-radius-base);
+  --ds-border-radius-full: 624.9375rem;
+  --ds-border-width-default: 1px;
+  --ds-border-width-focus: 3px;
+  --ds-shadow-xs: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12);
+  --ds-shadow-sm: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1);
+  --ds-shadow-md: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
+  --ds-shadow-lg: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14);
+  --ds-shadow-xl: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16);
+  --ds-opacity-disabled: 30%;
+}
+
+}
+
+@layer ds.theme.color-scheme.dark {
+[data-color-scheme="dark"] {
+  --ds-color-accent-background-default: #0c1927;
+  --ds-color-accent-background-tinted: #102033;
+  --ds-color-accent-surface-default: #142941;
+  --ds-color-accent-surface-tinted: #172f4b;
+  --ds-color-accent-surface-hover: #1a3757;
+  --ds-color-accent-surface-active: #21446d;
+  --ds-color-accent-border-subtle: #285182;
+  --ds-color-accent-border-default: #5a84b4;
+  --ds-color-accent-border-strong: #8eaacb;
+  --ds-color-accent-text-subtle: #8eaacb;
+  --ds-color-accent-text-default: #e7edf4;
+  --ds-color-accent-base-default: #4c91cf;
+  --ds-color-accent-base-hover: #6fa6d8;
+  --ds-color-accent-base-active: #92bce1;
+  --ds-color-accent-base-contrast-subtle: #0d1924;
+  --ds-color-accent-base-contrast-default: #000000;
+  --ds-color-neutral-background-default: #13181f;
+  --ds-color-neutral-background-tinted: #192029;
+  --ds-color-neutral-surface-default: #202834;
+  --ds-color-neutral-surface-tinted: #262e3a;
+  --ds-color-neutral-surface-hover: #2e3641;
+  --ds-color-neutral-surface-active: #3c444e;
+  --ds-color-neutral-border-subtle: #49515a;
+  --ds-color-neutral-border-default: #7c8289;
+  --ds-color-neutral-border-strong: #a4a8ad;
+  --ds-color-neutral-text-subtle: #a4a8ad;
+  --ds-color-neutral-text-default: #ebeced;
+  --ds-color-neutral-base-default: #a6acb2;
+  --ds-color-neutral-base-hover: #90979f;
+  --ds-color-neutral-base-active: #7a828c;
+  --ds-color-neutral-base-contrast-subtle: #1b1c1d;
+  --ds-color-neutral-base-contrast-default: #000000;
+  --ds-color-brand1-background-default: #241313;
+  --ds-color-brand1-background-tinted: #301919;
+  --ds-color-brand1-surface-default: #3c2020;
+  --ds-color-brand1-surface-tinted: #452524;
+  --ds-color-brand1-surface-hover: #502b2a;
+  --ds-color-brand1-surface-active: #653635;
+  --ds-color-brand1-border-subtle: #78403f;
+  --ds-color-brand1-border-default: #c16766;
+  --ds-color-brand1-border-strong: #e39291;
+  --ds-color-brand1-text-subtle: #e39291;
+  --ds-color-brand1-text-default: #f9e8e8;
+  --ds-color-brand1-base-default: #9f3e41;
+  --ds-color-brand1-base-hover: #7f3234;
+  --ds-color-brand1-base-active: #612628;
+  --ds-color-brand1-base-contrast-subtle: #ffffff;
+  --ds-color-brand1-base-contrast-default: #ffffff;
+  --ds-color-brand2-background-default: #1c170d;
+  --ds-color-brand2-background-tinted: #261f11;
+  --ds-color-brand2-surface-default: #2f2716;
+  --ds-color-brand2-surface-tinted: #372c19;
+  --ds-color-brand2-surface-hover: #40341d;
+  --ds-color-brand2-surface-active: #504124;
+  --ds-color-brand2-border-subtle: #5f4e2b;
+  --ds-color-brand2-border-default: #9a7d46;
+  --ds-color-brand2-border-strong: #c8a25b;
+  --ds-color-brand2-text-subtle: #c8a25b;
+  --ds-color-brand2-text-default: #f5ebd8;
+  --ds-color-brand2-base-default: #513c0b;
+  --ds-color-brand2-base-hover: #694e0f;
+  --ds-color-brand2-base-active: #816012;
+  --ds-color-brand2-base-contrast-subtle: #ddd9cf;
+  --ds-color-brand2-base-contrast-default: #ffffff;
+  --ds-color-brand3-background-default: #0e1923;
+  --ds-color-brand3-background-tinted: #12212e;
+  --ds-color-brand3-surface-default: #17293b;
+  --ds-color-brand3-surface-tinted: #1a2f43;
+  --ds-color-brand3-surface-hover: #1e374f;
+  --ds-color-brand3-surface-active: #264563;
+  --ds-color-brand3-border-subtle: #2d5376;
+  --ds-color-brand3-border-default: #4985be;
+  --ds-color-brand3-border-strong: #76ade0;
+  --ds-color-brand3-text-subtle: #76ade0;
+  --ds-color-brand3-text-default: #e2eef8;
+  --ds-color-brand3-base-default: #135f9a;
+  --ds-color-brand3-base-hover: #0f4c7a;
+  --ds-color-brand3-base-active: #0b395d;
+  --ds-color-brand3-base-contrast-subtle: #fbfcfd;
+  --ds-color-brand3-base-contrast-default: #ffffff;
+  --ds-color-info-background-default: #0d1925;
+  --ds-color-info-background-tinted: #112130;
+  --ds-color-info-surface-default: #15293d;
+  --ds-color-info-surface-tinted: #182f46;
+  --ds-color-info-surface-hover: #1c3751;
+  --ds-color-info-surface-active: #234566;
+  --ds-color-info-border-subtle: #2a537a;
+  --ds-color-info-border-default: #5585b4;
+  --ds-color-info-border-strong: #8aabcb;
+  --ds-color-info-text-subtle: #8aabcb;
+  --ds-color-info-text-default: #e6edf4;
+  --ds-color-info-base-default: #2d85c9;
+  --ds-color-info-base-hover: #519ad2;
+  --ds-color-info-base-active: #77b0dc;
+  --ds-color-info-base-contrast-subtle: #050e15;
+  --ds-color-info-base-contrast-default: #000000;
+  --ds-color-success-background-default: #0d1b0d;
+  --ds-color-success-background-tinted: #112411;
+  --ds-color-success-surface-default: #152d15;
+  --ds-color-success-surface-tinted: #183418;
+  --ds-color-success-surface-hover: #1c3c1c;
+  --ds-color-success-surface-active: #244c24;
+  --ds-color-success-border-subtle: #2b5a2b;
+  --ds-color-success-border-default: #528f52;
+  --ds-color-success-border-strong: #89b289;
+  --ds-color-success-text-subtle: #89b289;
+  --ds-color-success-text-default: #e6efe6;
+  --ds-color-success-base-default: #138d24;
+  --ds-color-success-base-hover: #3ca14b;
+  --ds-color-success-base-active: #66b571;
+  --ds-color-success-base-contrast-subtle: #010501;
+  --ds-color-success-base-contrast-default: #000000;
+  --ds-color-warning-background-default: #1e160d;
+  --ds-color-warning-background-tinted: #281e11;
+  --ds-color-warning-surface-default: #322616;
+  --ds-color-warning-surface-tinted: #3a2b19;
+  --ds-color-warning-surface-hover: #43321d;
+  --ds-color-warning-surface-active: #543f24;
+  --ds-color-warning-border-subtle: #654b2b;
+  --ds-color-warning-border-default: #a37a46;
+  --ds-color-warning-border-strong: #d39e5b;
+  --ds-color-warning-text-subtle: #d39e5b;
+  --ds-color-warning-text-default: #f7ebdb;
+  --ds-color-warning-base-default: #60400b;
+  --ds-color-warning-base-hover: #7a510e;
+  --ds-color-warning-base-active: #946211;
+  --ds-color-warning-base-contrast-subtle: #e6e2d9;
+  --ds-color-warning-base-contrast-default: #ffffff;
+  --ds-color-danger-background-default: #2a100e;
+  --ds-color-danger-background-tinted: #371512;
+  --ds-color-danger-surface-default: #451b17;
+  --ds-color-danger-surface-tinted: #4f1f1b;
+  --ds-color-danger-surface-hover: #5c241f;
+  --ds-color-danger-surface-active: #722d27;
+  --ds-color-danger-border-subtle: #88352e;
+  --ds-color-danger-border-default: #bc6b64;
+  --ds-color-danger-border-strong: #d19a96;
+  --ds-color-danger-text-subtle: #d19a96;
+  --ds-color-danger-text-default: #f5eae9;
+  --ds-color-danger-base-default: #d76e6e;
+  --ds-color-danger-base-hover: #df8b8b;
+  --ds-color-danger-base-active: #e7a8a8;
+  --ds-color-danger-base-contrast-subtle: #271414;
+  --ds-color-danger-base-contrast-default: #000000;
+  --ds-color-focus-inner: #13181f;
+  --ds-color-focus-outer: #ebeced;
+  --ds-link-color-visited: #b49acd;
+
+  color-scheme: dark;
+}
+ 
+@media (prefers-color-scheme: dark) {
+  [data-color-scheme="auto"] {
+  --ds-color-accent-background-default: #0c1927;
+  --ds-color-accent-background-tinted: #102033;
+  --ds-color-accent-surface-default: #142941;
+  --ds-color-accent-surface-tinted: #172f4b;
+  --ds-color-accent-surface-hover: #1a3757;
+  --ds-color-accent-surface-active: #21446d;
+  --ds-color-accent-border-subtle: #285182;
+  --ds-color-accent-border-default: #5a84b4;
+  --ds-color-accent-border-strong: #8eaacb;
+  --ds-color-accent-text-subtle: #8eaacb;
+  --ds-color-accent-text-default: #e7edf4;
+  --ds-color-accent-base-default: #4c91cf;
+  --ds-color-accent-base-hover: #6fa6d8;
+  --ds-color-accent-base-active: #92bce1;
+  --ds-color-accent-base-contrast-subtle: #0d1924;
+  --ds-color-accent-base-contrast-default: #000000;
+  --ds-color-neutral-background-default: #13181f;
+  --ds-color-neutral-background-tinted: #192029;
+  --ds-color-neutral-surface-default: #202834;
+  --ds-color-neutral-surface-tinted: #262e3a;
+  --ds-color-neutral-surface-hover: #2e3641;
+  --ds-color-neutral-surface-active: #3c444e;
+  --ds-color-neutral-border-subtle: #49515a;
+  --ds-color-neutral-border-default: #7c8289;
+  --ds-color-neutral-border-strong: #a4a8ad;
+  --ds-color-neutral-text-subtle: #a4a8ad;
+  --ds-color-neutral-text-default: #ebeced;
+  --ds-color-neutral-base-default: #a6acb2;
+  --ds-color-neutral-base-hover: #90979f;
+  --ds-color-neutral-base-active: #7a828c;
+  --ds-color-neutral-base-contrast-subtle: #1b1c1d;
+  --ds-color-neutral-base-contrast-default: #000000;
+  --ds-color-brand1-background-default: #241313;
+  --ds-color-brand1-background-tinted: #301919;
+  --ds-color-brand1-surface-default: #3c2020;
+  --ds-color-brand1-surface-tinted: #452524;
+  --ds-color-brand1-surface-hover: #502b2a;
+  --ds-color-brand1-surface-active: #653635;
+  --ds-color-brand1-border-subtle: #78403f;
+  --ds-color-brand1-border-default: #c16766;
+  --ds-color-brand1-border-strong: #e39291;
+  --ds-color-brand1-text-subtle: #e39291;
+  --ds-color-brand1-text-default: #f9e8e8;
+  --ds-color-brand1-base-default: #9f3e41;
+  --ds-color-brand1-base-hover: #7f3234;
+  --ds-color-brand1-base-active: #612628;
+  --ds-color-brand1-base-contrast-subtle: #ffffff;
+  --ds-color-brand1-base-contrast-default: #ffffff;
+  --ds-color-brand2-background-default: #1c170d;
+  --ds-color-brand2-background-tinted: #261f11;
+  --ds-color-brand2-surface-default: #2f2716;
+  --ds-color-brand2-surface-tinted: #372c19;
+  --ds-color-brand2-surface-hover: #40341d;
+  --ds-color-brand2-surface-active: #504124;
+  --ds-color-brand2-border-subtle: #5f4e2b;
+  --ds-color-brand2-border-default: #9a7d46;
+  --ds-color-brand2-border-strong: #c8a25b;
+  --ds-color-brand2-text-subtle: #c8a25b;
+  --ds-color-brand2-text-default: #f5ebd8;
+  --ds-color-brand2-base-default: #513c0b;
+  --ds-color-brand2-base-hover: #694e0f;
+  --ds-color-brand2-base-active: #816012;
+  --ds-color-brand2-base-contrast-subtle: #ddd9cf;
+  --ds-color-brand2-base-contrast-default: #ffffff;
+  --ds-color-brand3-background-default: #0e1923;
+  --ds-color-brand3-background-tinted: #12212e;
+  --ds-color-brand3-surface-default: #17293b;
+  --ds-color-brand3-surface-tinted: #1a2f43;
+  --ds-color-brand3-surface-hover: #1e374f;
+  --ds-color-brand3-surface-active: #264563;
+  --ds-color-brand3-border-subtle: #2d5376;
+  --ds-color-brand3-border-default: #4985be;
+  --ds-color-brand3-border-strong: #76ade0;
+  --ds-color-brand3-text-subtle: #76ade0;
+  --ds-color-brand3-text-default: #e2eef8;
+  --ds-color-brand3-base-default: #135f9a;
+  --ds-color-brand3-base-hover: #0f4c7a;
+  --ds-color-brand3-base-active: #0b395d;
+  --ds-color-brand3-base-contrast-subtle: #fbfcfd;
+  --ds-color-brand3-base-contrast-default: #ffffff;
+  --ds-color-info-background-default: #0d1925;
+  --ds-color-info-background-tinted: #112130;
+  --ds-color-info-surface-default: #15293d;
+  --ds-color-info-surface-tinted: #182f46;
+  --ds-color-info-surface-hover: #1c3751;
+  --ds-color-info-surface-active: #234566;
+  --ds-color-info-border-subtle: #2a537a;
+  --ds-color-info-border-default: #5585b4;
+  --ds-color-info-border-strong: #8aabcb;
+  --ds-color-info-text-subtle: #8aabcb;
+  --ds-color-info-text-default: #e6edf4;
+  --ds-color-info-base-default: #2d85c9;
+  --ds-color-info-base-hover: #519ad2;
+  --ds-color-info-base-active: #77b0dc;
+  --ds-color-info-base-contrast-subtle: #050e15;
+  --ds-color-info-base-contrast-default: #000000;
+  --ds-color-success-background-default: #0d1b0d;
+  --ds-color-success-background-tinted: #112411;
+  --ds-color-success-surface-default: #152d15;
+  --ds-color-success-surface-tinted: #183418;
+  --ds-color-success-surface-hover: #1c3c1c;
+  --ds-color-success-surface-active: #244c24;
+  --ds-color-success-border-subtle: #2b5a2b;
+  --ds-color-success-border-default: #528f52;
+  --ds-color-success-border-strong: #89b289;
+  --ds-color-success-text-subtle: #89b289;
+  --ds-color-success-text-default: #e6efe6;
+  --ds-color-success-base-default: #138d24;
+  --ds-color-success-base-hover: #3ca14b;
+  --ds-color-success-base-active: #66b571;
+  --ds-color-success-base-contrast-subtle: #010501;
+  --ds-color-success-base-contrast-default: #000000;
+  --ds-color-warning-background-default: #1e160d;
+  --ds-color-warning-background-tinted: #281e11;
+  --ds-color-warning-surface-default: #322616;
+  --ds-color-warning-surface-tinted: #3a2b19;
+  --ds-color-warning-surface-hover: #43321d;
+  --ds-color-warning-surface-active: #543f24;
+  --ds-color-warning-border-subtle: #654b2b;
+  --ds-color-warning-border-default: #a37a46;
+  --ds-color-warning-border-strong: #d39e5b;
+  --ds-color-warning-text-subtle: #d39e5b;
+  --ds-color-warning-text-default: #f7ebdb;
+  --ds-color-warning-base-default: #60400b;
+  --ds-color-warning-base-hover: #7a510e;
+  --ds-color-warning-base-active: #946211;
+  --ds-color-warning-base-contrast-subtle: #e6e2d9;
+  --ds-color-warning-base-contrast-default: #ffffff;
+  --ds-color-danger-background-default: #2a100e;
+  --ds-color-danger-background-tinted: #371512;
+  --ds-color-danger-surface-default: #451b17;
+  --ds-color-danger-surface-tinted: #4f1f1b;
+  --ds-color-danger-surface-hover: #5c241f;
+  --ds-color-danger-surface-active: #722d27;
+  --ds-color-danger-border-subtle: #88352e;
+  --ds-color-danger-border-default: #bc6b64;
+  --ds-color-danger-border-strong: #d19a96;
+  --ds-color-danger-text-subtle: #d19a96;
+  --ds-color-danger-text-default: #f5eae9;
+  --ds-color-danger-base-default: #d76e6e;
+  --ds-color-danger-base-hover: #df8b8b;
+  --ds-color-danger-base-active: #e7a8a8;
+  --ds-color-danger-base-contrast-subtle: #271414;
+  --ds-color-danger-base-contrast-default: #000000;
+  --ds-color-focus-inner: #13181f;
+  --ds-color-focus-outer: #ebeced;
+  --ds-link-color-visited: #b49acd;
+
+  color-scheme: dark;
+}
+
+}
+
+}
+
+@layer ds.theme.typography.primary {
+:root, [data-typography="primary"] {
+  --ds-line-height-sm: 1.3;
+  --ds-line-height-md: 1.5;
+  --ds-line-height-lg: 1.7;
+  --ds-letter-spacing-1: -0.01em;
+  --ds-letter-spacing-2: -0.005em;
+  --ds-letter-spacing-3: -0.0025em;
+  --ds-letter-spacing-4: -0.0015em;
+  --ds-letter-spacing-5: 0em;
+  --ds-letter-spacing-6: 0.0015em;
+  --ds-letter-spacing-7: 0.0025em;
+  --ds-letter-spacing-8: 0.005em;
+  --ds-letter-spacing-9: 0.015em;
+  --ds-font-family: Inter;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-regular: 400;
+  --ds-heading-2xl-font-weight: 500;
+  --ds-heading-2xl-line-height: 1.3;
+  --ds-heading-2xl-letter-spacing: -0.01em;
+  --ds-heading-xl-font-weight: 500;
+  --ds-heading-xl-line-height: 1.3;
+  --ds-heading-xl-letter-spacing: -0.01em;
+  --ds-heading-lg-font-weight: 500;
+  --ds-heading-lg-line-height: 1.3;
+  --ds-heading-lg-letter-spacing: -0.005em;
+  --ds-heading-md-font-weight: 500;
+  --ds-heading-md-line-height: 1.3;
+  --ds-heading-md-letter-spacing: -0.0025em;
+  --ds-heading-sm-font-weight: 500;
+  --ds-heading-sm-line-height: 1.3;
+  --ds-heading-sm-letter-spacing: 0em;
+  --ds-heading-xs-font-weight: 500;
+  --ds-heading-xs-line-height: 1.3;
+  --ds-heading-xs-letter-spacing: 0.0015em;
+  --ds-heading-2xs-font-weight: 500;
+  --ds-heading-2xs-line-height: 1.3;
+  --ds-heading-2xs-letter-spacing: 0.0015em;
+  --ds-body-xl-font-weight: 400;
+  --ds-body-xl-line-height: 1.5;
+  --ds-body-xl-letter-spacing: 0.005em;
+  --ds-body-lg-font-weight: 400;
+  --ds-body-lg-line-height: 1.5;
+  --ds-body-lg-letter-spacing: 0.005em;
+  --ds-body-md-font-weight: 400;
+  --ds-body-md-line-height: 1.5;
+  --ds-body-md-letter-spacing: 0.005em;
+  --ds-body-sm-font-weight: 400;
+  --ds-body-sm-line-height: 1.5;
+  --ds-body-sm-letter-spacing: 0.0025em;
+  --ds-body-xs-font-weight: 400;
+  --ds-body-xs-line-height: 1.5;
+  --ds-body-xs-letter-spacing: 0.0015em;
+  --ds-body-short-xl-font-weight: 400;
+  --ds-body-short-xl-line-height: 1.3;
+  --ds-body-short-xl-letter-spacing: 0.005em;
+  --ds-body-short-lg-font-weight: 400;
+  --ds-body-short-lg-line-height: 1.3;
+  --ds-body-short-lg-letter-spacing: 0.005em;
+  --ds-body-short-md-font-weight: 400;
+  --ds-body-short-md-line-height: 1.3;
+  --ds-body-short-md-letter-spacing: 0.005em;
+  --ds-body-short-sm-font-weight: 400;
+  --ds-body-short-sm-line-height: 1.3;
+  --ds-body-short-sm-letter-spacing: 0.0025em;
+  --ds-body-short-xs-font-weight: 400;
+  --ds-body-short-xs-line-height: 1.3;
+  --ds-body-short-xs-letter-spacing: 0.0015em;
+  --ds-body-long-xl-font-weight: 400;
+  --ds-body-long-xl-line-height: 1.7;
+  --ds-body-long-xl-letter-spacing: 0.005em;
+  --ds-body-long-lg-font-weight: 400;
+  --ds-body-long-lg-line-height: 1.7;
+  --ds-body-long-lg-letter-spacing: 0.005em;
+  --ds-body-long-md-font-weight: 400;
+  --ds-body-long-md-line-height: 1.7;
+  --ds-body-long-md-letter-spacing: 0.005em;
+  --ds-body-long-sm-font-weight: 400;
+  --ds-body-long-sm-line-height: 1.7;
+  --ds-body-long-sm-letter-spacing: 0.0025em;
+  --ds-body-long-xs-font-weight: 400;
+  --ds-body-long-xs-line-height: 1.7;
+  --ds-body-long-xs-letter-spacing: 0.0015em;
+}
+}
+@layer ds.theme.color {
+:root, [data-color-scheme], [data-color="accent"] {
+  --ds-color-background-default: var(--ds-color-accent-background-default);
+  --ds-color-background-tinted: var(--ds-color-accent-background-tinted);
+  --ds-color-surface-default: var(--ds-color-accent-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-accent-surface-hover);
+  --ds-color-surface-active: var(--ds-color-accent-surface-active);
+  --ds-color-border-subtle: var(--ds-color-accent-border-subtle);
+  --ds-color-border-default: var(--ds-color-accent-border-default);
+  --ds-color-border-strong: var(--ds-color-accent-border-strong);
+  --ds-color-text-subtle: var(--ds-color-accent-text-subtle);
+  --ds-color-text-default: var(--ds-color-accent-text-default);
+  --ds-color-base-default: var(--ds-color-accent-base-default);
+  --ds-color-base-hover: var(--ds-color-accent-base-hover);
+  --ds-color-base-active: var(--ds-color-accent-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand1"], [data-color-scheme][data-color="brand1"] {
+  --ds-color-background-default: var(--ds-color-brand1-background-default);
+  --ds-color-background-tinted: var(--ds-color-brand1-background-tinted);
+  --ds-color-surface-default: var(--ds-color-brand1-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-brand1-surface-hover);
+  --ds-color-surface-active: var(--ds-color-brand1-surface-active);
+  --ds-color-border-subtle: var(--ds-color-brand1-border-subtle);
+  --ds-color-border-default: var(--ds-color-brand1-border-default);
+  --ds-color-border-strong: var(--ds-color-brand1-border-strong);
+  --ds-color-text-subtle: var(--ds-color-brand1-text-subtle);
+  --ds-color-text-default: var(--ds-color-brand1-text-default);
+  --ds-color-base-default: var(--ds-color-brand1-base-default);
+  --ds-color-base-hover: var(--ds-color-brand1-base-hover);
+  --ds-color-base-active: var(--ds-color-brand1-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand2"], [data-color-scheme][data-color="brand2"] {
+  --ds-color-background-default: var(--ds-color-brand2-background-default);
+  --ds-color-background-tinted: var(--ds-color-brand2-background-tinted);
+  --ds-color-surface-default: var(--ds-color-brand2-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-brand2-surface-hover);
+  --ds-color-surface-active: var(--ds-color-brand2-surface-active);
+  --ds-color-border-subtle: var(--ds-color-brand2-border-subtle);
+  --ds-color-border-default: var(--ds-color-brand2-border-default);
+  --ds-color-border-strong: var(--ds-color-brand2-border-strong);
+  --ds-color-text-subtle: var(--ds-color-brand2-text-subtle);
+  --ds-color-text-default: var(--ds-color-brand2-text-default);
+  --ds-color-base-default: var(--ds-color-brand2-base-default);
+  --ds-color-base-hover: var(--ds-color-brand2-base-hover);
+  --ds-color-base-active: var(--ds-color-brand2-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="brand3"], [data-color-scheme][data-color="brand3"] {
+  --ds-color-background-default: var(--ds-color-brand3-background-default);
+  --ds-color-background-tinted: var(--ds-color-brand3-background-tinted);
+  --ds-color-surface-default: var(--ds-color-brand3-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-brand3-surface-hover);
+  --ds-color-surface-active: var(--ds-color-brand3-surface-active);
+  --ds-color-border-subtle: var(--ds-color-brand3-border-subtle);
+  --ds-color-border-default: var(--ds-color-brand3-border-default);
+  --ds-color-border-strong: var(--ds-color-brand3-border-strong);
+  --ds-color-text-subtle: var(--ds-color-brand3-text-subtle);
+  --ds-color-text-default: var(--ds-color-brand3-text-default);
+  --ds-color-base-default: var(--ds-color-brand3-base-default);
+  --ds-color-base-hover: var(--ds-color-brand3-base-hover);
+  --ds-color-base-active: var(--ds-color-brand3-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="danger"], [data-color-scheme][data-color="danger"] {
+  --ds-color-background-default: var(--ds-color-danger-background-default);
+  --ds-color-background-tinted: var(--ds-color-danger-background-tinted);
+  --ds-color-surface-default: var(--ds-color-danger-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-danger-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
+  --ds-color-surface-active: var(--ds-color-danger-surface-active);
+  --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
+  --ds-color-border-default: var(--ds-color-danger-border-default);
+  --ds-color-border-strong: var(--ds-color-danger-border-strong);
+  --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
+  --ds-color-text-default: var(--ds-color-danger-text-default);
+  --ds-color-base-default: var(--ds-color-danger-base-default);
+  --ds-color-base-hover: var(--ds-color-danger-base-hover);
+  --ds-color-base-active: var(--ds-color-danger-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-danger-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-danger-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="info"], [data-color-scheme][data-color="info"] {
+  --ds-color-background-default: var(--ds-color-info-background-default);
+  --ds-color-background-tinted: var(--ds-color-info-background-tinted);
+  --ds-color-surface-default: var(--ds-color-info-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-info-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-info-surface-hover);
+  --ds-color-surface-active: var(--ds-color-info-surface-active);
+  --ds-color-border-subtle: var(--ds-color-info-border-subtle);
+  --ds-color-border-default: var(--ds-color-info-border-default);
+  --ds-color-border-strong: var(--ds-color-info-border-strong);
+  --ds-color-text-subtle: var(--ds-color-info-text-subtle);
+  --ds-color-text-default: var(--ds-color-info-text-default);
+  --ds-color-base-default: var(--ds-color-info-base-default);
+  --ds-color-base-hover: var(--ds-color-info-base-hover);
+  --ds-color-base-active: var(--ds-color-info-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-info-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-info-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="neutral"], [data-color-scheme][data-color="neutral"] {
+  --ds-color-background-default: var(--ds-color-neutral-background-default);
+  --ds-color-background-tinted: var(--ds-color-neutral-background-tinted);
+  --ds-color-surface-default: var(--ds-color-neutral-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-neutral-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
+  --ds-color-surface-active: var(--ds-color-neutral-surface-active);
+  --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
+  --ds-color-border-default: var(--ds-color-neutral-border-default);
+  --ds-color-border-strong: var(--ds-color-neutral-border-strong);
+  --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
+  --ds-color-text-default: var(--ds-color-neutral-text-default);
+  --ds-color-base-default: var(--ds-color-neutral-base-default);
+  --ds-color-base-hover: var(--ds-color-neutral-base-hover);
+  --ds-color-base-active: var(--ds-color-neutral-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-neutral-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-neutral-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="success"], [data-color-scheme][data-color="success"] {
+  --ds-color-background-default: var(--ds-color-success-background-default);
+  --ds-color-background-tinted: var(--ds-color-success-background-tinted);
+  --ds-color-surface-default: var(--ds-color-success-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-success-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-success-surface-hover);
+  --ds-color-surface-active: var(--ds-color-success-surface-active);
+  --ds-color-border-subtle: var(--ds-color-success-border-subtle);
+  --ds-color-border-default: var(--ds-color-success-border-default);
+  --ds-color-border-strong: var(--ds-color-success-border-strong);
+  --ds-color-text-subtle: var(--ds-color-success-text-subtle);
+  --ds-color-text-default: var(--ds-color-success-text-default);
+  --ds-color-base-default: var(--ds-color-success-base-default);
+  --ds-color-base-hover: var(--ds-color-success-base-hover);
+  --ds-color-base-active: var(--ds-color-success-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-success-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-success-base-contrast-default);
+}
+
+}
+
+@layer ds.theme.color {
+[data-color="warning"], [data-color-scheme][data-color="warning"] {
+  --ds-color-background-default: var(--ds-color-warning-background-default);
+  --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
+  --ds-color-surface-default: var(--ds-color-warning-surface-default);
+  --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
+  --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
+  --ds-color-surface-active: var(--ds-color-warning-surface-active);
+  --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
+  --ds-color-border-default: var(--ds-color-warning-border-default);
+  --ds-color-border-strong: var(--ds-color-warning-border-strong);
+  --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
+  --ds-color-text-default: var(--ds-color-warning-text-default);
+  --ds-color-base-default: var(--ds-color-warning-base-default);
+  --ds-color-base-hover: var(--ds-color-warning-base-hover);
+  --ds-color-base-active: var(--ds-color-warning-base-active);
+  --ds-color-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
+  --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
+}
+
+}