@kushagradhawan/kookie-ui 0.1.0

package/tokens/base.css

@@ -0,0 +1,1412 @@
+:root {
+  --black-a1: rgba(0, 0, 0, 0.05);
+  --black-a2: rgba(0, 0, 0, 0.1);
+  --black-a3: rgba(0, 0, 0, 0.15);
+  --black-a4: rgba(0, 0, 0, 0.2);
+  --black-a5: rgba(0, 0, 0, 0.3);
+  --black-a6: rgba(0, 0, 0, 0.4);
+  --black-a7: rgba(0, 0, 0, 0.5);
+  --black-a8: rgba(0, 0, 0, 0.6);
+  --black-a9: rgba(0, 0, 0, 0.7);
+  --black-a10: rgba(0, 0, 0, 0.8);
+  --black-a11: rgba(0, 0, 0, 0.9);
+  --black-a12: rgba(0, 0, 0, 0.95);
+  --white-a1: rgba(255, 255, 255, 0.05);
+  --white-a2: rgba(255, 255, 255, 0.1);
+  --white-a3: rgba(255, 255, 255, 0.15);
+  --white-a4: rgba(255, 255, 255, 0.2);
+  --white-a5: rgba(255, 255, 255, 0.3);
+  --white-a6: rgba(255, 255, 255, 0.4);
+  --white-a7: rgba(255, 255, 255, 0.5);
+  --white-a8: rgba(255, 255, 255, 0.6);
+  --white-a9: rgba(255, 255, 255, 0.7);
+  --white-a10: rgba(255, 255, 255, 0.8);
+  --white-a11: rgba(255, 255, 255, 0.9);
+  --white-a12: rgba(255, 255, 255, 0.95);
+}
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / 0.05);
+      --black-a2: color(display-p3 0 0 0 / 0.1);
+      --black-a3: color(display-p3 0 0 0 / 0.15);
+      --black-a4: color(display-p3 0 0 0 / 0.2);
+      --black-a5: color(display-p3 0 0 0 / 0.3);
+      --black-a6: color(display-p3 0 0 0 / 0.4);
+      --black-a7: color(display-p3 0 0 0 / 0.5);
+      --black-a8: color(display-p3 0 0 0 / 0.6);
+      --black-a9: color(display-p3 0 0 0 / 0.7);
+      --black-a10: color(display-p3 0 0 0 / 0.8);
+      --black-a11: color(display-p3 0 0 0 / 0.9);
+      --black-a12: color(display-p3 0 0 0 / 0.95);
+      --white-a1: color(display-p3 1 1 1 / 0.05);
+      --white-a2: color(display-p3 1 1 1 / 0.1);
+      --white-a3: color(display-p3 1 1 1 / 0.15);
+      --white-a4: color(display-p3 1 1 1 / 0.2);
+      --white-a5: color(display-p3 1 1 1 / 0.3);
+      --white-a6: color(display-p3 1 1 1 / 0.4);
+      --white-a7: color(display-p3 1 1 1 / 0.5);
+      --white-a8: color(display-p3 1 1 1 / 0.6);
+      --white-a9: color(display-p3 1 1 1 / 0.7);
+      --white-a10: color(display-p3 1 1 1 / 0.8);
+      --white-a11: color(display-p3 1 1 1 / 0.9);
+      --white-a12: color(display-p3 1 1 1 / 0.95);
+    }
+  }
+}
+:where(.radix-themes) {
+  --color-background: white;
+  --color-overlay: var(--black-a6);
+  --color-panel-solid: white;
+  --color-panel-translucent: rgba(255, 255, 255, 0.7);
+  --color-surface: rgba(255, 255, 255, 0.85);
+  --color-transparent: rgb(0 0 0 / 0);
+  --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
+  --shadow-2: 0 0 0 1px var(--gray-a3), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+  --shadow-3: 0 0 0 1px var(--gray-a3), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+  --shadow-4: 0 0 0 1px var(--gray-a3), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+  --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+  --shadow-6: 0 0 0 1px var(--gray-a3), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --color-background: var(--gray-1);
+  --color-overlay: var(--black-a8);
+  --color-panel-solid: var(--gray-2);
+  --color-panel-translucent: var(--gray-a2);
+  --color-surface: rgba(0, 0, 0, 0.25);
+  --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
+  --shadow-2: 0 0 0 1px var(--gray-a6), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+  --shadow-3: 0 0 0 1px var(--gray-a6), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+  --shadow-4: 0 0 0 1px var(--gray-a6), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
+  --shadow-5: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
+  --shadow-6: 0 0 0 1px var(--gray-a6), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+}
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .radix-themes {
+      --color-transparent: color(display-p3 0 0 0 / 0);
+    }
+  }
+}
+.radix-themes:where(.light, .light-theme),
+  :root:where(:has(.radix-themes[data-is-root-theme='true']:where(.light, .light-theme))) {
+  color-scheme: light;
+}
+.radix-themes:where(.dark, .dark-theme),
+  :root:where(:has(.radix-themes[data-is-root-theme='true']:where(.dark, .dark-theme))) {
+  color-scheme: dark;
+}
+.radix-themes,
+[data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
+  --focus-1: var(--accent-1);
+  --focus-2: var(--accent-2);
+  --focus-3: var(--accent-3);
+  --focus-4: var(--accent-4);
+  --focus-5: var(--accent-5);
+  --focus-6: var(--accent-6);
+  --focus-7: var(--accent-7);
+  --focus-8: var(--accent-8);
+  --focus-9: var(--accent-9);
+  --focus-10: var(--accent-10);
+  --focus-11: var(--accent-11);
+  --focus-12: var(--accent-12);
+  --focus-a1: var(--accent-a1);
+  --focus-a2: var(--accent-a2);
+  --focus-a3: var(--accent-a3);
+  --focus-a4: var(--accent-a4);
+  --focus-a5: var(--accent-a5);
+  --focus-a6: var(--accent-a6);
+  --focus-a7: var(--accent-a7);
+  --focus-a8: var(--accent-a8);
+  --focus-a9: var(--accent-a9);
+  --focus-a10: var(--accent-a10);
+  --focus-a11: var(--accent-a11);
+  --focus-a12: var(--accent-a12);
+}
+.radix-themes ::selection {
+  background-color: var(--focus-a5);
+}
+.radix-themes:where([data-has-background='true']) {
+  background-color: var(--color-background);
+}
+.radix-themes:where([data-panel-background='solid']) {
+  --color-panel: var(--color-panel-solid);
+  --backdrop-filter-panel: none;
+}
+.radix-themes:where([data-panel-background='translucent']) {
+  --color-panel: var(--color-panel-translucent);
+  --backdrop-filter-panel: blur(64px);
+}
+[data-accent-color='amber'] {
+  --accent-1: var(--amber-1);
+  --accent-2: var(--amber-2);
+  --accent-3: var(--amber-3);
+  --accent-4: var(--amber-4);
+  --accent-5: var(--amber-5);
+  --accent-6: var(--amber-6);
+  --accent-7: var(--amber-7);
+  --accent-8: var(--amber-8);
+  --accent-9: var(--amber-9);
+  --accent-10: var(--amber-10);
+  --accent-11: var(--amber-11);
+  --accent-12: var(--amber-12);
+  --accent-a1: var(--amber-a1);
+  --accent-a2: var(--amber-a2);
+  --accent-a3: var(--amber-a3);
+  --accent-a4: var(--amber-a4);
+  --accent-a5: var(--amber-a5);
+  --accent-a6: var(--amber-a6);
+  --accent-a7: var(--amber-a7);
+  --accent-a8: var(--amber-a8);
+  --accent-a9: var(--amber-a9);
+  --accent-a10: var(--amber-a10);
+  --accent-a11: var(--amber-a11);
+  --accent-a12: var(--amber-a12);
+  --accent-contrast: var(--amber-contrast);
+  --accent-surface: var(--amber-surface);
+  --accent-indicator: var(--amber-indicator);
+  --accent-track: var(--amber-track);
+}
+[data-accent-color='blue'] {
+  --accent-1: var(--blue-1);
+  --accent-2: var(--blue-2);
+  --accent-3: var(--blue-3);
+  --accent-4: var(--blue-4);
+  --accent-5: var(--blue-5);
+  --accent-6: var(--blue-6);
+  --accent-7: var(--blue-7);
+  --accent-8: var(--blue-8);
+  --accent-9: var(--blue-9);
+  --accent-10: var(--blue-10);
+  --accent-11: var(--blue-11);
+  --accent-12: var(--blue-12);
+  --accent-a1: var(--blue-a1);
+  --accent-a2: var(--blue-a2);
+  --accent-a3: var(--blue-a3);
+  --accent-a4: var(--blue-a4);
+  --accent-a5: var(--blue-a5);
+  --accent-a6: var(--blue-a6);
+  --accent-a7: var(--blue-a7);
+  --accent-a8: var(--blue-a8);
+  --accent-a9: var(--blue-a9);
+  --accent-a10: var(--blue-a10);
+  --accent-a11: var(--blue-a11);
+  --accent-a12: var(--blue-a12);
+  --accent-contrast: var(--blue-contrast);
+  --accent-surface: var(--blue-surface);
+  --accent-indicator: var(--blue-indicator);
+  --accent-track: var(--blue-track);
+}
+[data-accent-color='bronze'] {
+  --accent-1: var(--bronze-1);
+  --accent-2: var(--bronze-2);
+  --accent-3: var(--bronze-3);
+  --accent-4: var(--bronze-4);
+  --accent-5: var(--bronze-5);
+  --accent-6: var(--bronze-6);
+  --accent-7: var(--bronze-7);
+  --accent-8: var(--bronze-8);
+  --accent-9: var(--bronze-9);
+  --accent-10: var(--bronze-10);
+  --accent-11: var(--bronze-11);
+  --accent-12: var(--bronze-12);
+  --accent-a1: var(--bronze-a1);
+  --accent-a2: var(--bronze-a2);
+  --accent-a3: var(--bronze-a3);
+  --accent-a4: var(--bronze-a4);
+  --accent-a5: var(--bronze-a5);
+  --accent-a6: var(--bronze-a6);
+  --accent-a7: var(--bronze-a7);
+  --accent-a8: var(--bronze-a8);
+  --accent-a9: var(--bronze-a9);
+  --accent-a10: var(--bronze-a10);
+  --accent-a11: var(--bronze-a11);
+  --accent-a12: var(--bronze-a12);
+  --accent-contrast: var(--bronze-contrast);
+  --accent-surface: var(--bronze-surface);
+  --accent-indicator: var(--bronze-indicator);
+  --accent-track: var(--bronze-track);
+}
+[data-accent-color='brown'] {
+  --accent-1: var(--brown-1);
+  --accent-2: var(--brown-2);
+  --accent-3: var(--brown-3);
+  --accent-4: var(--brown-4);
+  --accent-5: var(--brown-5);
+  --accent-6: var(--brown-6);
+  --accent-7: var(--brown-7);
+  --accent-8: var(--brown-8);
+  --accent-9: var(--brown-9);
+  --accent-10: var(--brown-10);
+  --accent-11: var(--brown-11);
+  --accent-12: var(--brown-12);
+  --accent-a1: var(--brown-a1);
+  --accent-a2: var(--brown-a2);
+  --accent-a3: var(--brown-a3);
+  --accent-a4: var(--brown-a4);
+  --accent-a5: var(--brown-a5);
+  --accent-a6: var(--brown-a6);
+  --accent-a7: var(--brown-a7);
+  --accent-a8: var(--brown-a8);
+  --accent-a9: var(--brown-a9);
+  --accent-a10: var(--brown-a10);
+  --accent-a11: var(--brown-a11);
+  --accent-a12: var(--brown-a12);
+  --accent-contrast: var(--brown-contrast);
+  --accent-surface: var(--brown-surface);
+  --accent-indicator: var(--brown-indicator);
+  --accent-track: var(--brown-track);
+}
+[data-accent-color='crimson'] {
+  --accent-1: var(--crimson-1);
+  --accent-2: var(--crimson-2);
+  --accent-3: var(--crimson-3);
+  --accent-4: var(--crimson-4);
+  --accent-5: var(--crimson-5);
+  --accent-6: var(--crimson-6);
+  --accent-7: var(--crimson-7);
+  --accent-8: var(--crimson-8);
+  --accent-9: var(--crimson-9);
+  --accent-10: var(--crimson-10);
+  --accent-11: var(--crimson-11);
+  --accent-12: var(--crimson-12);
+  --accent-a1: var(--crimson-a1);
+  --accent-a2: var(--crimson-a2);
+  --accent-a3: var(--crimson-a3);
+  --accent-a4: var(--crimson-a4);
+  --accent-a5: var(--crimson-a5);
+  --accent-a6: var(--crimson-a6);
+  --accent-a7: var(--crimson-a7);
+  --accent-a8: var(--crimson-a8);
+  --accent-a9: var(--crimson-a9);
+  --accent-a10: var(--crimson-a10);
+  --accent-a11: var(--crimson-a11);
+  --accent-a12: var(--crimson-a12);
+  --accent-contrast: var(--crimson-contrast);
+  --accent-surface: var(--crimson-surface);
+  --accent-indicator: var(--crimson-indicator);
+  --accent-track: var(--crimson-track);
+}
+[data-accent-color='cyan'] {
+  --accent-1: var(--cyan-1);
+  --accent-2: var(--cyan-2);
+  --accent-3: var(--cyan-3);
+  --accent-4: var(--cyan-4);
+  --accent-5: var(--cyan-5);
+  --accent-6: var(--cyan-6);
+  --accent-7: var(--cyan-7);
+  --accent-8: var(--cyan-8);
+  --accent-9: var(--cyan-9);
+  --accent-10: var(--cyan-10);
+  --accent-11: var(--cyan-11);
+  --accent-12: var(--cyan-12);
+  --accent-a1: var(--cyan-a1);
+  --accent-a2: var(--cyan-a2);
+  --accent-a3: var(--cyan-a3);
+  --accent-a4: var(--cyan-a4);
+  --accent-a5: var(--cyan-a5);
+  --accent-a6: var(--cyan-a6);
+  --accent-a7: var(--cyan-a7);
+  --accent-a8: var(--cyan-a8);
+  --accent-a9: var(--cyan-a9);
+  --accent-a10: var(--cyan-a10);
+  --accent-a11: var(--cyan-a11);
+  --accent-a12: var(--cyan-a12);
+  --accent-contrast: var(--cyan-contrast);
+  --accent-surface: var(--cyan-surface);
+  --accent-indicator: var(--cyan-indicator);
+  --accent-track: var(--cyan-track);
+}
+[data-accent-color='gold'] {
+  --accent-1: var(--gold-1);
+  --accent-2: var(--gold-2);
+  --accent-3: var(--gold-3);
+  --accent-4: var(--gold-4);
+  --accent-5: var(--gold-5);
+  --accent-6: var(--gold-6);
+  --accent-7: var(--gold-7);
+  --accent-8: var(--gold-8);
+  --accent-9: var(--gold-9);
+  --accent-10: var(--gold-10);
+  --accent-11: var(--gold-11);
+  --accent-12: var(--gold-12);
+  --accent-a1: var(--gold-a1);
+  --accent-a2: var(--gold-a2);
+  --accent-a3: var(--gold-a3);
+  --accent-a4: var(--gold-a4);
+  --accent-a5: var(--gold-a5);
+  --accent-a6: var(--gold-a6);
+  --accent-a7: var(--gold-a7);
+  --accent-a8: var(--gold-a8);
+  --accent-a9: var(--gold-a9);
+  --accent-a10: var(--gold-a10);
+  --accent-a11: var(--gold-a11);
+  --accent-a12: var(--gold-a12);
+  --accent-contrast: var(--gold-contrast);
+  --accent-surface: var(--gold-surface);
+  --accent-indicator: var(--gold-indicator);
+  --accent-track: var(--gold-track);
+}
+[data-accent-color='grass'] {
+  --accent-1: var(--grass-1);
+  --accent-2: var(--grass-2);
+  --accent-3: var(--grass-3);
+  --accent-4: var(--grass-4);
+  --accent-5: var(--grass-5);
+  --accent-6: var(--grass-6);
+  --accent-7: var(--grass-7);
+  --accent-8: var(--grass-8);
+  --accent-9: var(--grass-9);
+  --accent-10: var(--grass-10);
+  --accent-11: var(--grass-11);
+  --accent-12: var(--grass-12);
+  --accent-a1: var(--grass-a1);
+  --accent-a2: var(--grass-a2);
+  --accent-a3: var(--grass-a3);
+  --accent-a4: var(--grass-a4);
+  --accent-a5: var(--grass-a5);
+  --accent-a6: var(--grass-a6);
+  --accent-a7: var(--grass-a7);
+  --accent-a8: var(--grass-a8);
+  --accent-a9: var(--grass-a9);
+  --accent-a10: var(--grass-a10);
+  --accent-a11: var(--grass-a11);
+  --accent-a12: var(--grass-a12);
+  --accent-contrast: var(--grass-contrast);
+  --accent-surface: var(--grass-surface);
+  --accent-indicator: var(--grass-indicator);
+  --accent-track: var(--grass-track);
+}
+[data-accent-color='gray'] {
+  --accent-1: var(--gray-1);
+  --accent-2: var(--gray-2);
+  --accent-3: var(--gray-3);
+  --accent-4: var(--gray-4);
+  --accent-5: var(--gray-5);
+  --accent-6: var(--gray-6);
+  --accent-7: var(--gray-7);
+  --accent-8: var(--gray-8);
+  --accent-9: var(--gray-9);
+  --accent-10: var(--gray-10);
+  --accent-11: var(--gray-11);
+  --accent-12: var(--gray-12);
+  --accent-a1: var(--gray-a1);
+  --accent-a2: var(--gray-a2);
+  --accent-a3: var(--gray-a3);
+  --accent-a4: var(--gray-a4);
+  --accent-a5: var(--gray-a5);
+  --accent-a6: var(--gray-a6);
+  --accent-a7: var(--gray-a7);
+  --accent-a8: var(--gray-a8);
+  --accent-a9: var(--gray-a9);
+  --accent-a10: var(--gray-a10);
+  --accent-a11: var(--gray-a11);
+  --accent-a12: var(--gray-a12);
+  --accent-contrast: var(--gray-contrast);
+  --accent-surface: var(--gray-surface);
+  --accent-indicator: var(--gray-indicator);
+  --accent-track: var(--gray-track);
+}
+[data-accent-color='green'] {
+  --accent-1: var(--green-1);
+  --accent-2: var(--green-2);
+  --accent-3: var(--green-3);
+  --accent-4: var(--green-4);
+  --accent-5: var(--green-5);
+  --accent-6: var(--green-6);
+  --accent-7: var(--green-7);
+  --accent-8: var(--green-8);
+  --accent-9: var(--green-9);
+  --accent-10: var(--green-10);
+  --accent-11: var(--green-11);
+  --accent-12: var(--green-12);
+  --accent-a1: var(--green-a1);
+  --accent-a2: var(--green-a2);
+  --accent-a3: var(--green-a3);
+  --accent-a4: var(--green-a4);
+  --accent-a5: var(--green-a5);
+  --accent-a6: var(--green-a6);
+  --accent-a7: var(--green-a7);
+  --accent-a8: var(--green-a8);
+  --accent-a9: var(--green-a9);
+  --accent-a10: var(--green-a10);
+  --accent-a11: var(--green-a11);
+  --accent-a12: var(--green-a12);
+  --accent-contrast: var(--green-contrast);
+  --accent-surface: var(--green-surface);
+  --accent-indicator: var(--green-indicator);
+  --accent-track: var(--green-track);
+}
+[data-accent-color='indigo'] {
+  --accent-1: var(--indigo-1);
+  --accent-2: var(--indigo-2);
+  --accent-3: var(--indigo-3);
+  --accent-4: var(--indigo-4);
+  --accent-5: var(--indigo-5);
+  --accent-6: var(--indigo-6);
+  --accent-7: var(--indigo-7);
+  --accent-8: var(--indigo-8);
+  --accent-9: var(--indigo-9);
+  --accent-10: var(--indigo-10);
+  --accent-11: var(--indigo-11);
+  --accent-12: var(--indigo-12);
+  --accent-a1: var(--indigo-a1);
+  --accent-a2: var(--indigo-a2);
+  --accent-a3: var(--indigo-a3);
+  --accent-a4: var(--indigo-a4);
+  --accent-a5: var(--indigo-a5);
+  --accent-a6: var(--indigo-a6);
+  --accent-a7: var(--indigo-a7);
+  --accent-a8: var(--indigo-a8);
+  --accent-a9: var(--indigo-a9);
+  --accent-a10: var(--indigo-a10);
+  --accent-a11: var(--indigo-a11);
+  --accent-a12: var(--indigo-a12);
+  --accent-contrast: var(--indigo-contrast);
+  --accent-surface: var(--indigo-surface);
+  --accent-indicator: var(--indigo-indicator);
+  --accent-track: var(--indigo-track);
+}
+[data-accent-color='iris'] {
+  --accent-1: var(--iris-1);
+  --accent-2: var(--iris-2);
+  --accent-3: var(--iris-3);
+  --accent-4: var(--iris-4);
+  --accent-5: var(--iris-5);
+  --accent-6: var(--iris-6);
+  --accent-7: var(--iris-7);
+  --accent-8: var(--iris-8);
+  --accent-9: var(--iris-9);
+  --accent-10: var(--iris-10);
+  --accent-11: var(--iris-11);
+  --accent-12: var(--iris-12);
+  --accent-a1: var(--iris-a1);
+  --accent-a2: var(--iris-a2);
+  --accent-a3: var(--iris-a3);
+  --accent-a4: var(--iris-a4);
+  --accent-a5: var(--iris-a5);
+  --accent-a6: var(--iris-a6);
+  --accent-a7: var(--iris-a7);
+  --accent-a8: var(--iris-a8);
+  --accent-a9: var(--iris-a9);
+  --accent-a10: var(--iris-a10);
+  --accent-a11: var(--iris-a11);
+  --accent-a12: var(--iris-a12);
+  --accent-contrast: var(--iris-contrast);
+  --accent-surface: var(--iris-surface);
+  --accent-indicator: var(--iris-indicator);
+  --accent-track: var(--iris-track);
+}
+[data-accent-color='jade'] {
+  --accent-1: var(--jade-1);
+  --accent-2: var(--jade-2);
+  --accent-3: var(--jade-3);
+  --accent-4: var(--jade-4);
+  --accent-5: var(--jade-5);
+  --accent-6: var(--jade-6);
+  --accent-7: var(--jade-7);
+  --accent-8: var(--jade-8);
+  --accent-9: var(--jade-9);
+  --accent-10: var(--jade-10);
+  --accent-11: var(--jade-11);
+  --accent-12: var(--jade-12);
+  --accent-a1: var(--jade-a1);
+  --accent-a2: var(--jade-a2);
+  --accent-a3: var(--jade-a3);
+  --accent-a4: var(--jade-a4);
+  --accent-a5: var(--jade-a5);
+  --accent-a6: var(--jade-a6);
+  --accent-a7: var(--jade-a7);
+  --accent-a8: var(--jade-a8);
+  --accent-a9: var(--jade-a9);
+  --accent-a10: var(--jade-a10);
+  --accent-a11: var(--jade-a11);
+  --accent-a12: var(--jade-a12);
+  --accent-contrast: var(--jade-contrast);
+  --accent-surface: var(--jade-surface);
+  --accent-indicator: var(--jade-indicator);
+  --accent-track: var(--jade-track);
+}
+[data-accent-color='lime'] {
+  --accent-1: var(--lime-1);
+  --accent-2: var(--lime-2);
+  --accent-3: var(--lime-3);
+  --accent-4: var(--lime-4);
+  --accent-5: var(--lime-5);
+  --accent-6: var(--lime-6);
+  --accent-7: var(--lime-7);
+  --accent-8: var(--lime-8);
+  --accent-9: var(--lime-9);
+  --accent-10: var(--lime-10);
+  --accent-11: var(--lime-11);
+  --accent-12: var(--lime-12);
+  --accent-a1: var(--lime-a1);
+  --accent-a2: var(--lime-a2);
+  --accent-a3: var(--lime-a3);
+  --accent-a4: var(--lime-a4);
+  --accent-a5: var(--lime-a5);
+  --accent-a6: var(--lime-a6);
+  --accent-a7: var(--lime-a7);
+  --accent-a8: var(--lime-a8);
+  --accent-a9: var(--lime-a9);
+  --accent-a10: var(--lime-a10);
+  --accent-a11: var(--lime-a11);
+  --accent-a12: var(--lime-a12);
+  --accent-contrast: var(--lime-contrast);
+  --accent-surface: var(--lime-surface);
+  --accent-indicator: var(--lime-indicator);
+  --accent-track: var(--lime-track);
+}
+[data-accent-color='mint'] {
+  --accent-1: var(--mint-1);
+  --accent-2: var(--mint-2);
+  --accent-3: var(--mint-3);
+  --accent-4: var(--mint-4);
+  --accent-5: var(--mint-5);
+  --accent-6: var(--mint-6);
+  --accent-7: var(--mint-7);
+  --accent-8: var(--mint-8);
+  --accent-9: var(--mint-9);
+  --accent-10: var(--mint-10);
+  --accent-11: var(--mint-11);
+  --accent-12: var(--mint-12);
+  --accent-a1: var(--mint-a1);
+  --accent-a2: var(--mint-a2);
+  --accent-a3: var(--mint-a3);
+  --accent-a4: var(--mint-a4);
+  --accent-a5: var(--mint-a5);
+  --accent-a6: var(--mint-a6);
+  --accent-a7: var(--mint-a7);
+  --accent-a8: var(--mint-a8);
+  --accent-a9: var(--mint-a9);
+  --accent-a10: var(--mint-a10);
+  --accent-a11: var(--mint-a11);
+  --accent-a12: var(--mint-a12);
+  --accent-contrast: var(--mint-contrast);
+  --accent-surface: var(--mint-surface);
+  --accent-indicator: var(--mint-indicator);
+  --accent-track: var(--mint-track);
+}
+[data-accent-color='orange'] {
+  --accent-1: var(--orange-1);
+  --accent-2: var(--orange-2);
+  --accent-3: var(--orange-3);
+  --accent-4: var(--orange-4);
+  --accent-5: var(--orange-5);
+  --accent-6: var(--orange-6);
+  --accent-7: var(--orange-7);
+  --accent-8: var(--orange-8);
+  --accent-9: var(--orange-9);
+  --accent-10: var(--orange-10);
+  --accent-11: var(--orange-11);
+  --accent-12: var(--orange-12);
+  --accent-a1: var(--orange-a1);
+  --accent-a2: var(--orange-a2);
+  --accent-a3: var(--orange-a3);
+  --accent-a4: var(--orange-a4);
+  --accent-a5: var(--orange-a5);
+  --accent-a6: var(--orange-a6);
+  --accent-a7: var(--orange-a7);
+  --accent-a8: var(--orange-a8);
+  --accent-a9: var(--orange-a9);
+  --accent-a10: var(--orange-a10);
+  --accent-a11: var(--orange-a11);
+  --accent-a12: var(--orange-a12);
+  --accent-contrast: var(--orange-contrast);
+  --accent-surface: var(--orange-surface);
+  --accent-indicator: var(--orange-indicator);
+  --accent-track: var(--orange-track);
+}
+[data-accent-color='pink'] {
+  --accent-1: var(--pink-1);
+  --accent-2: var(--pink-2);
+  --accent-3: var(--pink-3);
+  --accent-4: var(--pink-4);
+  --accent-5: var(--pink-5);
+  --accent-6: var(--pink-6);
+  --accent-7: var(--pink-7);
+  --accent-8: var(--pink-8);
+  --accent-9: var(--pink-9);
+  --accent-10: var(--pink-10);
+  --accent-11: var(--pink-11);
+  --accent-12: var(--pink-12);
+  --accent-a1: var(--pink-a1);
+  --accent-a2: var(--pink-a2);
+  --accent-a3: var(--pink-a3);
+  --accent-a4: var(--pink-a4);
+  --accent-a5: var(--pink-a5);
+  --accent-a6: var(--pink-a6);
+  --accent-a7: var(--pink-a7);
+  --accent-a8: var(--pink-a8);
+  --accent-a9: var(--pink-a9);
+  --accent-a10: var(--pink-a10);
+  --accent-a11: var(--pink-a11);
+  --accent-a12: var(--pink-a12);
+  --accent-contrast: var(--pink-contrast);
+  --accent-surface: var(--pink-surface);
+  --accent-indicator: var(--pink-indicator);
+  --accent-track: var(--pink-track);
+}
+[data-accent-color='plum'] {
+  --accent-1: var(--plum-1);
+  --accent-2: var(--plum-2);
+  --accent-3: var(--plum-3);
+  --accent-4: var(--plum-4);
+  --accent-5: var(--plum-5);
+  --accent-6: var(--plum-6);
+  --accent-7: var(--plum-7);
+  --accent-8: var(--plum-8);
+  --accent-9: var(--plum-9);
+  --accent-10: var(--plum-10);
+  --accent-11: var(--plum-11);
+  --accent-12: var(--plum-12);
+  --accent-a1: var(--plum-a1);
+  --accent-a2: var(--plum-a2);
+  --accent-a3: var(--plum-a3);
+  --accent-a4: var(--plum-a4);
+  --accent-a5: var(--plum-a5);
+  --accent-a6: var(--plum-a6);
+  --accent-a7: var(--plum-a7);
+  --accent-a8: var(--plum-a8);
+  --accent-a9: var(--plum-a9);
+  --accent-a10: var(--plum-a10);
+  --accent-a11: var(--plum-a11);
+  --accent-a12: var(--plum-a12);
+  --accent-contrast: var(--plum-contrast);
+  --accent-surface: var(--plum-surface);
+  --accent-indicator: var(--plum-indicator);
+  --accent-track: var(--plum-track);
+}
+[data-accent-color='purple'] {
+  --accent-1: var(--purple-1);
+  --accent-2: var(--purple-2);
+  --accent-3: var(--purple-3);
+  --accent-4: var(--purple-4);
+  --accent-5: var(--purple-5);
+  --accent-6: var(--purple-6);
+  --accent-7: var(--purple-7);
+  --accent-8: var(--purple-8);
+  --accent-9: var(--purple-9);
+  --accent-10: var(--purple-10);
+  --accent-11: var(--purple-11);
+  --accent-12: var(--purple-12);
+  --accent-a1: var(--purple-a1);
+  --accent-a2: var(--purple-a2);
+  --accent-a3: var(--purple-a3);
+  --accent-a4: var(--purple-a4);
+  --accent-a5: var(--purple-a5);
+  --accent-a6: var(--purple-a6);
+  --accent-a7: var(--purple-a7);
+  --accent-a8: var(--purple-a8);
+  --accent-a9: var(--purple-a9);
+  --accent-a10: var(--purple-a10);
+  --accent-a11: var(--purple-a11);
+  --accent-a12: var(--purple-a12);
+  --accent-contrast: var(--purple-contrast);
+  --accent-surface: var(--purple-surface);
+  --accent-indicator: var(--purple-indicator);
+  --accent-track: var(--purple-track);
+}
+[data-accent-color='red'] {
+  --accent-1: var(--red-1);
+  --accent-2: var(--red-2);
+  --accent-3: var(--red-3);
+  --accent-4: var(--red-4);
+  --accent-5: var(--red-5);
+  --accent-6: var(--red-6);
+  --accent-7: var(--red-7);
+  --accent-8: var(--red-8);
+  --accent-9: var(--red-9);
+  --accent-10: var(--red-10);
+  --accent-11: var(--red-11);
+  --accent-12: var(--red-12);
+  --accent-a1: var(--red-a1);
+  --accent-a2: var(--red-a2);
+  --accent-a3: var(--red-a3);
+  --accent-a4: var(--red-a4);
+  --accent-a5: var(--red-a5);
+  --accent-a6: var(--red-a6);
+  --accent-a7: var(--red-a7);
+  --accent-a8: var(--red-a8);
+  --accent-a9: var(--red-a9);
+  --accent-a10: var(--red-a10);
+  --accent-a11: var(--red-a11);
+  --accent-a12: var(--red-a12);
+  --accent-contrast: var(--red-contrast);
+  --accent-surface: var(--red-surface);
+  --accent-indicator: var(--red-indicator);
+  --accent-track: var(--red-track);
+}
+[data-accent-color='ruby'] {
+  --accent-1: var(--ruby-1);
+  --accent-2: var(--ruby-2);
+  --accent-3: var(--ruby-3);
+  --accent-4: var(--ruby-4);
+  --accent-5: var(--ruby-5);
+  --accent-6: var(--ruby-6);
+  --accent-7: var(--ruby-7);
+  --accent-8: var(--ruby-8);
+  --accent-9: var(--ruby-9);
+  --accent-10: var(--ruby-10);
+  --accent-11: var(--ruby-11);
+  --accent-12: var(--ruby-12);
+  --accent-a1: var(--ruby-a1);
+  --accent-a2: var(--ruby-a2);
+  --accent-a3: var(--ruby-a3);
+  --accent-a4: var(--ruby-a4);
+  --accent-a5: var(--ruby-a5);
+  --accent-a6: var(--ruby-a6);
+  --accent-a7: var(--ruby-a7);
+  --accent-a8: var(--ruby-a8);
+  --accent-a9: var(--ruby-a9);
+  --accent-a10: var(--ruby-a10);
+  --accent-a11: var(--ruby-a11);
+  --accent-a12: var(--ruby-a12);
+  --accent-contrast: var(--ruby-contrast);
+  --accent-surface: var(--ruby-surface);
+  --accent-indicator: var(--ruby-indicator);
+  --accent-track: var(--ruby-track);
+}
+[data-accent-color='sky'] {
+  --accent-1: var(--sky-1);
+  --accent-2: var(--sky-2);
+  --accent-3: var(--sky-3);
+  --accent-4: var(--sky-4);
+  --accent-5: var(--sky-5);
+  --accent-6: var(--sky-6);
+  --accent-7: var(--sky-7);
+  --accent-8: var(--sky-8);
+  --accent-9: var(--sky-9);
+  --accent-10: var(--sky-10);
+  --accent-11: var(--sky-11);
+  --accent-12: var(--sky-12);
+  --accent-a1: var(--sky-a1);
+  --accent-a2: var(--sky-a2);
+  --accent-a3: var(--sky-a3);
+  --accent-a4: var(--sky-a4);
+  --accent-a5: var(--sky-a5);
+  --accent-a6: var(--sky-a6);
+  --accent-a7: var(--sky-a7);
+  --accent-a8: var(--sky-a8);
+  --accent-a9: var(--sky-a9);
+  --accent-a10: var(--sky-a10);
+  --accent-a11: var(--sky-a11);
+  --accent-a12: var(--sky-a12);
+  --accent-contrast: var(--sky-contrast);
+  --accent-surface: var(--sky-surface);
+  --accent-indicator: var(--sky-indicator);
+  --accent-track: var(--sky-track);
+}
+[data-accent-color='teal'] {
+  --accent-1: var(--teal-1);
+  --accent-2: var(--teal-2);
+  --accent-3: var(--teal-3);
+  --accent-4: var(--teal-4);
+  --accent-5: var(--teal-5);
+  --accent-6: var(--teal-6);
+  --accent-7: var(--teal-7);
+  --accent-8: var(--teal-8);
+  --accent-9: var(--teal-9);
+  --accent-10: var(--teal-10);
+  --accent-11: var(--teal-11);
+  --accent-12: var(--teal-12);
+  --accent-a1: var(--teal-a1);
+  --accent-a2: var(--teal-a2);
+  --accent-a3: var(--teal-a3);
+  --accent-a4: var(--teal-a4);
+  --accent-a5: var(--teal-a5);
+  --accent-a6: var(--teal-a6);
+  --accent-a7: var(--teal-a7);
+  --accent-a8: var(--teal-a8);
+  --accent-a9: var(--teal-a9);
+  --accent-a10: var(--teal-a10);
+  --accent-a11: var(--teal-a11);
+  --accent-a12: var(--teal-a12);
+  --accent-contrast: var(--teal-contrast);
+  --accent-surface: var(--teal-surface);
+  --accent-indicator: var(--teal-indicator);
+  --accent-track: var(--teal-track);
+}
+[data-accent-color='tomato'] {
+  --accent-1: var(--tomato-1);
+  --accent-2: var(--tomato-2);
+  --accent-3: var(--tomato-3);
+  --accent-4: var(--tomato-4);
+  --accent-5: var(--tomato-5);
+  --accent-6: var(--tomato-6);
+  --accent-7: var(--tomato-7);
+  --accent-8: var(--tomato-8);
+  --accent-9: var(--tomato-9);
+  --accent-10: var(--tomato-10);
+  --accent-11: var(--tomato-11);
+  --accent-12: var(--tomato-12);
+  --accent-a1: var(--tomato-a1);
+  --accent-a2: var(--tomato-a2);
+  --accent-a3: var(--tomato-a3);
+  --accent-a4: var(--tomato-a4);
+  --accent-a5: var(--tomato-a5);
+  --accent-a6: var(--tomato-a6);
+  --accent-a7: var(--tomato-a7);
+  --accent-a8: var(--tomato-a8);
+  --accent-a9: var(--tomato-a9);
+  --accent-a10: var(--tomato-a10);
+  --accent-a11: var(--tomato-a11);
+  --accent-a12: var(--tomato-a12);
+  --accent-contrast: var(--tomato-contrast);
+  --accent-surface: var(--tomato-surface);
+  --accent-indicator: var(--tomato-indicator);
+  --accent-track: var(--tomato-track);
+}
+[data-accent-color='violet'] {
+  --accent-1: var(--violet-1);
+  --accent-2: var(--violet-2);
+  --accent-3: var(--violet-3);
+  --accent-4: var(--violet-4);
+  --accent-5: var(--violet-5);
+  --accent-6: var(--violet-6);
+  --accent-7: var(--violet-7);
+  --accent-8: var(--violet-8);
+  --accent-9: var(--violet-9);
+  --accent-10: var(--violet-10);
+  --accent-11: var(--violet-11);
+  --accent-12: var(--violet-12);
+  --accent-a1: var(--violet-a1);
+  --accent-a2: var(--violet-a2);
+  --accent-a3: var(--violet-a3);
+  --accent-a4: var(--violet-a4);
+  --accent-a5: var(--violet-a5);
+  --accent-a6: var(--violet-a6);
+  --accent-a7: var(--violet-a7);
+  --accent-a8: var(--violet-a8);
+  --accent-a9: var(--violet-a9);
+  --accent-a10: var(--violet-a10);
+  --accent-a11: var(--violet-a11);
+  --accent-a12: var(--violet-a12);
+  --accent-contrast: var(--violet-contrast);
+  --accent-surface: var(--violet-surface);
+  --accent-indicator: var(--violet-indicator);
+  --accent-track: var(--violet-track);
+}
+[data-accent-color='yellow'] {
+  --accent-1: var(--yellow-1);
+  --accent-2: var(--yellow-2);
+  --accent-3: var(--yellow-3);
+  --accent-4: var(--yellow-4);
+  --accent-5: var(--yellow-5);
+  --accent-6: var(--yellow-6);
+  --accent-7: var(--yellow-7);
+  --accent-8: var(--yellow-8);
+  --accent-9: var(--yellow-9);
+  --accent-10: var(--yellow-10);
+  --accent-11: var(--yellow-11);
+  --accent-12: var(--yellow-12);
+  --accent-a1: var(--yellow-a1);
+  --accent-a2: var(--yellow-a2);
+  --accent-a3: var(--yellow-a3);
+  --accent-a4: var(--yellow-a4);
+  --accent-a5: var(--yellow-a5);
+  --accent-a6: var(--yellow-a6);
+  --accent-a7: var(--yellow-a7);
+  --accent-a8: var(--yellow-a8);
+  --accent-a9: var(--yellow-a9);
+  --accent-a10: var(--yellow-a10);
+  --accent-a11: var(--yellow-a11);
+  --accent-a12: var(--yellow-a12);
+  --accent-contrast: var(--yellow-contrast);
+  --accent-surface: var(--yellow-surface);
+  --accent-indicator: var(--yellow-indicator);
+  --accent-track: var(--yellow-track);
+}
+.radix-themes:where([data-gray-color='mauve']) {
+  --gray-1: var(--mauve-1);
+  --gray-2: var(--mauve-2);
+  --gray-3: var(--mauve-3);
+  --gray-4: var(--mauve-4);
+  --gray-5: var(--mauve-5);
+  --gray-6: var(--mauve-6);
+  --gray-7: var(--mauve-7);
+  --gray-8: var(--mauve-8);
+  --gray-9: var(--mauve-9);
+  --gray-10: var(--mauve-10);
+  --gray-11: var(--mauve-11);
+  --gray-12: var(--mauve-12);
+  --gray-a1: var(--mauve-a1);
+  --gray-a2: var(--mauve-a2);
+  --gray-a3: var(--mauve-a3);
+  --gray-a4: var(--mauve-a4);
+  --gray-a5: var(--mauve-a5);
+  --gray-a6: var(--mauve-a6);
+  --gray-a7: var(--mauve-a7);
+  --gray-a8: var(--mauve-a8);
+  --gray-a9: var(--mauve-a9);
+  --gray-a10: var(--mauve-a10);
+  --gray-a11: var(--mauve-a11);
+  --gray-a12: var(--mauve-a12);
+  --gray-contrast: var(--mauve-contrast);
+  --gray-surface: var(--mauve-surface);
+  --gray-indicator: var(--mauve-indicator);
+  --gray-track: var(--mauve-track);
+}
+.radix-themes:where([data-gray-color='olive']) {
+  --gray-1: var(--olive-1);
+  --gray-2: var(--olive-2);
+  --gray-3: var(--olive-3);
+  --gray-4: var(--olive-4);
+  --gray-5: var(--olive-5);
+  --gray-6: var(--olive-6);
+  --gray-7: var(--olive-7);
+  --gray-8: var(--olive-8);
+  --gray-9: var(--olive-9);
+  --gray-10: var(--olive-10);
+  --gray-11: var(--olive-11);
+  --gray-12: var(--olive-12);
+  --gray-a1: var(--olive-a1);
+  --gray-a2: var(--olive-a2);
+  --gray-a3: var(--olive-a3);
+  --gray-a4: var(--olive-a4);
+  --gray-a5: var(--olive-a5);
+  --gray-a6: var(--olive-a6);
+  --gray-a7: var(--olive-a7);
+  --gray-a8: var(--olive-a8);
+  --gray-a9: var(--olive-a9);
+  --gray-a10: var(--olive-a10);
+  --gray-a11: var(--olive-a11);
+  --gray-a12: var(--olive-a12);
+  --gray-contrast: var(--olive-contrast);
+  --gray-surface: var(--olive-surface);
+  --gray-indicator: var(--olive-indicator);
+  --gray-track: var(--olive-track);
+}
+.radix-themes:where([data-gray-color='sage']) {
+  --gray-1: var(--sage-1);
+  --gray-2: var(--sage-2);
+  --gray-3: var(--sage-3);
+  --gray-4: var(--sage-4);
+  --gray-5: var(--sage-5);
+  --gray-6: var(--sage-6);
+  --gray-7: var(--sage-7);
+  --gray-8: var(--sage-8);
+  --gray-9: var(--sage-9);
+  --gray-10: var(--sage-10);
+  --gray-11: var(--sage-11);
+  --gray-12: var(--sage-12);
+  --gray-a1: var(--sage-a1);
+  --gray-a2: var(--sage-a2);
+  --gray-a3: var(--sage-a3);
+  --gray-a4: var(--sage-a4);
+  --gray-a5: var(--sage-a5);
+  --gray-a6: var(--sage-a6);
+  --gray-a7: var(--sage-a7);
+  --gray-a8: var(--sage-a8);
+  --gray-a9: var(--sage-a9);
+  --gray-a10: var(--sage-a10);
+  --gray-a11: var(--sage-a11);
+  --gray-a12: var(--sage-a12);
+  --gray-contrast: var(--sage-contrast);
+  --gray-surface: var(--sage-surface);
+  --gray-indicator: var(--sage-indicator);
+  --gray-track: var(--sage-track);
+}
+.radix-themes:where([data-gray-color='sand']) {
+  --gray-1: var(--sand-1);
+  --gray-2: var(--sand-2);
+  --gray-3: var(--sand-3);
+  --gray-4: var(--sand-4);
+  --gray-5: var(--sand-5);
+  --gray-6: var(--sand-6);
+  --gray-7: var(--sand-7);
+  --gray-8: var(--sand-8);
+  --gray-9: var(--sand-9);
+  --gray-10: var(--sand-10);
+  --gray-11: var(--sand-11);
+  --gray-12: var(--sand-12);
+  --gray-a1: var(--sand-a1);
+  --gray-a2: var(--sand-a2);
+  --gray-a3: var(--sand-a3);
+  --gray-a4: var(--sand-a4);
+  --gray-a5: var(--sand-a5);
+  --gray-a6: var(--sand-a6);
+  --gray-a7: var(--sand-a7);
+  --gray-a8: var(--sand-a8);
+  --gray-a9: var(--sand-a9);
+  --gray-a10: var(--sand-a10);
+  --gray-a11: var(--sand-a11);
+  --gray-a12: var(--sand-a12);
+  --gray-contrast: var(--sand-contrast);
+  --gray-surface: var(--sand-surface);
+  --gray-indicator: var(--sand-indicator);
+  --gray-track: var(--sand-track);
+}
+.radix-themes:where([data-gray-color='slate']) {
+  --gray-1: var(--slate-1);
+  --gray-2: var(--slate-2);
+  --gray-3: var(--slate-3);
+  --gray-4: var(--slate-4);
+  --gray-5: var(--slate-5);
+  --gray-6: var(--slate-6);
+  --gray-7: var(--slate-7);
+  --gray-8: var(--slate-8);
+  --gray-9: var(--slate-9);
+  --gray-10: var(--slate-10);
+  --gray-11: var(--slate-11);
+  --gray-12: var(--slate-12);
+  --gray-a1: var(--slate-a1);
+  --gray-a2: var(--slate-a2);
+  --gray-a3: var(--slate-a3);
+  --gray-a4: var(--slate-a4);
+  --gray-a5: var(--slate-a5);
+  --gray-a6: var(--slate-a6);
+  --gray-a7: var(--slate-a7);
+  --gray-a8: var(--slate-a8);
+  --gray-a9: var(--slate-a9);
+  --gray-a10: var(--slate-a10);
+  --gray-a11: var(--slate-a11);
+  --gray-a12: var(--slate-a12);
+  --gray-contrast: var(--slate-contrast);
+  --gray-surface: var(--slate-surface);
+  --gray-indicator: var(--slate-indicator);
+  --gray-track: var(--slate-track);
+}
+.radix-themes {
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: default;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+  --space-1: calc(4px * var(--scaling));
+  --space-2: calc(8px * var(--scaling));
+  --space-3: calc(12px * var(--scaling));
+  --space-4: calc(16px * var(--scaling));
+  --space-5: calc(24px * var(--scaling));
+  --space-6: calc(32px * var(--scaling));
+  --space-7: calc(40px * var(--scaling));
+  --space-8: calc(48px * var(--scaling));
+  --space-9: calc(64px * var(--scaling));
+  --font-size-0: calc(10px * var(--scaling));
+  --font-size-1: calc(12px * var(--scaling));
+  --font-size-2: calc(14px * var(--scaling));
+  --font-size-3: calc(16px * var(--scaling));
+  --font-size-4: calc(18px * var(--scaling));
+  --font-size-5: calc(20px * var(--scaling));
+  --font-size-6: calc(24px * var(--scaling));
+  --font-size-7: calc(28px * var(--scaling));
+  --font-size-8: calc(35px * var(--scaling));
+  --font-size-9: calc(60px * var(--scaling));
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --line-height-0: calc(12px * var(--scaling));
+  --line-height-1: calc(16px * var(--scaling));
+  --line-height-2: calc(20px * var(--scaling));
+  --line-height-3: calc(24px * var(--scaling));
+  --line-height-4: calc(26px * var(--scaling));
+  --line-height-5: calc(28px * var(--scaling));
+  --line-height-6: calc(30px * var(--scaling));
+  --line-height-7: calc(36px * var(--scaling));
+  --line-height-8: calc(40px * var(--scaling));
+  --line-height-9: calc(60px * var(--scaling));
+  --letter-spacing-0: 0.005em;
+  --letter-spacing-1: 0.0025em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: 0em;
+  --letter-spacing-4: -0.0025em;
+  --letter-spacing-5: -0.005em;
+  --letter-spacing-6: -0.00625em;
+  --letter-spacing-7: -0.0075em;
+  --letter-spacing-8: -0.01em;
+  --letter-spacing-9: -0.025em;
+  --default-font-family: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --default-font-size: var(--font-size-3);
+  --default-font-style: normal;
+  --default-font-weight: var(--font-weight-regular);
+  --default-line-height: 1.5;
+  --default-letter-spacing: 0em;
+  --default-leading-trim-start: 0.42em;
+  --default-leading-trim-end: 0.36em;
+  --heading-font-family: var(--default-font-family);
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: 0em;
+  --heading-line-height-0: calc(12px * var(--scaling));
+  --heading-line-height-1: calc(16px * var(--scaling));
+  --heading-line-height-2: calc(18px * var(--scaling));
+  --heading-line-height-3: calc(22px * var(--scaling));
+  --heading-line-height-4: calc(24px * var(--scaling));
+  --heading-line-height-5: calc(26px * var(--scaling));
+  --heading-line-height-6: calc(30px * var(--scaling));
+  --heading-line-height-7: calc(36px * var(--scaling));
+  --heading-line-height-8: calc(40px * var(--scaling));
+  --heading-line-height-9: calc(60px * var(--scaling));
+  --code-font-family: var(--font-geist-mono, 'Geist Mono'), 'Menlo', 'Consolas (Custom)', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --code-font-size-adjust: 0.95;
+  --code-font-style: normal;
+  --code-font-weight: inherit;
+  --code-letter-spacing: -0.007em;
+  --code-padding-top: 0.1em;
+  --code-padding-bottom: 0.1em;
+  --code-padding-left: 0.25em;
+  --code-padding-right: 0.25em;
+  --strong-font-family: var(--default-font-family);
+  --strong-font-size-adjust: 1;
+  --strong-font-style: inherit;
+  --strong-font-weight: var(--font-weight-bold);
+  --strong-letter-spacing: 0em;
+  --em-font-family: 'Times New Roman', 'Times', serif;
+  --em-font-size-adjust: 1.18;
+  --em-font-style: italic;
+  --em-font-weight: inherit;
+  --em-letter-spacing: -0.025em;
+  --quote-font-family: 'Times New Roman', 'Times', serif;
+  --quote-font-size-adjust: 1.18;
+  --quote-font-style: italic;
+  --quote-font-weight: inherit;
+  --quote-letter-spacing: -0.025em;
+  --tab-active-letter-spacing: -0.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  -webkit-text-size-adjust: none;
+     -moz-text-size-adjust: none;
+          text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--gray-12);
+}
+.radix-themes:where([data-scaling='90%']) {
+  --scaling: 0.9;
+}
+.radix-themes:where([data-scaling='95%']) {
+  --scaling: 0.95;
+}
+.radix-themes:where([data-scaling='100%']) {
+  --scaling: 1;
+}
+.radix-themes:where([data-scaling='105%']) {
+  --scaling: 1.05;
+}
+.radix-themes:where([data-scaling='110%']) {
+  --scaling: 1.1;
+}
+[data-radius] {
+  --radius-1: calc(6px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(10px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(14px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(18px * var(--scaling) * var(--radius-factor));
+}
+[data-radius='none'] {
+  --radius-factor: 0;
+  --radius-full: 0px;
+  --radius-thumb: 0.5px;
+}
+[data-radius='small'] {
+  --radius-factor: 0.75;
+  --radius-full: 0px;
+  --radius-thumb: 0.5px;
+}
+[data-radius='medium'] {
+  --radius-factor: 1;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+[data-radius='large'] {
+  --radius-factor: 1.5;
+  --radius-full: 0px;
+  --radius-thumb: 9999px;
+}
+[data-radius='full'] {
+  --radius-factor: 1.5;
+  --radius-full: 9999px;
+  --radius-thumb: 9999px;
+}
+@supports (color: color-mix(in oklab, white, black)) {
+  :where(.radix-themes) {
+    --shadow-1: inset 0 0 0 1px var(--gray-a5), inset 0 1.5px 2px 0 var(--gray-a2), inset 0 1.5px 2px 0 var(--black-a2);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 0 0 0.5px var(--black-a1), 0 1px 1px 0 var(--gray-a2), 0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 2px 3px -2px var(--gray-a3), 0 3px 12px -4px var(--black-a2), 0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 8px 40px var(--black-a1), 0 12px 32px -16px var(--gray-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 12px 32px -16px var(--gray-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%), 0 12px 60px var(--black-a3), 0 16px 64px var(--gray-a2), 0 16px 36px -20px var(--gray-a7);
+  }
+}
+@supports (color: color-mix(in oklab, white, black)) {
+  :is(.dark, .dark-theme),
+  :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+    --shadow-1: inset 0 -1px 1px 0 var(--gray-a3), inset 0 0 0 1px var(--gray-a3), inset 0 3px 4px 0 var(--black-a5), inset 0 0 0 1px var(--gray-a4);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 0 0 0.5px var(--black-a3), 0 1px 1px 0 var(--black-a6), 0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 2px 3px -2px var(--black-a3), 0 3px 8px -2px var(--black-a6), 0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 8px 40px var(--black-a3), 0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a5), 0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%), 0 12px 60px var(--black-a4), 0 16px 64px var(--black-a6), 0 16px 36px -20px var(--black-a11);
+  }
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight'), local('Segoe UI');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semilight Italic'), local('Segoe UI Italic');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Italic');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold'), local('Segoe UI');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Semibold Italic'), local('Segoe UI Italic');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold');
+}
+@font-face {
+  font-family: 'Segoe UI (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 103%;
+  descent-override: 35%;
+  ascent-override: 105%;
+  src: local('Segoe UI Bold Italic');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  descent-override: 35%;
+  src: local('Open Sans Light'), local('Open Sans Regular');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 300;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Light Italic'), local('Open Sans Italic');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  descent-override: 35%;
+  src: local('Open Sans Regular');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Italic');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  descent-override: 35%;
+  src: local('Open Sans Medium'), local('Open Sans Regular');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 500;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Medium Italic'), local('Open Sans Italic');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  descent-override: 35%;
+  src: local('Open Sans Bold');
+}
+@font-face {
+  font-family: 'Open Sans (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  descent-override: 35%;
+  src: local('Open Sans Bold Italic');
+}
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas');
+}
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 400;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Italic');
+}
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold');
+}
+@font-face {
+  font-family: 'Consolas (Custom)';
+  font-weight: 700;
+  font-style: italic;
+  size-adjust: 110%;
+  ascent-override: 85%;
+  descent-override: 22%;
+  src: local('Consolas Bold Italic');
+}