diff --git a/.changeset/eight-colts-accept.md b/.changeset/eight-colts-accept.md
new file mode 100644
index 000000000..c4f555109
--- /dev/null
+++ b/.changeset/eight-colts-accept.md
@@ -0,0 +1,13 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+This library will now use CSS Modules for styling and because it's distributed unbundled, gives the consumer application full control over bundling and optimisations. You'll only include what you actually use, resulting in smaller bundle sizes and better performance!
+
+**Migration:**
+
+Your bundler must be configured to handle `.module.css` imports from `node_modules`. Most popular bundlers (Vite, webpack, Parcel, Rollup with appropriate plugins) support CSS Modules by default or with minimal configuration.
+
+NOTE: We're currently migrating from Styled-Components to CSS Modules. Some components may still use Styled-Components during the transition period.
+
+To learn more about CSS modules support, check our documentation [here](https://github.com/ClickHouse/click-ui?tab=readme-ov-file#css-modules)
diff --git a/.llm/CONVENTIONS.md b/.llm/CONVENTIONS.md
index 97379e824..953ea4f2d 100644
--- a/.llm/CONVENTIONS.md
+++ b/.llm/CONVENTIONS.md
@@ -27,6 +27,26 @@ export interface ComponentProps extends React.HTMLAttributes<HTMLElement> {
 - Use transient props (prefixed with `$`) for styled-component internal state
 - Use `data-*` attributes for styling hooks instead of generated class names
 
+### CSS Modules (BEM Naming)
+
+When using CSS Modules (migration in progress from styled-components):
+
+- **Follow BEM naming convention**:
+  - `.button` - Block (component root)
+  - `.button__icon` - Element (child of block, use double underscore)
+  - `.button--primary` - Modifier (variant/state, use double dash)
+  - `.button--primary:hover` - State pseudo-classes
+
+- **Example structure**:
+  ```css
+  .button { /* base styles */ }
+  .button__icon { /* icon element */ }
+  .button--primary { /* primary variant */ }
+  .button--primary:focus-visible { /* keyboard focus state */ }
+  ```
+- Use CSS custom properties from theme tokens: `var(--click-button-basic-color-primary-background-default)`
+- Always include `:focus-visible` styles for keyboard accessibility, never use `outline: none` without replacement
+
 ### Accessibility (Mandatory)
 
 - Interactive elements need `role`, `aria-label`, `aria-describedby`
diff --git a/.scripts/js/generate-tokens.js b/.scripts/js/generate-tokens.js
index 2b9a24ed6..153b82b32 100644
--- a/.scripts/js/generate-tokens.js
+++ b/.scripts/js/generate-tokens.js
@@ -1,7 +1,9 @@
 import { register } from '@tokens-studio/sd-transforms';
 import StyleDictionary from 'style-dictionary';
+import config from '../../src/theme/theme.config.json' with { type: 'json' };
 
 const themes = ['dark', 'light'];
+const THEME_DATA_ATTRIBUTE = `data-${config.storageKey}`;
 
 await register(StyleDictionary);
 
@@ -17,6 +19,38 @@ StyleDictionary.registerTransform({
   },
 });
 
+StyleDictionary.registerTransform({
+  type: 'name',
+  name: 'name/cti/kebab',
+  transform: (token, options) => {
+    if (options.prefix && options.prefix.length) {
+      return [options.prefix].concat(token.path).join('-');
+    } else {
+      return token.path.join('-');
+    }
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: 'css/themed-variables',
+  format: function ({ dictionary, file }) {
+    const themeName = file.destination.replace('tokens-', '').replace('.css', '');
+    const tokens = dictionary.allTokens
+      .map(token => {
+        const varName = token.path.join('-');
+        const cleanValue = String(token.value).replace(/;+$/, '');
+        return `  --${varName}: ${cleanValue};`;
+      })
+      .join('\n');
+
+    if (themeName === 'light') {
+      return `:root,\n[${THEME_DATA_ATTRIBUTE}="light"] {\n${tokens}\n}`;
+    } else {
+      return `[${THEME_DATA_ATTRIBUTE}="dark"] {\n${tokens}\n}`;
+    }
+  },
+});
+
 StyleDictionary.registerFormat({
   name: 'typescript/es6-theme',
   format: function ({ dictionary, file }) {
@@ -46,10 +80,7 @@ StyleDictionary.registerFormat({
 
 for (const theme of themes) {
   const sd = new StyleDictionary({
-    source: [
-      `./tokens/**/!(${themes.join('|')}).json`,
-      `./tokens/**/${theme}.json`,
-    ],
+    source: [`./tokens/**/!(${themes.join('|')}).json`, `./tokens/**/${theme}.json`],
     preprocessors: ['tokens-studio'],
     platforms: {
       ts: {
@@ -63,6 +94,17 @@ for (const theme of themes) {
           },
         ],
       },
+      css: {
+        transformGroup: 'tokens-studio',
+        transforms: ['name/cti/kebab'],
+        buildPath: 'src/theme/styles/',
+        files: [
+          {
+            destination: `tokens-${theme}.css`,
+            format: 'css/themed-variables',
+          },
+        ],
+      },
     },
   });
 
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 79968db5e..3af48cc27 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -32,9 +32,10 @@ const config: StorybookConfig = {
   },
 
   async viteFinal(config, { configType }) {
-    // Workaround for Storybook 10.0.7 bug where MDX files generate file:// imports
-    // See: https://github.com/storybookjs/storybook/issues (mdx-react-shim resolution)
-    config.plugins = config.plugins || [];
+    config.plugins = (config.plugins || []).filter((plugin) => {
+      const pluginName = plugin && typeof plugin === 'object' && 'name' in plugin ? plugin.name : null;
+      return pluginName !== 'css-external';
+    });
     config.plugins.push({
       name: 'fix-storybook-mdx-shim',
       resolveId(source) {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 2c2bda34e..07a324dbb 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect, ReactNode } from 'react';
-import type { Preview } from '@storybook/react-vite';
-import { Decorator } from '@storybook/react-vite';
-import { styled } from 'styled-components';
-import { themes } from 'storybook/theming';
-import { ClickUIProvider } from '@/providers';
+import { useState, useEffect, ReactNode } from "react";
+import type { Preview } from "@storybook/react-vite";
+import { Decorator } from "@storybook/react-vite";
+import { styled } from "styled-components";
+import { themes } from "storybook/theming";
+import { ClickUIProvider } from "../src/providers";
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
   ({ $left, $bfill: fill, theme }) => `
       position: absolute;
       top: 0.5rem;
-      left: ${$left || fill ? 0 : '50vw'};
+      left: ${$left || fill ? 0 : "50vw"};
       right: 0;
       height: fit-content;
       bottom: 0;
@@ -22,26 +22,28 @@ const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
 
 export const globalTypes = {
   theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'system',
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "system",
     toolbar: {
-      icon: 'circlehollow',
+      icon: "circlehollow",
       items: [
-        { value: 'system', icon: 'browser', title: 'system' },
-        { value: 'dark', icon: 'moon', title: 'dark' },
-        { value: 'light', icon: 'sun', title: 'light' },
+        { value: "system", icon: "browser", title: "system" },
+        { value: "dark", icon: "moon", title: "dark" },
+        { value: "light", icon: "sun", title: "light" },
       ],
       showName: true,
     },
   },
 };
 
-const getSystemTheme = (): 'dark' | 'light' => {
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+const getSystemTheme = (): "dark" | "light" => {
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
   }
-  return 'dark';
+  return "dark";
 };
 
 interface ThemeWrapperProps {
@@ -50,27 +52,24 @@ interface ThemeWrapperProps {
 }
 
 const ThemeWrapper = ({ themeSelection, children }: ThemeWrapperProps) => {
-  const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(getSystemTheme);
+  const [systemTheme, setSystemTheme] = useState<"dark" | "light">(getSystemTheme);
 
   // Listen for system theme changes
   useEffect(() => {
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
-      setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
+      setSystemTheme(mediaQuery.matches ? "dark" : "light");
     };
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
 
   // Resolve the actual theme: handle "system" and fallback for undefined/null
   const theme =
-    themeSelection === 'system' || !themeSelection ? systemTheme : themeSelection;
+    themeSelection === "system" || !themeSelection ? systemTheme : themeSelection;
 
   return (
-    <ClickUIProvider
-      theme={theme}
-      config={{ tooltip: { delayDuration: 0 } }}
-    >
+    <ClickUIProvider theme={theme} config={{ tooltip: { delayDuration: 0 } }}>
       <ThemeBlock $left>{children}</ThemeBlock>
     </ClickUIProvider>
   );
@@ -91,22 +90,22 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        method: 'alphabetical',
+        method: "alphabetical",
         order: [
-          'Introduction',
-          'Buttons',
-          'Cards',
-          'Layout',
-          'Forms',
-          'Display',
-          'Sidebar',
-          'Typography',
-          'Colors',
-          ['Title', 'Text', 'Link'],
+          "Introduction",
+          "Buttons",
+          "Cards",
+          "Layout",
+          "Forms",
+          "Display",
+          "Sidebar",
+          "Typography",
+          "Colors",
+          ["Title", "Text", "Link"],
         ],
       },
     },
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
diff --git a/README.md b/README.md
index 8ea54ee07..8c68bd792 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ You can find the official docs for the Click UI design system and component libr
   - [Generating design tokens](#generating-design-tokens)
   - [Local development](#local-development)
   - [Circular dependency check](#circular-dependency-check)
+  - [CSS Modules](#css-modules)
 * [Tests](#Tests)
   - [Functional tests](#functional-tests)
   - [Visual regression tests](#visual-regression-tests)
@@ -141,6 +142,39 @@ By avoiding local preview files, we ensure that component experimentation happen
 
 To get started with the development playground, refer to the Storybook section [here](#storybook).
 
+### CSS Modules
+
+This library uses [CSS Modules](https://github.com/css-modules/css-modules) for styling and is distributed unbundled, giving your application full control over bundling and optimizations. This means you only include what you actually use, resulting in smaller bundle sizes and better performance!
+
+Most modern React frameworks support CSS Modules out of the box, including Next.js, Vite, Create React App, and TanStack Start, with no configuration required.
+
+> [!NOTE]
+> We're currently migrating from Styled-Components to CSS Modules. Some components may still use Styled-Components during this transition period.
+#### Benefits
+
+CSS Modules align naturally with component-level imports. When you import a component like `Button`, its `Button.module.css` is automatically included. If you don't use the component, neither the JavaScript, or CSS will be bundled in your application's output. Only the necessary stylesheets will be included in the output bundle.
+
+#### Custom Build Configurations
+
+Although most modern React setups have CSS Modules built-in, if your build tool doesn't support it by default, you'll need to configure it.
+
+Let's assume you have an old Webpack setup. Here's an example of how that'd look like:
+
+```js
+{
+  test: /\.module\.css$/,
+  use: [
+    'style-loader',
+    {
+      loader: 'css-loader',
+      options: { modules: true }
+    }
+  ]
+}
+```
+
+For other bundlers, refer to their documentation on CSS Modules configuration.
+
 ## Tests
 
 ### Functional tests
diff --git a/package.json b/package.json
index fd98c6596..78f4ac2bf 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": ["**/*.css", "**/*.module.css"],
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -410,6 +410,8 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-tooltip": "1.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "lodash-es": "^4.17.23",
     "react-sortablejs": "^6.1.4",
@@ -471,6 +473,7 @@
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-externalize-deps": "^0.10.0",
+    "vite-plugin-static-copy": "^3.2.0",
     "vite-tsconfig-paths": "^6.0.5",
     "vitest": "^2.1.8",
     "watch": "^1.0.2"
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
new file mode 100644
index 000000000..f72871f8f
--- /dev/null
+++ b/src/components/Button/Button.module.css
@@ -0,0 +1,261 @@
+.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-shrink: 0;
+  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
+  border-radius: var(--click-button-radii-all);
+  gap: var(--click-button-basic-space-gap);
+  font: var(--click-button-basic-typography-label-default);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  transition: font var(--click-transition-default);
+}
+
+.button--align-center {
+  justify-content: center;
+}
+
+.button--align-left {
+  justify-content: flex-start;
+}
+
+.button--fill {
+  width: 100%;
+}
+
+.button--primary {
+  background-color: var(--click-button-basic-color-primary-background-default);
+  color: var(--click-button-basic-color-primary-text-default);
+  border-color: var(--click-button-basic-color-primary-stroke-default);
+}
+
+.button--primary:hover:not(:disabled) {
+  background-color: var(--click-button-basic-color-primary-background-hover);
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button--primary:active:not(:disabled),
+.button--primary:focus:not(:focus-visible):not(:disabled) {
+  background-color: var(--click-button-basic-color-primary-background-active);
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button--primary:focus-visible:not(:disabled) {
+  background-color: var(--click-button-basic-color-primary-background-active);
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button--primary:disabled {
+  background-color: var(--click-button-basic-color-primary-background-disabled);
+  color: var(--click-button-basic-color-primary-text-disabled);
+  border-color: var(--click-button-basic-color-primary-stroke-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button--secondary {
+  background-color: var(--click-button-basic-color-secondary-background-default);
+  color: var(--click-button-basic-color-secondary-text-default);
+  border-color: var(--click-button-basic-color-secondary-stroke-default);
+}
+
+.button--secondary:hover:not(:disabled) {
+  background-color: var(--click-button-basic-color-secondary-background-hover);
+  border-color: var(--click-button-basic-color-secondary-stroke-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button--secondary:active:not(:disabled),
+.button--secondary:focus:not(:focus-visible):not(:disabled) {
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button--secondary:focus-visible:not(:disabled) {
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button--secondary:disabled {
+  background-color: var(--click-button-basic-color-secondary-background-disabled);
+  color: var(--click-button-basic-color-secondary-text-disabled);
+  border-color: var(--click-button-basic-color-secondary-stroke-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button--empty {
+  background-color: var(--click-button-basic-color-empty-background-default);
+  color: var(--click-button-basic-color-empty-text-default);
+  border-color: var(--click-button-basic-color-empty-stroke-default);
+}
+
+.button--empty:hover:not(:disabled) {
+  background-color: var(--click-button-basic-color-empty-background-hover);
+  border-color: var(--click-button-basic-color-empty-stroke-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button--empty:active:not(:disabled),
+.button--empty:focus:not(:focus-visible):not(:disabled) {
+  background-color: var(--click-button-basic-color-empty-background-active);
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button--empty:focus-visible:not(:disabled) {
+  background-color: var(--click-button-basic-color-empty-background-active);
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-empty-stroke-active);
+  outline-offset: 2px;
+}
+
+.button--empty:disabled {
+  background-color: var(--click-button-basic-color-empty-background-disabled);
+  color: var(--click-button-basic-color-empty-text-disabled);
+  border-color: var(--click-button-basic-color-empty-stroke-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button--danger {
+  background-color: var(--click-button-basic-color-danger-background-default);
+  color: var(--click-button-basic-color-danger-text-default);
+  border-color: var(--click-button-basic-color-danger-stroke-default);
+}
+
+.button--danger:hover:not(:disabled) {
+  background-color: var(--click-button-basic-color-danger-background-hover);
+  border-color: var(--click-button-basic-color-danger-stroke-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button--danger:active:not(:disabled),
+.button--danger:focus:not(:focus-visible):not(:disabled) {
+  background-color: var(--click-button-basic-color-danger-background-active);
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button--danger:focus-visible:not(:disabled) {
+  background-color: var(--click-button-basic-color-danger-background-active);
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-danger-stroke-active);
+  outline-offset: 2px;
+}
+
+.button--danger:disabled {
+  background-color: var(--click-button-basic-color-danger-background-disabled);
+  color: var(--click-button-basic-color-danger-text-disabled);
+  border-color: var(--click-button-basic-color-danger-stroke-disabled);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button--loading {
+  cursor: not-allowed;
+}
+
+.button--loading::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.button--primary.button--loading,
+.button--secondary.button--loading,
+.button--danger.button--loading {
+  opacity: 0.7;
+}
+
+.button--empty.button--loading {
+  opacity: 0.9;
+}
+
+.button--loading > * {
+  opacity: 0.7;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.button--primary.button--loading::before {
+  background: var(--click-button-basic-color-primary-background-loading);
+  background-size: 200% 100%;
+}
+
+.button--secondary.button--loading::before {
+  background: var(--click-button-basic-color-secondary-background-loading);
+  background-size: 200% 100%;
+}
+
+.button--empty.button--loading::before {
+  background: var(--click-button-basic-color-empty-background-loading);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+}
+
+.button--danger.button--loading::before {
+  background: var(--click-button-basic-color-danger-background-loading);
+  background-size: 200% 100%;
+}
+
+.button__icon {
+  height: var(--click-button-basic-size-icon-all);
+  width: var(--click-button-basic-size-icon-all);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button__icon svg {
+  height: var(--click-button-basic-size-icon-all);
+  width: var(--click-button-basic-size-icon-all);
+}
+
+.button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button--loading::before {
+    animation: none;
+  }
+}
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 7eca0e355..1e05e4d3d 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -21,3 +21,143 @@ export const Playground: Story = {
     loading: false,
   },
 };
+
+export const Primary: Story = {
+  args: {
+    type: 'primary',
+    label: 'Primary Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: 'secondary',
+    label: 'Secondary Button',
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    type: 'empty',
+    label: 'Empty Button',
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    type: 'danger',
+    label: 'Danger Button',
+  },
+};
+
+export const PrimaryLoading: Story = {
+  args: {
+    type: 'primary',
+    label: 'Loading...',
+    loading: true,
+  },
+};
+
+export const SecondaryLoading: Story = {
+  args: {
+    type: 'secondary',
+    label: 'Loading...',
+    loading: true,
+  },
+};
+
+export const EmptyLoading: Story = {
+  args: {
+    type: 'empty',
+    label: 'Loading...',
+    loading: true,
+  },
+};
+
+export const DangerLoading: Story = {
+  args: {
+    type: 'danger',
+    label: 'Loading...',
+    loading: true,
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    type: 'primary',
+    label: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const SecondaryDisabled: Story = {
+  args: {
+    type: 'secondary',
+    label: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const EmptyDisabled: Story = {
+  args: {
+    type: 'empty',
+    label: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const DangerDisabled: Story = {
+  args: {
+    type: 'danger',
+    label: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const WithIconLeft: Story = {
+  args: {
+    type: 'primary',
+    label: 'With Left Icon',
+    iconLeft: 'chevron-left',
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    type: 'primary',
+    label: 'With Right Icon',
+    iconRight: 'chevron-right',
+  },
+};
+
+export const WithIconsBoth: Story = {
+  args: {
+    type: 'primary',
+    label: 'Both Icons',
+    iconLeft: 'chevron-left',
+    iconRight: 'chevron-right',
+  },
+};
+
+export const FillWidth: Story = {
+  args: {
+    type: 'primary',
+    label: 'Full Width Button',
+    fillWidth: true,
+  },
+};
+
+export const AlignLeft: Story = {
+  args: {
+    type: 'primary',
+    label: 'Left Aligned',
+    align: 'left',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    type: 'primary',
+    label: 'Click Me',
+  },
+};
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index aabdfe63a..91f36bf4c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,189 +1,106 @@
-import { Icon } from '@/components/Icon';
-import { styled, keyframes } from 'styled-components';
-import { BaseButton } from './BaseButton';
-import { Alignment, ButtonProps, ButtonType } from './Button.types';
-
-export const Button = ({
-  type = 'primary',
-  iconLeft,
-  iconRight,
-  align = 'center',
-  children,
-  fillWidth,
-  label,
-  loading = false,
-  disabled,
-  ...delegated
-}: ButtonProps) => (
-  <StyledButton
-    $styleType={type}
-    $align={align}
-    $fillWidth={fillWidth}
-    $loading={loading}
-    disabled={disabled || loading}
-    aria-disabled={disabled || loading}
-    role="button"
-    data-fill-width={fillWidth}
-    {...delegated}
-  >
-    {iconLeft && (
-      <ButtonIcon
-        name={iconLeft}
-        aria-hidden
-        size="sm"
-      />
-    )}
-
-    <span>{label ?? children}</span>
-
-    {iconRight && (
-      <ButtonIcon
-        name={iconRight}
-        aria-hidden
-        size="sm"
-      />
-    )}
-  </StyledButton>
-);
-
-const shimmerFullWidth = keyframes({
-  '0%': {
-    backgroundPosition: '100% 0',
+import { Icon, IconName } from '@/components/Icon';
+import { cn, cva } from '@/lib/cva';
+import { forwardRef } from 'react';
+import styles from './Button.module.css';
+
+export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
+type Alignment = 'center' | 'left';
+
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  // TODO: The type prop ('primary' | 'secondary' | 'empty' | 'danger') shadows the native <button type="submit|reset|button"> attribute. Since type is destructured before ...delegated, consumers can never pass type="submit" for form submission. Consider renaming the visual variant prop to variant (consistent with the CSS class names button--primary etc.). This is a public API problem!
+  /** The visual style variant of the button */
+  type?: ButtonType;
+  /** Whether the button is disabled */
+  disabled?: boolean;
+  /** The text label to display in the button */
+  label?: string;
+  /** Icon to display on the left side of the label */
+  iconLeft?: IconName;
+  /** Icon to display on the right side of the label */
+  iconRight?: IconName;
+  /** Alignment of the button content */
+  align?: Alignment;
+  /** Whether the button should fill the full width of its container */
+  fillWidth?: boolean;
+  /** Whether to show a loading state */
+  loading?: boolean;
+  /** Whether the button should be focused on mount */
+  autoFocus?: boolean;
+}
+
+const buttonVariants = cva(styles.button, {
+  variants: {
+    type: {
+      primary: styles['button--primary'],
+      secondary: styles['button--secondary'],
+      empty: styles['button--empty'],
+      danger: styles['button--danger'],
+    },
+    align: {
+      center: styles['button--align-center'],
+      left: styles['button--align-left'],
+    },
+    fillWidth: {
+      true: styles['button--fill'],
+    },
+    loading: {
+      true: styles['button--loading'],
+    },
   },
-  '100%': {
-    backgroundPosition: '-100% 0',
+  defaultVariants: {
+    type: 'primary',
+    align: 'center',
   },
 });
 
-const shimmerFixedWidth = keyframes({
-  '0%': {
-    backgroundPosition: '-200px 0',
-  },
-  '100%': {
-    backgroundPosition: '200px 0',
-  },
-});
-
-const StyledButton = styled(BaseButton)<{
-  $styleType: ButtonType;
-  $align?: Alignment;
-  $fillWidth?: boolean;
-  $loading?: boolean;
-}>`
-  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'revert')};
-  color: ${({ $styleType = 'primary', theme }) =>
-    theme.click.button.basic.color[$styleType].text.default};
-  background-color: ${({ $styleType = 'primary', theme }) =>
-    theme.click.button.basic.color[$styleType].background.default};
-  border: ${({ theme }) => theme.click.button.stroke} solid
-    ${({ $styleType = 'primary', theme }) =>
-      theme.click.button.basic.color[$styleType].stroke.default};
-  font: ${({ theme }) => theme.click.button.basic.typography.label.default};
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $align }) => ($align === 'left' ? 'flex-start' : 'center')};
-  white-space: nowrap;
-  overflow: hidden;
-  flex-shrink: 0;
-
-  &::before {
-    content: ${({ $loading }) => ($loading ? '""' : 'none')};
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    background: ${({ $styleType, theme }) =>
-      theme.click.button.basic.color[$styleType].background.loading};
-    background-size: ${({ $fillWidth }) => ($fillWidth ? '200% 100%' : '200px 100%')};
-    background-repeat: ${({ $fillWidth }) => ($fillWidth ? 'repeat' : 'no-repeat')};
-  }
-
-  &[data-fill-width='true']::before {
-    animation: ${shimmerFullWidth} 1.5s ease-in-out infinite;
-  }
-
-  &[data-fill-width='false']::before,
-  &:not([data-fill-width])::before {
-    animation: ${shimmerFixedWidth} 1.5s ease-in-out infinite;
-  }
-
-  &:hover {
-    background-color: ${({ $styleType = 'primary', theme }) =>
-      theme.click.button.basic.color[$styleType].background.hover};
-    border: ${({ theme }) => theme.click.button.stroke} solid
-      ${({ $styleType = 'primary', theme }) =>
-        theme.click.button.basic.color[$styleType].stroke.hover};
-    transition: ${({ theme }) => theme.transition.default};
-    font: ${({ theme }) => theme.click.button.basic.typography.label.hover};
-  }
-
-  &:active,
-  &:focus {
-    background-color: ${({ $styleType = 'primary', theme }) =>
-      theme.click.button.basic.color[$styleType].background.active};
-    border: 1px solid
-      ${({ $styleType = 'primary', theme }) =>
-        theme.click.button.basic.color[$styleType].stroke.active};
-    font: ${({ theme }) => theme.click.button.basic.typography.label.active};
-  }
-
-  ${({ $loading, $styleType, theme }) => {
-    if ($loading) {
-      return '';
-    }
-
-    const bgDisabled = theme.click.button.basic.color[$styleType].background.disabled;
-    const textDisabled = theme.click.button.basic.color[$styleType].text.disabled;
-    const strokeDisabled = theme.click.button.basic.color[$styleType].stroke.disabled;
-    const stroke = theme.click.button.stroke;
-    const fontDisabled = theme.click.button.basic.typography.label.disabled;
-
-    return `
-      &:disabled,
-      &:disabled:hover,
-      &:disabled:active {
-        background-color: ${bgDisabled};
-        color: ${textDisabled};
-        border: ${stroke} solid ${strokeDisabled};
-        font: ${fontDisabled};
-        cursor: not-allowed;
-      }
-    `;
-  }}
-
-  /* Loading state styling */
-  ${({ $loading, $styleType }) => {
-    if (!$loading) {
-      return '';
-    }
-
-    const btnOpacity = $styleType === 'empty' ? 0.9 : 0.7;
-
-    return `
-      cursor: not-allowed;
-      opacity: ${btnOpacity};
-
-      /* Dim text and icons */
-      > * {
-        opacity: 0.7;
-      }
-    `;
-  }}
-`;
-
-// Lazy wrapper to avoid circular dependency issues at module load time
-const ButtonIconWrapper = (props: React.ComponentProps<typeof Icon>) => (
-  <Icon {...props} />
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      type = 'primary',
+      iconLeft,
+      iconRight,
+      align = 'center',
+      children,
+      fillWidth,
+      label,
+      loading = false,
+      disabled,
+      className,
+      ...delegated
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ type, align, fillWidth, loading }), className)}
+      disabled={disabled || loading}
+      aria-disabled={disabled || loading}
+      aria-busy={loading}
+      {...delegated}
+    >
+      {iconLeft && (
+        <span className={styles.button__icon}>
+          <Icon
+            name={iconLeft}
+            aria-hidden
+            size="sm"
+          />
+        </span>
+      )}
+
+      <span className={styles.button__label}>{label ?? children}</span>
+
+      {iconRight && (
+        <span className={styles.button__icon}>
+          <Icon
+            name={iconRight}
+            aria-hidden
+            size="sm"
+          />
+        </span>
+      )}
+    </button>
+  )
 );
 
-const ButtonIcon = styled(ButtonIconWrapper)`
-  height: ${({ theme }) => theme.click.button.basic.size.icon.all};
-  width: ${({ theme }) => theme.click.button.basic.size.icon.all};
-  svg {
-    height: ${({ theme }) => theme.click.button.basic.size.icon.all};
-    width: ${({ theme }) => theme.click.button.basic.size.icon.all};
-  }
-`;
+Button.displayName = 'Button';
diff --git a/src/components/GenericMenu/GenericMenu.tsx b/src/components/GenericMenu/GenericMenu.tsx
index a84c097c2..9cc473481 100644
--- a/src/components/GenericMenu/GenericMenu.tsx
+++ b/src/components/GenericMenu/GenericMenu.tsx
@@ -101,7 +101,7 @@ export const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`
       cursor: pointer;
     }
     [data-input-modality="keyboard"] &[data-highlighted] {
-      outline: 2px solid ${theme.click.genericMenu.item.color[colorKey].stroke.focus};
+      outline: 2px solid ${theme.click.global.color.accent.default};
       outline-offset: -2px;
     }
     &[data-state="open"] {
diff --git a/src/lib/cva.ts b/src/lib/cva.ts
new file mode 100644
index 000000000..8033553a5
--- /dev/null
+++ b/src/lib/cva.ts
@@ -0,0 +1,4 @@
+export { cva, type VariantProps } from 'class-variance-authority';
+import { clsx, type ClassValue } from 'clsx';
+
+export const cn = (...inputs: ClassValue[]) => clsx(inputs);
diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
index a998d49e5..7edad26f3 100644
--- a/src/providers/ThemeProvider.tsx
+++ b/src/providers/ThemeProvider.tsx
@@ -7,6 +7,9 @@ import type { ThemeName } from '@/theme/theme.types';
 import { themes } from '@/theme/theme.core';
 import { isValidThemeName } from '@/theme/theme.utils';
 
+import '@/theme/styles/tokens-light.css';
+import '@/theme/styles/tokens-dark.css';
+
 const GlobalStyle = createGlobalStyle`
   body{
     color: ${props => props.theme.click.global.color.text.default};
diff --git a/src/theme/styles/tokens-dark.css b/src/theme/styles/tokens-dark.css
new file mode 100644
index 000000000..72ae92b72
--- /dev/null
+++ b/src/theme/styles/tokens-dark.css
@@ -0,0 +1,1806 @@
+[data-cui-theme="dark"] {
+  --click-accordion-sm-icon-size-height: 1rem;
+  --click-accordion-sm-icon-size-width: 1rem;
+  --click-accordion-sm-space-gap: 0.25rem;
+  --click-accordion-sm-typography-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-sm-typography-label-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-sm-typography-label-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-icon-size-height: 1.25rem;
+  --click-accordion-md-icon-size-width: 1.25rem;
+  --click-accordion-md-space-gap: 0.25rem;
+  --click-accordion-md-typography-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-typography-label-hover: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-typography-label-active: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-icon-size-height: 1.5rem;
+  --click-accordion-lg-icon-size-width: 1.5rem;
+  --click-accordion-lg-space-gap: 0.25rem;
+  --click-accordion-lg-typography-label-default: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-typography-label-hover: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-typography-label-active: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-color-default-label-default: #ffffff;
+  --click-accordion-color-default-label-hover: rgb(100% 100% 100%);
+  --click-accordion-color-default-label-active: #ffffff;
+  --click-accordion-color-default-icon-default: #ffffff;
+  --click-accordion-color-default-icon-hover: rgb(100% 100% 100%);
+  --click-accordion-color-default-icon-active: #ffffff;
+  --click-accordion-color-link-label-default: #faff69;
+  --click-accordion-color-link-label-hover: #feffc2;
+  --click-accordion-color-link-label-active: #faff69;
+  --click-accordion-color-link-icon-default: #faff69;
+  --click-accordion-color-link-icon-hover: rgb(99.637% 100% 77.873%);
+  --click-accordion-color-link-icon-active: #faff69;
+  --click-alert-medium-space-y: 0.75rem;
+  --click-alert-medium-space-x: 0.75rem;
+  --click-alert-medium-space-gap: 0;
+  --click-alert-medium-space-banner: 0.5rem;
+  --click-alert-medium-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-medium-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-medium-icon-height: 1.25rem;
+  --click-alert-medium-icon-width: 1.25rem;
+  --click-alert-small-space-y: 0.5rem;
+  --click-alert-small-space-x: 0.75rem;
+  --click-alert-small-space-gap: 0;
+  --click-alert-small-space-banner: 0.25rem;
+  --click-alert-small-icon-height: 1rem;
+  --click-alert-small-icon-width: 1rem;
+  --click-alert-small-typography-title-default: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-small-typography-text-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-radii-center: 0;
+  --click-alert-radii-end: 0.25rem;
+  --click-alert-color-background-default: #1f1f1c;
+  --click-alert-color-background-success: rgb(20% 100% 26.667% / 0.2);
+  --click-alert-color-background-neutral: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-alert-color-background-danger: rgb(100% 13.725% 13.725% / 0.2);
+  --click-alert-color-background-warning: rgb(100% 46.667% 16.078% / 0.2);
+  --click-alert-color-background-info: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-alert-color-text-default: #b3b6bd;
+  --click-alert-color-text-success: #ccffd0;
+  --click-alert-color-text-neutral: #c0c0c0;
+  --click-alert-color-text-danger: #ffbaba;
+  --click-alert-color-text-warning: #ffb88f;
+  --click-alert-color-text-info: #d0dffb;
+  --click-alert-color-iconBackground-default: #1f1f1c;
+  --click-alert-color-iconBackground-success: rgb(20% 100% 26.667% / 0);
+  --click-alert-color-iconBackground-neutral: rgb(62.745% 62.745% 62.745% / 0);
+  --click-alert-color-iconBackground-danger: rgb(100% 13.725% 13.725% / 0);
+  --click-alert-color-iconBackground-warning: rgb(100% 46.667% 16.078% / 0);
+  --click-alert-color-iconBackground-info: rgb(26.275% 49.412% 93.725% / 0);
+  --click-alert-color-iconForeground-default: #b3b6bd;
+  --click-alert-color-iconForeground-success: lch(95.558 28.893 143.93 / 0.75);
+  --click-alert-color-iconForeground-neutral: lch(77.704 0 none / 0.75);
+  --click-alert-color-iconForeground-danger: lch(82.069 27.695 22.026 / 0.75);
+  --click-alert-color-iconForeground-warning: lch(80.892 39.042 53.918 / 0.75);
+  --click-alert-color-iconForeground-info: lch(88.343 15.514 266.4 / 0.75);
+  --click-avatar-typography-label-sm-default: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-sm-hover: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-sm-active: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-default: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-hover: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-active: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-size-label-width: 1.5rem;
+  --click-avatar-size-width: 1.5rem;
+  --click-avatar-size-height: 1.5rem;
+  --click-avatar-radii-all: 9999px;
+  --click-avatar-color-background-default: #808691;
+  --click-avatar-color-background-hover: #b3b6bd;
+  --click-avatar-color-background-active: #b3b6bd;
+  --click-avatar-color-text-default: #1f1f1c;
+  --click-avatar-color-text-hover: #1f1f1c;
+  --click-avatar-color-text-active: #1f1f1c;
+  --click-badge-space-md-x: 0.75rem;
+  --click-badge-space-md-y: 0.125rem;
+  --click-badge-space-md-gap: 0.25rem;
+  --click-badge-space-sm-x: 0.5rem;
+  --click-badge-space-sm-y: 0.1563rem;
+  --click-badge-space-sm-gap: 0.125rem;
+  --click-badge-typography-label-md-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-badge-typography-label-sm-default: 500 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-badge-radii-all: 9999px;
+  --click-badge-stroke: 1px;
+  --click-badge-icon-md-size-height: 0.75rem;
+  --click-badge-icon-md-size-width: 0.75rem;
+  --click-badge-icon-sm-size-height: 0.625rem;
+  --click-badge-icon-sm-size-width: 0.625rem;
+  --click-badge-opaque-color-background-default: #1f1f1c;
+  --click-badge-opaque-color-background-success: rgb(20% 100% 26.667% / 0.2);
+  --click-badge-opaque-color-background-neutral: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-badge-opaque-color-background-danger: rgb(100% 13.725% 13.725% / 0.2);
+  --click-badge-opaque-color-background-disabled: #414141;
+  --click-badge-opaque-color-background-info: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-badge-opaque-color-background-warning: rgb(100% 46.667% 16.078% / 0.2);
+  --click-badge-opaque-color-text-default: #b3b6bd;
+  --click-badge-opaque-color-text-success: #ccffd0;
+  --click-badge-opaque-color-text-neutral: #c0c0c0;
+  --click-badge-opaque-color-text-danger: #ffbaba;
+  --click-badge-opaque-color-text-disabled: #808080;
+  --click-badge-opaque-color-text-info: #d0dffb;
+  --click-badge-opaque-color-text-warning: #ffb88f;
+  --click-badge-opaque-color-stroke-default: #323232;
+  --click-badge-opaque-color-stroke-success: rgb(20% 100% 26.667% / 0.1);
+  --click-badge-opaque-color-stroke-neutral: rgb(62.745% 62.745% 62.745% / 0.1);
+  --click-badge-opaque-color-stroke-danger: rgb(100% 22.353% 22.353% / 0.2);
+  --click-badge-opaque-color-stroke-disabled: rgb(24.216% 24.216% 24.216%);
+  --click-badge-opaque-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-badge-opaque-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.1);
+  --click-badge-solid-color-background-default: #c0c0c0;
+  --click-badge-solid-color-background-success: #99ffa1;
+  --click-badge-solid-color-background-neutral: #c0c0c0;
+  --click-badge-solid-color-background-danger: #ff9898;
+  --click-badge-solid-color-background-disabled: #414141;
+  --click-badge-solid-color-background-info: #a1bef7;
+  --click-badge-solid-color-background-warning: #ff9457;
+  --click-badge-solid-color-text-default: #1f1f1c;
+  --click-badge-solid-color-text-success: #1f1f1c;
+  --click-badge-solid-color-text-neutral: #1f1f1c;
+  --click-badge-solid-color-text-danger: #1f1f1c;
+  --click-badge-solid-color-text-disabled: #808080;
+  --click-badge-solid-color-text-info: #1f1f1c;
+  --click-badge-solid-color-text-warning: #1f1f1c;
+  --click-badge-solid-color-stroke-default: rgb(19.608% 19.608% 19.608% / 0.1);
+  --click-badge-solid-color-stroke-success: rgb(20% 100% 26.667% / 0.1);
+  --click-badge-solid-color-stroke-neutral: rgb(62.745% 62.745% 62.745% / 0.1);
+  --click-badge-solid-color-stroke-danger: rgb(100% 22.353% 22.353% / 0.2);
+  --click-badge-solid-color-stroke-disabled: rgb(24.216% 24.216% 24.216%);
+  --click-badge-solid-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-badge-solid-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.1);
+  --click-bigStat-space-all: 1rem;
+  --click-bigStat-space-sm-gap: 0;
+  --click-bigStat-space-lg-gap: 0.5rem;
+  --click-bigStat-radii-all: 0.25rem;
+  --click-bigStat-stroke: 1px;
+  --click-bigStat-typography-lg-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-label-muted: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-title-default: 700 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-title-muted: 700 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-label-muted: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-title-muted: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-color-stroke-default: #323232;
+  --click-bigStat-color-stroke-muted: #323232;
+  --click-bigStat-color-stroke-danger: #ffbaba;
+  --click-bigStat-color-background-default: #1f1f1c;
+  --click-bigStat-color-background-muted: #282828;
+  --click-bigStat-color-label-default: #b3b6bd;
+  --click-bigStat-color-label-muted: #b3b6bd;
+  --click-bigStat-color-label-danger: #ffbaba;
+  --click-bigStat-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-bigStat-color-title-muted: rgb(97.5% 97.5% 97.5%);
+  --click-button-radii-all: 0.25rem;
+  --click-button-basic-space-x: 1rem;
+  --click-button-basic-space-y: 0.2813rem;
+  --click-button-basic-space-gap: 0.5rem;
+  --click-button-basic-space-group: 0.5rem;
+  --click-button-basic-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-size-icon-height: 0.9688rem;
+  --click-button-basic-size-icon-all: 0.9688rem;
+  --click-button-basic-size-icon-width: 0.9688rem;
+  --click-button-basic-color-primary-background-default: #faff69;
+  --click-button-basic-color-primary-background-hover: rgb(98.627% 100% 58.824%);
+  --click-button-basic-color-primary-background-active: rgb(90.686% 92.5% 38.088%);
+  --click-button-basic-color-primary-background-disabled: #414141;
+  --click-button-basic-color-primary-background-loading: linear-gradient(90deg, rgb(206, 211, 84, 0.1) 0%, rgb(206, 211, 84) 100%);
+  --click-button-basic-color-primary-text-default: #1f1f1c;
+  --click-button-basic-color-primary-text-hover: #1f1f1c;
+  --click-button-basic-color-primary-text-active: #1f1f1c;
+  --click-button-basic-color-primary-text-disabled: #808080;
+  --click-button-basic-color-primary-stroke-default: #faff69;
+  --click-button-basic-color-primary-stroke-hover: #faff69;
+  --click-button-basic-color-primary-stroke-active: rgb(82.978% 84.638% 34.851%);
+  --click-button-basic-color-primary-stroke-disabled: #414141;
+  --click-button-basic-color-secondary-background-default: #1f1f1c;
+  --click-button-basic-color-secondary-background-hover: #282828;
+  --click-button-basic-color-secondary-background-active: rgb(19.902% 19.902% 19.902%);
+  --click-button-basic-color-secondary-background-disabled: #414141;
+  --click-button-basic-color-secondary-background-loading: linear-gradient(90deg, rgb(48, 48, 43, 0.1) 0%, rgb(48, 48, 43) 100%);
+  --click-button-basic-color-secondary-stroke-default: #414141;
+  --click-button-basic-color-secondary-stroke-hover: #53575f;
+  --click-button-basic-color-secondary-stroke-active: rgb(22.882% 22.137% 23.627%);
+  --click-button-basic-color-secondary-stroke-disabled: #414141;
+  --click-button-basic-color-secondary-text-default: #ffffff;
+  --click-button-basic-color-secondary-text-hover: #ffffff;
+  --click-button-basic-color-secondary-text-active: #ffffff;
+  --click-button-basic-color-secondary-text-disabled: #808080;
+  --click-button-basic-color-danger-background-default: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-basic-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.3);
+  --click-button-basic-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.45);
+  --click-button-basic-color-danger-background-disabled: #414141;
+  --click-button-basic-color-danger-background-loading: linear-gradient(90deg, rgb(93, 45, 42, 0.1) 0%, rgb(93, 45, 42) 100%);
+  --click-button-basic-color-danger-text-default: #ffbaba;
+  --click-button-basic-color-danger-text-hover: #ffbaba;
+  --click-button-basic-color-danger-text-active: #ffbaba;
+  --click-button-basic-color-danger-text-disabled: #808080;
+  --click-button-basic-color-danger-stroke-default: rgb(100% 22.353% 22.353% / 0.2);
+  --click-button-basic-color-danger-stroke-hover: rgb(100% 13.725% 13.725% / 0.05);
+  --click-button-basic-color-danger-stroke-active: rgb(100% 13.725% 13.725% / 0.05);
+  --click-button-basic-color-danger-stroke-disabled: #414141;
+  --click-button-basic-color-empty-text-default: #faff69;
+  --click-button-basic-color-empty-text-hover: #feffc2;
+  --click-button-basic-color-empty-text-active: #faff69;
+  --click-button-basic-color-empty-text-disabled: #a0a0a0;
+  --click-button-basic-color-empty-background-default: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-hover: #282828;
+  --click-button-basic-color-empty-background-active: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-disabled: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-loading: linear-gradient(90deg, rgb(50, 51, 27, 0.1) 0%, rgb(50, 51, 27, 0.5) 100%);
+  --click-button-basic-color-empty-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-iconButton-default-space-x: 0.4375rem;
+  --click-button-iconButton-default-space-y: 0.4375rem;
+  --click-button-iconButton-size-small: 0.75rem;
+  --click-button-iconButton-size-medium: 1rem;
+  --click-button-iconButton-size-large: 1.25rem;
+  --click-button-iconButton-radii-all: 0.25rem;
+  --click-button-iconButton-sm-space-x: 0.25rem;
+  --click-button-iconButton-sm-space-y: 0.25rem;
+  --click-button-iconButton-xs-space-x: 0;
+  --click-button-iconButton-xs-space-y: 0;
+  --click-button-iconButton-color-primary-background-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-primary-background-hover: #282828;
+  --click-button-iconButton-color-primary-background-active: rgb(14.118% 14.118% 14.118%);
+  --click-button-iconButton-color-primary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-primary-stroke-hover: #282828;
+  --click-button-iconButton-color-primary-stroke-active: rgb(14.118% 14.118% 14.118%);
+  --click-button-iconButton-color-primary-text-default: #ffffff;
+  --click-button-iconButton-color-primary-text-hover: #ffffff;
+  --click-button-iconButton-color-primary-text-active: #ffffff;
+  --click-button-iconButton-color-secondary-background-default: #faff69;
+  --click-button-iconButton-color-secondary-background-hover: rgb(98.627% 100% 58.824%);
+  --click-button-iconButton-color-secondary-background-active: rgb(86.152% 87.875% 36.184%);
+  --click-button-iconButton-color-secondary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-secondary-stroke-hover: rgb(98.627% 100% 58.824%);
+  --click-button-iconButton-color-secondary-stroke-active: rgb(86.152% 87.875% 36.184%);
+  --click-button-iconButton-color-secondary-text-default: #1f1f1c;
+  --click-button-iconButton-color-secondary-text-hover: #1f1f1c;
+  --click-button-iconButton-color-secondary-text-active: #1f1f1c;
+  --click-button-iconButton-color-disabled-background-default: #414141;
+  --click-button-iconButton-color-disabled-text-default: #808080;
+  --click-button-iconButton-color-danger-background-default: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-iconButton-color-danger-background-hover: #ff9898;
+  --click-button-iconButton-color-danger-background-active: #c10000;
+  --click-button-iconButton-color-danger-text-default: #ffbaba;
+  --click-button-iconButton-color-danger-text-hover: #ffbaba;
+  --click-button-iconButton-color-danger-text-active: #ffbaba;
+  --click-button-iconButton-color-danger-stroke-default: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-iconButton-color-danger-stroke-hover: rgb(100% 13.725% 13.725% / 0.3);
+  --click-button-iconButton-color-danger-stroke-active: rgb(100% 13.725% 13.725% / 0.45);
+  --click-button-iconButton-color-ghost-background-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-background-hover: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-background-active: rgb(0% 0% 0% / 0);
+  --click-button-iconButton-color-ghost-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-text-default: #b3b6bd;
+  --click-button-iconButton-color-ghost-text-hover: #ffffff;
+  --click-button-iconButton-color-ghost-text-active: #ffffff;
+  --click-button-iconButton-color-info-background-default: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-button-iconButton-color-info-background-hover: #1d64ec;
+  --click-button-iconButton-color-info-background-active: #437eef;
+  --click-button-iconButton-color-info-text-default: #d0dffb;
+  --click-button-iconButton-color-info-text-hover: #d0dffb;
+  --click-button-iconButton-color-info-text-active: #d0dffb;
+  --click-button-iconButton-color-info-stroke-default: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-button-iconButton-color-info-stroke-hover: #1d64ec;
+  --click-button-iconButton-color-info-stroke-active: #437eef;
+  --click-button-stroke: 1px;
+  --click-button-split-icon-space-y: 0.4375rem;
+  --click-button-split-icon-space-x: 0.3438rem;
+  --click-button-split-space-x: 1rem;
+  --click-button-split-space-y: 0.2813rem;
+  --click-button-split-space-gap: 0.5rem;
+  --click-button-split-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-primary-background-main-default: #faff69;
+  --click-button-split-primary-background-main-hover: rgb(98.627% 100% 58.824%);
+  --click-button-split-primary-background-main-active: rgb(82.978% 84.638% 34.851%);
+  --click-button-split-primary-background-main-disabled: rgb(23.324% 23.324% 23.324%);
+  --click-button-split-primary-background-action-default: rgb(88.235% 90% 37.059%);
+  --click-button-split-primary-background-action-hover: rgb(90.737% 92% 54.118%);
+  --click-button-split-primary-background-action-active: rgb(73.021% 74.481% 30.669%);
+  --click-button-split-primary-background-action-disabled: rgb(20.525% 20.525% 20.525%);
+  --click-button-split-primary-text-default: #1f1f1c;
+  --click-button-split-primary-text-hover: #1f1f1c;
+  --click-button-split-primary-text-active: #1f1f1c;
+  --click-button-split-primary-text-disabled: #808080;
+  --click-button-split-primary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-split-primary-divide-default: rgb(85.784% 87.5% 36.029%);
+  --click-button-split-primary-divide-hover: rgb(86.299% 87.5% 51.471%);
+  --click-button-split-primary-divide-active: rgb(72.606% 74.058% 30.495%);
+  --click-button-split-primary-divide-disabled: rgb(21.341% 21.341% 21.341%);
+  --click-button-split-secondary-divide-default: #414141;
+  --click-button-split-secondary-divide-hover: #414141;
+  --click-button-split-secondary-divide-active: rgb(23.653% 22.916% 24.391%);
+  --click-button-split-secondary-divide-disabled: #414141;
+  --click-button-split-secondary-background-main-default: #1f1f1c;
+  --click-button-split-secondary-background-main-hover: #282828;
+  --click-button-split-secondary-background-main-active: rgb(19.902% 19.902% 19.902%);
+  --click-button-split-secondary-background-main-disabled: #414141;
+  --click-button-split-secondary-background-action-default: #282828;
+  --click-button-split-secondary-background-action-hover: rgb(17.794% 17.794% 17.794%);
+  --click-button-split-secondary-background-action-active: rgb(20.703% 20.703% 20.703%);
+  --click-button-split-secondary-background-action-disabled: rgb(22.158% 22.158% 22.158%);
+  --click-button-split-secondary-text-default: #ffffff;
+  --click-button-split-secondary-text-hover: #ffffff;
+  --click-button-split-secondary-text-active: #ffffff;
+  --click-button-split-secondary-text-disabled: #808080;
+  --click-button-split-secondary-stroke-default: #414141;
+  --click-button-split-secondary-stroke-hover: #414141;
+  --click-button-split-secondary-stroke-active: rgb(23.653% 22.916% 24.391%);
+  --click-button-split-secondary-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-mobile-button-space-x: 0.75rem;
+  --click-button-mobile-button-space-y: 0.5rem;
+  --click-button-mobile-button-space-gap: 0.5rem;
+  --click-button-mobile-basic-size-icon-all: 1.25rem;
+  --click-button-group-radii-button-default-all: 2px;
+  --click-button-group-radii-button-borderless-all: 0.25rem;
+  --click-button-group-radii-panel-all: 0.25rem;
+  --click-button-group-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-space-panel-default-x: 3px;
+  --click-button-group-space-panel-default-y: 3px;
+  --click-button-group-space-panel-default-gap: 3px;
+  --click-button-group-space-panel-borderless-x: 0;
+  --click-button-group-space-panel-borderless-y: 0;
+  --click-button-group-space-panel-borderless-gap: 0.25rem;
+  --click-button-group-space-button-default-y: 1.5px;
+  --click-button-group-space-button-default-x: 0.75rem;
+  --click-button-group-space-button-borderless-y: 5.5px;
+  --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-color-background-default: rgba(0, 0, 0, 0);
+  --click-button-group-color-background-hover: #282828;
+  --click-button-group-color-background-active: #414141;
+  --click-button-group-color-background-disabled: rgba(0, 0, 0, 0);
+  --click-button-group-color-background-disabled-active: lch(0 0 none / 0);
+  --click-button-group-color-background-panel: rgba(0, 0, 0, 0);
+  --click-button-group-color-text-default: #c0c0c0;
+  --click-button-group-color-text-hover: #c0c0c0;
+  --click-button-group-color-text-active: #ffffff;
+  --click-button-group-color-text-disabled: #414141;
+  --click-button-group-color-text-disabled-active: #808080;
+  --click-button-group-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-disabled-active: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-panel: #323232;
+  --click-button-group-color-panel-stroke-default: #323232;
+  --click-button-group-color-panel-stroke-borderless: rgba(0, 0, 0, 0);
+  --click-button-alignLeft-size-icon-all: 0.9688rem;
+  --click-button-alignLeft-space-x: 1rem;
+  --click-button-alignLeft-space-y: 0.3438rem;
+  --click-button-alignLeft-space-gap: 0.5rem;
+  --click-button-alignLeft-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-hover: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-active: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignedLeft-color-background-default: rgba(0, 0, 0, 0);
+  --click-button-alignedLeft-color-background-hover: #282828;
+  --click-button-alignedLeft-color-background-active: rgb(15.373% 15.373% 15.373%);
+  --click-button-alignedLeft-color-stroke-default: #323232;
+  --click-button-alignedLeft-color-stroke-hover: #53575f;
+  --click-button-alignedLeft-color-stroke-active: rgb(22.882% 22.137% 23.627%);
+  --click-button-alignedLeft-color-text-default: #ffffff;
+  --click-button-alignedLeft-color-text-hover: #ffffff;
+  --click-button-alignedLeft-color-text-active: #ffffff;
+  --click-card-secondary-space-all: 1rem;
+  --click-card-secondary-space-gap: 1rem;
+  --click-card-secondary-space-link-gap: 0.5rem;
+  --click-card-secondary-radii-all: 0.25rem;
+  --click-card-secondary-icon-size-all: 2rem;
+  --click-card-secondary-stroke: 1px;
+  --click-card-secondary-color-background-default: #1f1f1c;
+  --click-card-secondary-color-background-hover: #282828;
+  --click-card-secondary-color-background-active: rgb(14.902% 14.902% 14.902%);
+  --click-card-secondary-color-background-disabled: #414141;
+  --click-card-secondary-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-card-secondary-color-title-hover: rgb(97.5% 97.5% 97.5%);
+  --click-card-secondary-color-title-active: rgb(97.5% 97.5% 97.5%);
+  --click-card-secondary-color-title-disabled: #808080;
+  --click-card-secondary-color-description-default: #b3b6bd;
+  --click-card-secondary-color-description-hover: #b3b6bd;
+  --click-card-secondary-color-description-active: #b3b6bd;
+  --click-card-secondary-color-description-disabled: #808080;
+  --click-card-secondary-color-link-default: #ffffff;
+  --click-card-secondary-color-link-hover: #faff69;
+  --click-card-secondary-color-link-active: #ffffff;
+  --click-card-secondary-color-link-disabled: #808080;
+  --click-card-secondary-color-stroke-default: #323232;
+  --click-card-secondary-color-stroke-hover: #323232;
+  --click-card-secondary-color-stroke-active: rgb(18.627% 18.627% 18.627%);
+  --click-card-secondary-color-stroke-disabled: #414141;
+  --click-card-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-hover: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-active: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-disabled: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-hover: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-active: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-disabled: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-primary-size-icon-sm-all: 2rem;
+  --click-card-primary-size-icon-md-all: 4rem;
+  --click-card-primary-space-md-y: 1.5rem;
+  --click-card-primary-space-md-x: 1.5rem;
+  --click-card-primary-space-md-gap: 0.75rem;
+  --click-card-primary-space-sm-y: 1.5rem;
+  --click-card-primary-space-sm-x: 1.5rem;
+  --click-card-primary-space-sm-gap: 0.25rem;
+  --click-card-primary-radii-all: 0.25rem;
+  --click-card-primary-stroke: 1px;
+  --click-card-primary-color-background-default: #1f1f1c;
+  --click-card-primary-color-background-hover: #282828;
+  --click-card-primary-color-background-active: rgb(14.902% 14.902% 14.902%);
+  --click-card-primary-color-background-disabled: #414141;
+  --click-card-primary-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-card-primary-color-title-hover: rgb(97.5% 97.5% 97.5%);
+  --click-card-primary-color-title-active: rgb(97.5% 97.5% 97.5%);
+  --click-card-primary-color-title-disabled: #808080;
+  --click-card-primary-color-description-default: #b3b6bd;
+  --click-card-primary-color-description-hover: #b3b6bd;
+  --click-card-primary-color-description-active: #b3b6bd;
+  --click-card-primary-color-description-disabled: #808080;
+  --click-card-primary-color-stroke-default: #323232;
+  --click-card-primary-color-stroke-hover: #323232;
+  --click-card-primary-color-stroke-active: #faff69;
+  --click-card-primary-color-stroke-disabled: #414141;
+  --click-card-shadow: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-card-horizontal-radii-all: 0.25rem;
+  --click-card-horizontal-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-hover: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-disabled: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-icon-size-all: 1.5rem;
+  --click-card-horizontal-space-md-y: 0.75rem;
+  --click-card-horizontal-space-md-x: 1rem;
+  --click-card-horizontal-space-md-gap: 1rem;
+  --click-card-horizontal-space-sm-y: 0.5rem;
+  --click-card-horizontal-space-sm-x: 0.75rem;
+  --click-card-horizontal-space-sm-gap: 0.75rem;
+  --click-card-horizontal-default-color-background-default: #1f1f1c;
+  --click-card-horizontal-default-color-background-hover: #282828;
+  --click-card-horizontal-default-color-background-active: #282828;
+  --click-card-horizontal-default-color-background-disabled: #414141;
+  --click-card-horizontal-default-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-default-color-title-hover: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-default-color-title-active: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-default-color-title-disabled: #808080;
+  --click-card-horizontal-default-color-description-default: #b3b6bd;
+  --click-card-horizontal-default-color-description-hover: #b3b6bd;
+  --click-card-horizontal-default-color-description-active: #b3b6bd;
+  --click-card-horizontal-default-color-description-disabled: #808080;
+  --click-card-horizontal-default-color-stroke-default: #323232;
+  --click-card-horizontal-default-color-stroke-hover: #323232;
+  --click-card-horizontal-default-color-stroke-active: #faff69;
+  --click-card-horizontal-default-color-stroke-disabled: #414141;
+  --click-card-horizontal-muted-color-background-default: #282828;
+  --click-card-horizontal-muted-color-background-hover: #1f1f1c;
+  --click-card-horizontal-muted-color-background-active: #282828;
+  --click-card-horizontal-muted-color-background-disabled: #414141;
+  --click-card-horizontal-muted-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-muted-color-title-hover: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-muted-color-title-active: rgb(97.5% 97.5% 97.5%);
+  --click-card-horizontal-muted-color-title-disabled: #808080;
+  --click-card-horizontal-muted-color-description-default: #b3b6bd;
+  --click-card-horizontal-muted-color-description-hover: #b3b6bd;
+  --click-card-horizontal-muted-color-description-active: #b3b6bd;
+  --click-card-horizontal-muted-color-description-disabled: #808080;
+  --click-card-horizontal-muted-color-stroke-default: #323232;
+  --click-card-horizontal-muted-color-stroke-hover: #323232;
+  --click-card-horizontal-muted-color-stroke-active: #faff69;
+  --click-card-horizontal-muted-color-stroke-disabled: #414141;
+  --click-card-promotion-radii-all: 0.25rem;
+  --click-card-promotion-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-promotion-space-y: 5.5px;
+  --click-card-promotion-space-x: 0.75rem;
+  --click-card-promotion-space-gap: 0.75rem;
+  --click-card-promotion-icon-size-all: 1rem;
+  --click-card-promotion-color-text-default: #ffffff;
+  --click-card-promotion-color-text-hover: #ffffff;
+  --click-card-promotion-color-text-active: #ffffff;
+  --click-card-promotion-color-icon-default: #faff69;
+  --click-card-promotion-color-icon-hover: #faff69;
+  --click-card-promotion-color-icon-active: #faff69;
+  --click-card-promotion-color-background-default: rgb(15.686% 15.686% 15.686% / 0.9);
+  --click-card-promotion-color-background-hover: rgb(17.794% 17.794% 17.794% / 0.9);
+  --click-card-promotion-color-background-active: rgb(19.849% 19.849% 19.849% / 0.9);
+  --click-card-promotion-color-stroke-default: linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%);
+  --click-card-promotion-color-stroke-hover: linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%);
+  --click-card-promotion-color-stroke-active: linear-gradient(174deg, #FAFF69 8.31%, #2C2E31 22.92%);
+  --click-card-promotion-color-stroke-focus: #faff69;
+  --click-checkbox-radii-all: 0.125rem;
+  --click-checkbox-space-all: 1px;
+  --click-checkbox-space-gap: 0.5rem;
+  --click-checkbox-size-all: 1rem;
+  --click-checkbox-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-color-variations-default-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-default-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-default-background-active: #faff69;
+  --click-checkbox-color-variations-default-background-disabled: #414141;
+  --click-checkbox-color-variations-default-stroke-default: #414141;
+  --click-checkbox-color-variations-default-stroke-hover: #414141;
+  --click-checkbox-color-variations-default-stroke-active: #faff69;
+  --click-checkbox-color-variations-default-stroke-disabled: #606060;
+  --click-checkbox-color-variations-default-check-default: #ffffff;
+  --click-checkbox-color-variations-default-check-hover: #ffffff;
+  --click-checkbox-color-variations-default-check-active: #151515;
+  --click-checkbox-color-variations-default-check-disabled: #808080;
+  --click-checkbox-color-variations-default-label-default: #ffffff;
+  --click-checkbox-color-variations-default-label-hover: #ffffff;
+  --click-checkbox-color-variations-default-label-active: #ffffff;
+  --click-checkbox-color-variations-default-label-disabled: #606060;
+  --click-checkbox-color-variations-var1-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var1-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var1-background-active: #33ff44;
+  --click-checkbox-color-variations-var1-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var1-stroke-default: #00bd10;
+  --click-checkbox-color-variations-var1-stroke-hover: #66ff73;
+  --click-checkbox-color-variations-var1-stroke-active: #66ff73;
+  --click-checkbox-color-variations-var1-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var1-check-default: #ffffff;
+  --click-checkbox-color-variations-var1-check-hover: #ffffff;
+  --click-checkbox-color-variations-var1-check-active: #ffffff;
+  --click-checkbox-color-variations-var1-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var2-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var2-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var2-background-active: #437eef;
+  --click-checkbox-color-variations-var2-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var2-stroke-default: #6d9bf3;
+  --click-checkbox-color-variations-var2-stroke-hover: #a1bef7;
+  --click-checkbox-color-variations-var2-stroke-active: #a1bef7;
+  --click-checkbox-color-variations-var2-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var2-check-default: #ffffff;
+  --click-checkbox-color-variations-var2-check-hover: #ffffff;
+  --click-checkbox-color-variations-var2-check-active: #ffffff;
+  --click-checkbox-color-variations-var2-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var3-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var3-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var3-background-active: #fb64d6;
+  --click-checkbox-color-variations-var3-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var3-stroke-default: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-hover: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-active: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var3-check-default: #ffffff;
+  --click-checkbox-color-variations-var3-check-hover: #ffffff;
+  --click-checkbox-color-variations-var3-check-active: #ffffff;
+  --click-checkbox-color-variations-var3-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var4-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var4-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var4-background-active: #ff7729;
+  --click-checkbox-color-variations-var4-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var4-stroke-default: #faff69;
+  --click-checkbox-color-variations-var4-stroke-hover: #fdffa3;
+  --click-checkbox-color-variations-var4-stroke-active: #fdffa3;
+  --click-checkbox-color-variations-var4-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var4-check-default: #ffffff;
+  --click-checkbox-color-variations-var4-check-hover: #ffffff;
+  --click-checkbox-color-variations-var4-check-active: #ffffff;
+  --click-checkbox-color-variations-var4-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var5-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var5-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var5-background-active: #6df8e1;
+  --click-checkbox-color-variations-var5-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var5-stroke-default: #6df8e1;
+  --click-checkbox-color-variations-var5-stroke-hover: #a3faec;
+  --click-checkbox-color-variations-var5-stroke-active: #a3faec;
+  --click-checkbox-color-variations-var5-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var5-check-default: #ffffff;
+  --click-checkbox-color-variations-var5-check-hover: #ffffff;
+  --click-checkbox-color-variations-var5-check-active: #ffffff;
+  --click-checkbox-color-variations-var5-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var6-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var6-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var6-background-active: #bb33ff;
+  --click-checkbox-color-variations-var6-background-disabled: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-variations-var6-stroke-default: #cc66ff;
+  --click-checkbox-color-variations-var6-stroke-hover: #cc66ff;
+  --click-checkbox-color-variations-var6-stroke-active: #cc66ff;
+  --click-checkbox-color-variations-var6-stroke-disabled: #606060;
+  --click-checkbox-color-variations-var6-check-default: #ffffff;
+  --click-checkbox-color-variations-var6-check-hover: #ffffff;
+  --click-checkbox-color-variations-var6-check-active: #ffffff;
+  --click-checkbox-color-variations-var6-check-disabled: #a0a0a0;
+  --click-checkbox-color-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-checkbox-color-background-active: #faff69;
+  --click-checkbox-color-background-disabled: #414141;
+  --click-checkbox-color-stroke-default: #414141;
+  --click-checkbox-color-stroke-hover: #414141;
+  --click-checkbox-color-stroke-active: #faff69;
+  --click-checkbox-color-stroke-disabled: #606060;
+  --click-checkbox-color-check-default: #ffffff;
+  --click-checkbox-color-check-hover: #ffffff;
+  --click-checkbox-color-check-active: #151515;
+  --click-checkbox-color-check-disabled: #808080;
+  --click-checkbox-color-label-default: #ffffff;
+  --click-checkbox-color-label-hover: #ffffff;
+  --click-checkbox-color-label-active: #ffffff;
+  --click-checkbox-color-label-disabled: #606060;
+  --click-codeblock-space-x: 1rem;
+  --click-codeblock-space-y: 1rem;
+  --click-codeblock-space-gap: 1.5rem;
+  --click-codeblock-radii-all: 0.25rem;
+  --click-codeblock-stroke: 1px;
+  --click-codeblock-typography-text-default: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-codeblock-numbers-size-width: 1.5rem;
+  --click-codeblock-darkMode-color-background-default: #282828;
+  --click-codeblock-darkMode-color-text-default: #ffffff;
+  --click-codeblock-darkMode-color-numbers-default: #c0c0c0;
+  --click-codeblock-darkMode-color-button-background-default: #282828;
+  --click-codeblock-darkMode-color-button-background-hover: #53575f;
+  --click-codeblock-darkMode-color-button-foreground-default: #ffffff;
+  --click-codeblock-darkMode-color-stroke-default: #282828;
+  --click-codeblock-lightMode-color-background-default: #f6f7fa;
+  --click-codeblock-lightMode-color-text-default: #282828;
+  --click-codeblock-lightMode-color-numbers-default: #808080;
+  --click-codeblock-lightMode-color-button-background-default: #f6f7fa;
+  --click-codeblock-lightMode-color-button-background-hover: #53575f;
+  --click-codeblock-lightMode-color-button-foreground-default: #a0a0a0;
+  --click-codeblock-lightMode-color-stroke-default: #282828;
+  --click-codeblock-monacoTheme-parameter-foreground: #c0c0c0;
+  --click-codeblock-monacoTheme-parameter-background: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-codeInline-space-x: 0.25rem;
+  --click-codeInline-stroke: 1px;
+  --click-codeInline-typography-text-default: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-codeInline-radii-all: 0.25rem;
+  --click-codeInline-color-background-default: #282828;
+  --click-codeInline-color-text-default: #ffffff;
+  --click-codeInline-color-stroke-default: #323232;
+  --click-container-space-none: 0;
+  --click-container-space-xxs: 0.25rem;
+  --click-container-space-xs: 0.5rem;
+  --click-container-space-sm: 0.75rem;
+  --click-container-space-md: 1rem;
+  --click-container-space-lg: 1.5rem;
+  --click-container-space-xl: 2rem;
+  --click-container-space-xxl: 4rem;
+  --click-container-gap-none: 0;
+  --click-container-gap-xxs: 0.25rem;
+  --click-container-gap-xs: 0.5rem;
+  --click-container-gap-sm: 0.75rem;
+  --click-container-gap-md: 1rem;
+  --click-container-gap-lg: 1.5rem;
+  --click-container-gap-xl: 2rem;
+  --click-container-gap-xxl: 4rem;
+  --click-datePicker-dateOption-space-gap: 2px;
+  --click-datePicker-dateOption-radii-default: 0.25rem;
+  --click-datePicker-dateOption-radii-range: 0;
+  --click-datePicker-dateOption-stroke: 1px;
+  --click-datePicker-dateOption-size-height: 2rem;
+  --click-datePicker-dateOption-size-width: 2rem;
+  --click-datePicker-dateOption-typography-label-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-active: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-range: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-color-label-default: #ffffff;
+  --click-datePicker-dateOption-color-label-hover: #ffffff;
+  --click-datePicker-dateOption-color-label-active: #1f1f1c;
+  --click-datePicker-dateOption-color-label-disabled: #a0a0a0;
+  --click-datePicker-dateOption-color-label-range: #ffffff;
+  --click-datePicker-dateOption-color-background-default: #1f1f1c;
+  --click-datePicker-dateOption-color-background-hover: #1f1f1c;
+  --click-datePicker-dateOption-color-background-active: #faff69;
+  --click-datePicker-dateOption-color-background-disabled: #1f1f1c;
+  --click-datePicker-dateOption-color-background-range: #323232;
+  --click-datePicker-dateOption-color-stroke-default: #1f1f1c;
+  --click-datePicker-dateOption-color-stroke-hover: #faff69;
+  --click-datePicker-dateOption-color-stroke-active: #faff69;
+  --click-datePicker-dateOption-color-stroke-disabled: #1f1f1c;
+  --click-datePicker-dateOption-color-stroke-range: #323232;
+  --click-datePicker-space-gap: 0.25rem;
+  --click-datePicker-typography-daytitle-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-datePicker-color-daytitle-default: #b3b6bd;
+  --click-dialog-space-y: 1.5rem;
+  --click-dialog-space-x: 2rem;
+  --click-dialog-space-gap: 1rem;
+  --click-dialog-title-space-gap: 0.25rem;
+  --click-dialog-radii-all: 0.5rem;
+  --click-dialog-shadow-default: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-dialog-stroke-default: 1px solid #323232;
+  --click-dialog-typography-title-default: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dialog-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dialog-color-background-default: #1f1f1c;
+  --click-dialog-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-dialog-color-description-default: #b3b6bd;
+  --click-dialog-color-opaqueBackground-default: lch(40.731 0 none / 0.75);
+  --click-docs-typography-titles-lg: 600 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-titles-md: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-titles-sm: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-breadcrumbs-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-breadcrumbs-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-disabled: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-error: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-error: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-placeholder-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-active: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-error: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-error: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-type-mobile-label: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-type-mobile-field-value: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-space-x: 0.75rem;
+  --click-field-space-y: 0.2813rem;
+  --click-field-space-gap: 0.5rem;
+  --click-field-size-icon: 1rem;
+  --click-field-radii-all: 0.25rem;
+  --click-field-mobile-space-x: 0.75rem;
+  --click-field-mobile-space-y: 0.5rem;
+  --click-field-mobile-space-gap: 0.5rem;
+  --click-field-color-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-field-color-background-hover: rgb(19.849% 19.849% 19.849%);
+  --click-field-color-background-active: rgb(19.849% 19.849% 19.849%);
+  --click-field-color-background-disabled: #414141;
+  --click-field-color-background-error: rgb(19.849% 19.849% 19.849%);
+  --click-field-color-text-default: #e6e7e9;
+  --click-field-color-text-hover: #e6e7e9;
+  --click-field-color-text-active: #ffffff;
+  --click-field-color-text-disabled: #808080;
+  --click-field-color-text-error: #ffbaba;
+  --click-field-color-stroke-default: rgb(23.627% 23.627% 23.627%);
+  --click-field-color-stroke-hover: rgb(27.446% 27.446% 27.446%);
+  --click-field-color-stroke-active: #faff69;
+  --click-field-color-stroke-disabled: #414141;
+  --click-field-color-stroke-error: #ffbaba;
+  --click-field-color-label-default: #b3b6bd;
+  --click-field-color-label-hover: #b3b6bd;
+  --click-field-color-label-active: #ffffff;
+  --click-field-color-label-disabled: #606060;
+  --click-field-color-label-error: #ffbaba;
+  --click-field-color-format-default: rgb(60.157% 60.157% 60.157%);
+  --click-field-color-format-hover: rgb(60.157% 60.157% 60.157%);
+  --click-field-color-format-active: rgb(60.157% 60.157% 60.157%);
+  --click-field-color-format-disabled: #808080;
+  --click-field-color-format-error: rgb(60.157% 60.157% 60.157%);
+  --click-field-color-genericLabel-default: #ffffff;
+  --click-field-color-genericLabel-hover: #ffffff;
+  --click-field-color-genericLabel-active: #ffffff;
+  --click-field-color-genericLabel-disabled: #a0a0a0;
+  --click-field-color-placeholder-default: #808080;
+  --click-field-color-placeholder-disabled: #606060;
+  --click-fileUpload-sm-icon-size-height: 1.5rem;
+  --click-fileUpload-sm-icon-size-width: 1.5rem;
+  --click-fileUpload-sm-space-gap: 0.75rem;
+  --click-fileUpload-sm-space-x: 1rem;
+  --click-fileUpload-sm-space-y: 0.5rem;
+  --click-fileUpload-sm-radii-all: 0.25rem;
+  --click-fileUpload-sm-color-icon-default: #b3b6bd;
+  --click-fileUpload-md-icon-size-height: 2rem;
+  --click-fileUpload-md-icon-size-width: 2rem;
+  --click-fileUpload-md-space-gap: 0.5rem;
+  --click-fileUpload-md-space-x: 1rem;
+  --click-fileUpload-md-space-y: 0.75rem;
+  --click-fileUpload-md-radii-all: 0.5rem;
+  --click-fileUpload-md-color-icon-default: #ffffff;
+  --click-fileUpload-typography-title-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-fileUpload-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-fileUpload-hasFile-space-gap: 0.75rem;
+  --click-fileUpload-hasFile-header-space-gap: 0.5rem;
+  --click-fileUpload-transitions-all: all 100ms ease-in 0ms;
+  --click-fileUpload-color-background-default: #1f1f1c;
+  --click-fileUpload-color-background-hover: #1f1f1c;
+  --click-fileUpload-color-background-active: rgb(19.849% 19.849% 19.849%);
+  --click-fileUpload-color-background-error: rgb(100% 13.725% 13.725% / 0.2);
+  --click-fileUpload-color-stroke-default: rgb(23.627% 23.627% 23.627%);
+  --click-fileUpload-color-stroke-hover: rgb(23.627% 23.627% 23.627%);
+  --click-fileUpload-color-stroke-active: #414141;
+  --click-fileUpload-color-stroke-error: rgba(0, 0, 0, 0);
+  --click-fileUpload-color-title-default: #ffffff;
+  --click-fileUpload-color-title-hover: #ffffff;
+  --click-fileUpload-color-title-active: #ffffff;
+  --click-fileUpload-color-title-error: #ffbaba;
+  --click-fileUpload-color-description-default: #b3b6bd;
+  --click-fileUpload-color-description-hover: #b3b6bd;
+  --click-fileUpload-color-description-active: #b3b6bd;
+  --click-fileUpload-color-description-error: #ffbaba;
+  --click-flyout-space-default-x: 0;
+  --click-flyout-space-default-y: 1.5rem;
+  --click-flyout-space-default-gap: 1rem;
+  --click-flyout-space-default-top: 0;
+  --click-flyout-space-default-content-x: 1.5rem;
+  --click-flyout-space-default-content-y: 1.5rem;
+  --click-flyout-space-default-content-row-gap: 0.25rem;
+  --click-flyout-space-default-content-column-gap: 1rem;
+  --click-flyout-space-inline-x: 0;
+  --click-flyout-space-inline-y: 0.75rem;
+  --click-flyout-space-inline-gap: 0.75rem;
+  --click-flyout-space-inline-top: 3.5rem;
+  --click-flyout-space-inline-content-x: 0.75rem;
+  --click-flyout-space-inline-content-y: 0.75rem;
+  --click-flyout-space-inline-content-row-gap: 0.25rem;
+  --click-flyout-space-inline-content-column-gap: 0.75rem;
+  --click-flyout-shadow-default: -5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --click-flyout-shadow-reverse: 5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --click-flyout-size-default-width: 27.5rem;
+  --click-flyout-size-default-height: 100%;
+  --click-flyout-size-wide-width: 37.5rem;
+  --click-flyout-size-wide-height: 100vh;
+  --click-flyout-size-narrow-width: 21rem;
+  --click-flyout-size-narrow-height: 100%;
+  --click-flyout-size-widest-width: 55rem;
+  --click-flyout-size-widest-height: 100vh;
+  --click-flyout-typography-default-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-default-title-default: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-inline-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-inline-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-color-background-default: #282828;
+  --click-flyout-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-flyout-color-description-default: #b3b6bd;
+  --click-flyout-color-opaqueBackground-default: lch(6.7738 0 none / 0.45);
+  --click-flyout-color-stroke-default: #323232;
+  --click-genericMenu-item-space-x: 1rem;
+  --click-genericMenu-item-space-y: 0.3438rem;
+  --click-genericMenu-item-space-gap: 0.5rem;
+  --click-genericMenu-item-icon-size-height: 0.9688rem;
+  --click-genericMenu-item-icon-size-width: 0.9688rem;
+  --click-genericMenu-item-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-sectionHeader-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-active: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-two-lines-space-x: 1rem;
+  --click-genericMenu-item-two-lines-space-y: 0.3438rem;
+  --click-genericMenu-item-two-lines-space-gap: 0.75rem;
+  --click-genericMenu-item-size-minWidth: 180px;
+  --click-genericMenu-item-color-default-text-default: #ffffff;
+  --click-genericMenu-item-color-default-text-hover: #ffffff;
+  --click-genericMenu-item-color-default-text-active: #ffffff;
+  --click-genericMenu-item-color-default-text-disabled: #808080;
+  --click-genericMenu-item-color-default-text-muted: #b3b6bd;
+  --click-genericMenu-item-color-default-background-default: #282828;
+  --click-genericMenu-item-color-default-background-hover: rgb(23.064% 23.064% 23.064%);
+  --click-genericMenu-item-color-default-background-active: #282828;
+  --click-genericMenu-item-color-default-background-disabled: #414141;
+  --click-genericMenu-item-color-default-stroke-default: #323232;
+  --click-genericMenu-item-color-format-default: lch(62.868 0 none);
+  --click-genericMenu-item-color-format-hover: rgb(60.157% 60.157% 60.157%);
+  --click-genericMenu-item-color-format-active: rgb(60.157% 60.157% 60.157%);
+  --click-genericMenu-item-color-format-disabled: #808080;
+  --click-genericMenu-item-color-format-error: rgb(60.157% 60.157% 60.157%);
+  --click-genericMenu-item-color-subtext-default: #b3b6bd;
+  --click-genericMenu-item-color-subtext-hover: #b3b6bd;
+  --click-genericMenu-item-color-subtext-active: #b3b6bd;
+  --click-genericMenu-item-color-subtext-disabled: #c0c0c0;
+  --click-genericMenu-item-color-danger-text-default: #ffbaba;
+  --click-genericMenu-item-color-danger-text-hover: #ffbaba;
+  --click-genericMenu-item-color-danger-text-active: #ffbaba;
+  --click-genericMenu-item-color-danger-text-disabled: #808080;
+  --click-genericMenu-item-color-danger-background-default: #282828;
+  --click-genericMenu-item-color-danger-background-hover: rgb(100% 21.274% 21.274% / 0.3);
+  --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.45);
+  --click-genericMenu-item-color-danger-background-disabled: #414141;
+  --click-genericMenu-item-color-danger-stroke-default: rgba(0, 0, 0, 0);
+  --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-space-gap: 0.25rem;
+  --click-genericMenu-button-space-y: 0.5rem;
+  --click-genericMenu-button-typography-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-typography-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-typography-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-color-background-default: #282828;
+  --click-genericMenu-button-color-label-default: #b3b6bd;
+  --click-genericMenu-button-color-stroke-default: #323232;
+  --click-genericMenu-panel-radii-all: 0.25rem;
+  --click-genericMenu-panel-shadow-default: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-genericMenu-panel-size-height: 2rem;
+  --click-genericMenu-panel-color-background-default: #282828;
+  --click-genericMenu-panel-color-stroke-default: #414141;
+  --click-genericMenu-autocomplete-typography-results-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-typography-search-placeholder-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-typography-search-term-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-search-stroke-default: 2px solid #323232;
+  --click-genericMenu-autocomplete-color-placeholder-default: #808080;
+  --click-genericMenu-autocomplete-color-searchTerm-default: #ffffff;
+  --click-genericMenu-autocomplete-color-background-default: #282828;
+  --click-genericMenu-autocomplete-color-stroke-default: #323232;
+  --click-genericMenu-sectionHeader-space-bottom: 0.3438rem;
+  --click-genericMenu-sectionHeader-space-top: 0.5rem;
+  --click-genericMenu-placeholder-space-gap: 0.5rem;
+  --click-grid-header-cell-space-y: 0.4375rem;
+  --click-grid-header-cell-space-x: 0.5rem;
+  --click-grid-header-cell-size-height: 2rem;
+  --click-grid-header-cell-color-background-default: #282828;
+  --click-grid-header-cell-color-background-selectIndirect: lch(19.47 0 none);
+  --click-grid-header-cell-color-background-selectDirect: lch(27.259 0 none);
+  --click-grid-header-cell-color-title-default: #b3b6bd;
+  --click-grid-header-cell-color-title-selectIndirect: #ffffff;
+  --click-grid-header-cell-color-title-selectDirect: #ffffff;
+  --click-grid-header-cell-color-stroke-default: lch(20.268 0 none);
+  --click-grid-header-cell-color-stroke-selectIndirect: lch(26.846 0 none);
+  --click-grid-header-cell-color-stroke-selectDirect: lch(29.406 0 none);
+  --click-grid-header-title-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-grid-body-cell-space-y: 5.5px;
+  --click-grid-body-cell-space-x: 0.5rem;
+  --click-grid-body-cell-size-height: 2rem;
+  --click-grid-body-cell-color-background-default: #1f1f1c;
+  --click-grid-body-cell-color-background-selectIndirect: lch(15.792 0 none);
+  --click-grid-body-cell-color-background-selectDirect: lch(15.792 0 none);
+  --click-grid-body-cell-color-stroke-default: #323232;
+  --click-grid-body-cell-color-stroke-selectIndirect: lch(22.028 0 none);
+  --click-grid-body-cell-color-stroke-selectDirect: #faff69;
+  --click-grid-body-cell-color-text-default: lch(100 0 none);
+  --click-grid-body-cell-color-text-selectIndirect: #ffffff;
+  --click-grid-body-cell-color-text-selectDirect: #ffffff;
+  --click-grid-cell-text-default: 500 0.875rem/1.5 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-grid-radii-none: 0;
+  --click-grid-radii-sm: 0.25rem;
+  --click-grid-radii-md: 0.5rem;
+  --click-grid-radii-lg: 0.75rem;
+  --click-grid-global-color-stroke-default: #323232;
+  --click-grid-global-color-background-default: #1f1f1c;
+  --click-gridContainer-gap-none: 0;
+  --click-gridContainer-gap-xxs: 0.25rem;
+  --click-gridContainer-gap-xs: 0.5rem;
+  --click-gridContainer-gap-sm: 0.75rem;
+  --click-gridContainer-gap-md: 1rem;
+  --click-gridContainer-gap-lg: 1.5rem;
+  --click-gridContainer-gap-xl: 2rem;
+  --click-gridContainer-gap-xxl: 4rem;
+  --click-gridContainer-gap-unset: '';
+  --click-icon-space-xs-all: 0.25rem;
+  --click-icon-space-sm-all: 0.25rem;
+  --click-icon-space-md-all: 0.365rem;
+  --click-icon-space-lg-all: 0.5rem;
+  --click-icon-space-xl-all: 0.75rem;
+  --click-icon-space-xxl-all: 1rem;
+  --click-icon-color-background-default: rgba(0, 0, 0, 0);
+  --click-icon-color-background-success: rgb(20% 100% 26.667% / 0.2);
+  --click-icon-color-background-neutral: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-icon-color-background-danger: rgb(100% 13.725% 13.725% / 0.2);
+  --click-icon-color-background-info: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-icon-color-background-warning: rgb(100% 46.667% 16.078% / 0.2);
+  --click-icon-color-text-default: rgba(0, 0, 0, 0);
+  --click-icon-color-text-success: #ccffd0;
+  --click-icon-color-text-neutral: #c0c0c0;
+  --click-icon-color-text-danger: #ffbaba;
+  --click-icon-color-text-info: #d0dffb;
+  --click-icon-color-text-warning: #ffb88f;
+  --click-icon-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-icon-color-stroke-success: rgb(20% 100% 26.667% / 0.05);
+  --click-icon-color-stroke-neutral: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-icon-color-stroke-danger: rgb(100% 13.725% 13.725% / 0.05);
+  --click-icon-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.05);
+  --click-icon-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.05);
+  --click-image-sm-size-height: 1rem;
+  --click-image-sm-size-width: 1rem;
+  --click-image-xs-size-height: 0.75rem;
+  --click-image-xs-size-width: 0.75rem;
+  --click-image-md-size-height: 1.25rem;
+  --click-image-md-size-width: 1.25rem;
+  --click-image-lg-size-height: 1.5rem;
+  --click-image-lg-size-width: 1.5rem;
+  --click-image-xl-size-height: 2rem;
+  --click-image-xl-size-width: 2rem;
+  --click-image-xxl-size-height: 4rem;
+  --click-image-xxl-size-width: 4rem;
+  --click-image-borderWidth-default: 1.5px;
+  --click-image-borderWidth-thin: 1px;
+  --click-image-color-stroke: #ffffff;
+  --click-link-space-md-gap: 0.25rem;
+  --click-link-space-sm-gap: 2px;
+  --click-link-icon-size-sm-height: 0.75rem;
+  --click-link-icon-size-sm-width: 0.75rem;
+  --click-link-icon-size-md-height: 1rem;
+  --click-link-icon-size-md-width: 1rem;
+  --click-panel-strokeWidth-default: 1px;
+  --click-panel-radii-none: 0;
+  --click-panel-radii-sm: 0.25rem;
+  --click-panel-radii-md: 0.5rem;
+  --click-panel-radii-lg: 0.75rem;
+  --click-panel-stroke-default: 1px solid #323232;
+  --click-panel-shadow-default: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-panel-space-y-none: 0;
+  --click-panel-space-y-xs: 0.5rem;
+  --click-panel-space-y-sm: 0.75rem;
+  --click-panel-space-y-md: 1rem;
+  --click-panel-space-y-lg: 1.5rem;
+  --click-panel-space-y-xl: 2rem;
+  --click-panel-space-x-none: 0;
+  --click-panel-space-x-xs: 0.5rem;
+  --click-panel-space-x-sm: 0.75rem;
+  --click-panel-space-x-md: 1rem;
+  --click-panel-space-x-lg: 1.5rem;
+  --click-panel-space-x-xl: 2rem;
+  --click-panel-space-gap-none: 0;
+  --click-panel-space-gap-xs: 0.5rem;
+  --click-panel-space-gap-sm: 0.75rem;
+  --click-panel-space-gap-md: 1rem;
+  --click-panel-space-gap-lg: 1.5rem;
+  --click-panel-space-gap-xl: 2rem;
+  --click-panel-color-background-default: #1f1f1c;
+  --click-panel-color-background-muted: #282828;
+  --click-panel-color-background-transparent: rgba(0, 0, 0, 0);
+  --click-panel-color-stroke-default: #323232;
+  --click-popover-space-y: 1rem;
+  --click-popover-space-x: 1.5rem;
+  --click-popover-space-gap: 0.75rem;
+  --click-popover-radii-all: 0.25rem;
+  --click-popover-shadow-default: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-popover-icon-size-height: 1.25rem;
+  --click-popover-icon-size-width: 1.25rem;
+  --click-popover-color-panel-background-default: #282828;
+  --click-popover-color-panel-stroke-default: #414141;
+  --click-radio-radii-all: 9999px;
+  --click-radio-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-color-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-radio-color-background-hover: rgb(17.794% 17.794% 17.794%);
+  --click-radio-color-background-active: #faff69;
+  --click-radio-color-background-disabled: #414141;
+  --click-radio-color-stroke-default: #414141;
+  --click-radio-color-stroke-hover: #414141;
+  --click-radio-color-stroke-active: #151515;
+  --click-radio-color-stroke-disabled: #414141;
+  --click-radio-color-indicator-default: #1f1f1c;
+  --click-radio-color-indicator-hover: rgb(17.794% 17.794% 17.794%);
+  --click-radio-color-indicator-active: #151515;
+  --click-radio-color-indicator-disabled: #808080;
+  --click-separator-horizontal-space-y-xs: 0;
+  --click-separator-horizontal-space-y-sm: 0.25rem;
+  --click-separator-horizontal-space-y-md: 0.5rem;
+  --click-separator-horizontal-space-y-ml: 0.75rem;
+  --click-separator-horizontal-space-y-lg: 1rem;
+  --click-separator-horizontal-space-y-xl: 1.5rem;
+  --click-separator-horizontal-space-y-xxl: 2rem;
+  --click-separator-horizontal-space-x-all: 0;
+  --click-separator-vertical-space-x-xs: 0;
+  --click-separator-vertical-space-x-sm: 0.25rem;
+  --click-separator-vertical-space-x-md: 0.5rem;
+  --click-separator-vertical-space-x-lg: 1rem;
+  --click-separator-vertical-space-x-xl: 1.5rem;
+  --click-separator-vertical-space-x-xxl: 2rem;
+  --click-separator-vertical-space-y-all: 0;
+  --click-separator-color-stroke-default: #323232;
+  --click-sidebar-navigation-item-radii-all: 0.25rem;
+  --click-sidebar-navigation-item-default-space-right: 0.75rem;
+  --click-sidebar-navigation-item-default-space-y: 0.2813rem;
+  --click-sidebar-navigation-item-default-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-default-space-left: 0;
+  --click-sidebar-navigation-item-typography-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-space-left: 0;
+  --click-sidebar-navigation-item-mobile-space-right: 0.75rem;
+  --click-sidebar-navigation-item-mobile-space-y: 0.75rem;
+  --click-sidebar-navigation-item-mobile-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-collapsible-space-left: 0;
+  --click-sidebar-navigation-item-collapsible-space-right: 0.75rem;
+  --click-sidebar-navigation-item-collapsible-space-y: 0.2813rem;
+  --click-sidebar-navigation-item-collapsible-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-icon-size-height: 1rem;
+  --click-sidebar-navigation-item-icon-size-width: 1rem;
+  --click-sidebar-navigation-item-global-gap: 2px;
+  --click-sidebar-navigation-title-typography-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-disabled: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-default-space-left: 2.75rem;
+  --click-sidebar-navigation-subItem-default-space-right: 0.75rem;
+  --click-sidebar-navigation-subItem-default-space-y: 0.2813rem;
+  --click-sidebar-navigation-subItem-mobile-space-left: 2.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-right: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-y: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-gap: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-typography-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-mobile-typography-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-mobile-typography-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-radii-all: 0.25rem;
+  --click-sidebar-navigation-subItem-typography-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-dragControl-separator-size-height: 0.125rem;
+  --click-sidebar-main-color-background-default: #1f1f1c;
+  --click-sidebar-main-color-text-default: #ffffff;
+  --click-sidebar-main-color-text-muted: #b3b6bd;
+  --click-sidebar-main-color-stroke-default: #323232;
+  --click-sidebar-main-navigation-item-color-background-active: lch(27.535 0 none / 0.6);
+  --click-sidebar-main-navigation-item-color-background-hover: lch(19.05 0 none);
+  --click-sidebar-main-navigation-item-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-item-color-text-default: #ffffff;
+  --click-sidebar-main-navigation-item-color-text-hover: #ffffff;
+  --click-sidebar-main-navigation-item-color-text-active: #ffffff;
+  --click-sidebar-main-navigation-item-color-text-muted: #b3b6bd;
+  --click-sidebar-main-navigation-item-color-text-disabled: #808080;
+  --click-sidebar-main-navigation-item-color-icon-default: #b3b6bd;
+  --click-sidebar-main-navigation-item-color-icon-disabled: #808080;
+  --click-sidebar-main-navigation-title-color-default: #b3b6bd;
+  --click-sidebar-main-navigation-title-color-hover: #b3b6bd;
+  --click-sidebar-main-navigation-title-color-active: #b3b6bd;
+  --click-sidebar-main-navigation-subItem-color-text-default: #b3b6bd;
+  --click-sidebar-main-navigation-subItem-color-text-disabled: #808080;
+  --click-sidebar-main-navigation-subItem-color-text-hover: #ffffff;
+  --click-sidebar-main-navigation-subItem-color-text-active: #ffffff;
+  --click-sidebar-main-navigation-subItem-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-background-disabled: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-background-hover: lch(19.05 0 none);
+  --click-sidebar-main-navigation-subItem-color-background-active: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-icon-default: #b3b6bd;
+  --click-sidebar-main-navigation-subItem-color-icon-disabled: #808080;
+  --click-sidebar-main-navigation-dragControl-separator-color-default: #faff69;
+  --click-sidebar-sqlSidebar-color-background-default: #282828;
+  --click-sidebar-sqlSidebar-color-stroke-default: #323232;
+  --click-sidebar-sqlSidebar-navigation-item-color-background-active: lch(27.535 0 none / 0.6);
+  --click-sidebar-sqlSidebar-navigation-item-color-background-hover: lch(19.05 0 none);
+  --click-sidebar-sqlSidebar-navigation-item-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-item-color-text-default: #ffffff;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-hover: #ffffff;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-active: #ffffff;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-muted: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-disabled: #808080;
+  --click-sidebar-sqlSidebar-navigation-item-color-icon-default: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-item-color-icon-disabled: #808080;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-disabled: #808080;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-default: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-hover: #ffffff;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-active: #ffffff;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-hover: lch(19.05 0 none);
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-active: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-title-color-default: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-title-color-hover: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-title-color-active: #b3b6bd;
+  --click-sidebar-sqlSidebar-navigation-dragControl-separator-color-default: #faff69;
+  --click-spacer-horizontal-space-y-xs: 0;
+  --click-spacer-horizontal-space-y-sm: 0.25rem;
+  --click-spacer-horizontal-space-y-md: 0.5rem;
+  --click-spacer-horizontal-space-y-ml: 0.75rem;
+  --click-spacer-horizontal-space-y-lg: 1rem;
+  --click-spacer-horizontal-space-y-xl: 1.5rem;
+  --click-spacer-horizontal-space-y-xxl: 2rem;
+  --click-spacer-horizontal-space-x-all: 0;
+  --click-stepper-vertical-numbered-connector-size-width: 0.1875rem;
+  --click-stepper-vertical-numbered-connector-stroke-default: 2px;
+  --click-stepper-vertical-numbered-connector-color-stroke-incomplete: #606060;
+  --click-stepper-vertical-numbered-connector-color-stroke-complete: #ffffff;
+  --click-stepper-vertical-numbered-connector-color-stroke-active: #606060;
+  --click-stepper-vertical-numbered-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-numbered-step-typography-number-default: 700 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-numbered-step-size-height: 1.5rem;
+  --click-stepper-vertical-numbered-step-size-width: 1.5rem;
+  --click-stepper-vertical-numbered-step-size-icon-height: 0.75rem;
+  --click-stepper-vertical-numbered-step-size-icon-width: 0.75rem;
+  --click-stepper-vertical-numbered-step-stroke-default: 2px;
+  --click-stepper-vertical-numbered-step-radii-default: 9999px;
+  --click-stepper-vertical-numbered-step-color-stroke-incomplete: #606060;
+  --click-stepper-vertical-numbered-step-color-stroke-complete: #ffffff;
+  --click-stepper-vertical-numbered-step-color-stroke-active: #ffffff;
+  --click-stepper-vertical-numbered-step-color-background-incomplete: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-background-complete: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-background-active: #ffffff;
+  --click-stepper-vertical-numbered-step-color-icon-incomplete: #ffffff;
+  --click-stepper-vertical-numbered-step-color-icon-complete: #ffffff;
+  --click-stepper-vertical-numbered-step-color-icon-active: #1f1f1c;
+  --click-stepper-vertical-numbered-content-space-gap-x: 1rem;
+  --click-stepper-vertical-numbered-content-space-gap-y: 0.5rem;
+  --click-stepper-vertical-numbered-content-space-left: 2.75rem;
+  --click-stepper-vertical-numbered-content-space-bottom-default: 2.5rem;
+  --click-stepper-vertical-numbered-content-space-bottom-active: 1.5rem;
+  --click-stepper-vertical-numbered-color-title-incomplete: #606060;
+  --click-stepper-vertical-numbered-color-title-complete: #b3b6bd;
+  --click-stepper-vertical-numbered-color-title-active: #ffffff;
+  --click-stepper-vertical-bulleted-connector-size-width: 0.1875rem;
+  --click-stepper-vertical-bulleted-connector-stroke-default: 2px;
+  --click-stepper-vertical-bulleted-connector-color-stroke-incomplete: #606060;
+  --click-stepper-vertical-bulleted-connector-color-stroke-complete: #ffffff;
+  --click-stepper-vertical-bulleted-connector-color-stroke-active: #606060;
+  --click-stepper-vertical-bulleted-step-size-height: 1rem;
+  --click-stepper-vertical-bulleted-step-size-width: 1rem;
+  --click-stepper-vertical-bulleted-step-size-icon-height: 0.75rem;
+  --click-stepper-vertical-bulleted-step-size-icon-width: 0.75rem;
+  --click-stepper-vertical-bulleted-step-radii-default: 9999px;
+  --click-stepper-vertical-bulleted-step-stroke-default: 2px;
+  --click-stepper-vertical-bulleted-step-color-stroke-incomplete: #606060;
+  --click-stepper-vertical-bulleted-step-color-stroke-complete: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-stroke-active: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-background-incomplete: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-background-complete: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-background-active: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-icon-incomplete: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-icon-complete: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-icon-active: #ffffff;
+  --click-stepper-vertical-bulleted-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-bulleted-content-space-gap-x: 1rem;
+  --click-stepper-vertical-bulleted-content-space-gap-y: 0.5rem;
+  --click-stepper-vertical-bulleted-content-space-left: 2.25rem;
+  --click-stepper-vertical-bulleted-content-space-bottom-default: 2.5rem;
+  --click-stepper-vertical-bulleted-content-space-bottom-active: 1.5rem;
+  --click-stepper-vertical-bulleted-color-title-incomplete: #606060;
+  --click-stepper-vertical-bulleted-color-title-complete: #b3b6bd;
+  --click-stepper-vertical-bulleted-color-title-active: #ffffff;
+  --click-switch-space-gap: 0.5rem;
+  --click-switch-radii-all: 9999px;
+  --click-switch-size-width: 2rem;
+  --click-switch-size-height: 1rem;
+  --click-switch-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-color-background-default: #606060;
+  --click-switch-color-background-active: #faff69;
+  --click-switch-color-background-disabled: #414141;
+  --click-switch-color-stroke-default: #606060;
+  --click-switch-color-stroke-active: #faff69;
+  --click-switch-color-stroke-disabled: #414141;
+  --click-switch-color-indicator-default: #151515;
+  --click-switch-color-indicator-active: #161517;
+  --click-switch-color-indicator-disabled: #606060;
+  --click-table-header-title-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-header-cell-space-md-y: 0.75rem;
+  --click-table-header-cell-space-md-x: 1rem;
+  --click-table-header-cell-space-sm-y: 0.5rem;
+  --click-table-header-cell-space-sm-x: 1rem;
+  --click-table-header-color-background-default: #282828;
+  --click-table-header-color-background-hover: #282828;
+  --click-table-header-color-background-active: rgb(17.794% 17.794% 17.794%);
+  --click-table-header-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-table-header-color-icon-default: #ffffff;
+  --click-table-header-color-checkbox-background-default: #cccfd3;
+  --click-table-header-color-checkbox-border-default: #808691;
+  --click-table-cell-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-cell-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-cell-stroke: 1px;
+  --click-table-radii-all: 0.25rem;
+  --click-table-body-cell-space-md-y: 1rem;
+  --click-table-body-cell-space-md-x: 1rem;
+  --click-table-body-cell-space-sm-y: 0.5rem;
+  --click-table-body-cell-space-sm-x: 1rem;
+  --click-table-mobile-cell-space-y: 1rem;
+  --click-table-mobile-cell-space-x: 1rem;
+  --click-table-mobile-cell-space-gap: 0.5rem;
+  --click-table-row-color-background-default: #1f1f1c;
+  --click-table-row-color-background-hover: lch(15.792 0 none);
+  --click-table-row-color-background-active: rgb(17.535% 17.535% 17.535%);
+  --click-table-row-color-stroke-default: #323232;
+  --click-table-row-color-text-default: #ffffff;
+  --click-table-row-color-text-disabled: #808080;
+  --click-table-row-color-link-default: #faff69;
+  --click-table-row-color-label-default: #b3b6bd;
+  --click-table-row-color-barChart-default: #414141;
+  --click-table-row-color-barChart-hover: #606060;
+  --click-table-global-color-stroke-default: #323232;
+  --click-table-global-color-background-default: #1f1f1c;
+  --click-tabs-space-y: 0.5rem;
+  --click-tabs-space-x: 0.75rem;
+  --click-tabs-radii-all: 0.25rem;
+  --click-tabs-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-basic-strokeWidth-default: 1px;
+  --click-tabs-basic-strokeWidth-hover: 1px;
+  --click-tabs-basic-strokeWidth-active: 2px;
+  --click-tabs-basic-strokeWidth-global: 1px;
+  --click-tabs-basic-color-background-default: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-background-hover: #282828;
+  --click-tabs-basic-color-background-active: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-text-default: #b3b6bd;
+  --click-tabs-basic-color-text-hover: #ffffff;
+  --click-tabs-basic-color-text-active: #ffffff;
+  --click-tabs-basic-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-stroke-hover: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-stroke-active: #faff69;
+  --click-tabs-basic-color-global-default: #323232;
+  --click-tabs-fileTabs-icon-size-height: 1rem;
+  --click-tabs-fileTabs-icon-size-width: 1rem;
+  --click-tabs-fileTabs-space-y: 1.0625rem;
+  --click-tabs-fileTabs-space-x: 1rem;
+  --click-tabs-fileTabs-space-gap: 0.75rem;
+  --click-tabs-fileTabs-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-radii-all: 0;
+  --click-tabs-fileTabs-color-background-default: #1f1f1c;
+  --click-tabs-fileTabs-color-background-hover: #282828;
+  --click-tabs-fileTabs-color-background-active: #282828;
+  --click-tabs-fileTabs-color-text-default: #b3b6bd;
+  --click-tabs-fileTabs-color-text-hover: #ffffff;
+  --click-tabs-fileTabs-color-text-active: #ffffff;
+  --click-tabs-fileTabs-color-stroke-default: #323232;
+  --click-tabs-fileTabs-color-stroke-hover: #323232;
+  --click-tabs-fileTabs-color-stroke-active: #323232;
+  --click-tabs-fileTabs-color-closeButton-background-default: rgba(0, 0, 0, 0);
+  --click-tabs-fileTabs-color-closeButton-background-hover: #414141;
+  --click-toast-icon-size-height: 1rem;
+  --click-toast-icon-size-width: 1rem;
+  --click-toast-space-title-gap: 0.5rem;
+  --click-toast-space-y: 0.75rem;
+  --click-toast-space-x: 0.75rem;
+  --click-toast-space-gap: 0.5rem;
+  --click-toast-radii-all: 0.25rem;
+  --click-toast-shadow: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-toast-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-toast-typography-description-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-toast-size-width: 20.75rem;
+  --click-toast-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-toast-color-description-default: #b3b6bd;
+  --click-toast-color-stroke-default: #414141;
+  --click-toast-color-icon-default: rgb(97.5% 97.5% 97.5%);
+  --click-toast-color-icon-success: #ccffd0;
+  --click-toast-color-icon-warning: #ffb88f;
+  --click-toast-color-icon-danger: #ffbaba;
+  --click-tooltip-radii-all: 0.25rem;
+  --click-tooltip-space-x: 0.75rem;
+  --click-tooltip-space-y: 0.5rem;
+  --click-tooltip-typography-label-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tooltip-color-background-default: lch(16.114 0 none / 0.95);
+  --click-tooltip-color-label-default: #ffffff;
+  --click-dashboards-chartWidget-space-gap: 1rem;
+  --click-dashboards-chartWidget-space-element-gap: 0.5rem;
+  --click-dashboards-chartWidget-borderWidth-default: 1px;
+  --click-dashboards-chartWidget-stroke-default: 1px solid #323232;
+  --click-dashboards-chartWidget-stroke-element-default: 1px solid #323232;
+  --click-dashboards-chartWidget-stroke-hover: 1px solid #414141;
+  --click-dashboards-chartWidget-stroke-selected: 1px solid #faff69;
+  --click-dashboards-chartWidget-element-radii-all: 0.25rem;
+  --click-dashboards-chartWidget-radii-all: 0.25rem;
+  --click-dashboards-chartWidget-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-typography-description-default-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-typography-label-default-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-shadow-default: 0;
+  --click-dashboards-chartWidget-shadow-hover: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-dashboards-chartWidget-size-icon-all-drag: 1.25rem;
+  --click-dashboards-chartWidget-size-icon-all-menu: 1.5rem;
+  --click-dashboards-chartWidget-size-icon-all-resize: 0.75rem;
+  --click-dashboards-chartWidget-color-stroke-default: #323232;
+  --click-dashboards-chartWidget-color-stroke-hover: #414141;
+  --click-dashboards-chartWidget-color-stroke-selected: #faff69;
+  --click-dashboards-chartWidget-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-dashboards-chartWidget-color-description-default: #b3b6bd;
+  --click-dashboards-chartWidget-color-legend-default: #b3b6bd;
+  --click-dashboards-chartWidget-color-legend-hover: #b3b6bd;
+  --click-dashboards-chartWidget-color-legend-selected: #ffffff;
+  --click-dashboards-chartWidget-color-element-stroke-default: #323232;
+  --click-dashboards-chartWidget-color-background-default: #282828;
+  --click-dashboards-chartWidget-color-background-hover: #282828;
+  --click-dashboards-chartWidget-color-background-selected: #282828;
+  --click-dashboards-chartWidget-color-icon-default: #ffffff;
+  --click-dashboards-chartWidget-color-icon-hover: #ffffff;
+  --click-dashboards-chartWidget-color-icon-selected: #faff69;
+  --click-dashboards-chartWidget-color-opacity-bar-default: 0.2;
+  --click-dashboards-chartWidget-color-opacity-bar-hover: 0.5;
+  --click-dashboards-chartWidget-color-label-default: #b3b6bd;
+  --click-dashboards-chartWidget-color-label-hover: #b3b6bd;
+  --click-dashboards-chartWidget-color-label-selected: #b3b6bd;
+  --click-global-color-background-default: #1f1f1c;
+  --click-global-color-background-muted: #282828;
+  --click-global-color-text-default: #ffffff;
+  --click-global-color-text-muted: #b3b6bd;
+  --click-global-color-text-disabled: #808080;
+  --click-global-color-text-link-default: #faff69;
+  --click-global-color-text-link-hover: #feffc2;
+  --click-global-color-text-danger: #ffbaba;
+  --click-global-color-stroke-default: #323232;
+  --click-global-color-stroke-muted: #323232;
+  --click-global-color-stroke-intense: #414141;
+  --click-global-color-accent-default: #faff69;
+  --click-global-color-outline-default: #faff69;
+  --click-global-color-shadow-default: rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --click-global-color-title-default: rgb(97.5% 97.5% 97.5%);
+  --click-global-color-title-muted: #b3b6bd;
+  --click-feedback-color-info-background: rgb(26.275% 49.412% 93.725% / 0.2);
+  --click-feedback-color-info-foreground: #d0dffb;
+  --click-feedback-color-success-background: rgb(20% 100% 26.667% / 0.2);
+  --click-feedback-color-success-foreground: #ccffd0;
+  --click-feedback-color-warning-background: rgb(100% 46.667% 16.078% / 0.2);
+  --click-feedback-color-warning-foreground: #ffb88f;
+  --click-feedback-color-danger-background: rgb(100% 13.725% 13.725% / 0.2);
+  --click-feedback-color-danger-foreground: #ffbaba;
+  --click-feedback-color-neutral-background: rgb(62.745% 62.745% 62.745% / 0.2);
+  --click-feedback-color-neutral-foreground: #c0c0c0;
+  --click-feedback-color-neutral-stroke: #323232;
+  --click-storybook-global-background: #1b1c1d;
+  --click-chart-bars-color-blue: #437eef;
+  --click-chart-bars-color-orange: #ff7729;
+  --click-chart-bars-color-green: #33ff44;
+  --click-chart-bars-color-fuchsia: #fb64d6;
+  --click-chart-bars-color-yellow: #eef400;
+  --click-chart-bars-color-violet: #bb33ff;
+  --click-chart-bars-color-babyblue: #00cbeb;
+  --click-chart-bars-color-red: #ff2323;
+  --click-chart-bars-color-teal: #6df8e1;
+  --click-chart-bars-color-sunrise: #ffc300;
+  --click-chart-bars-color-slate: #9a9ea7;
+  --click-chart-color-default-blue: #437eef;
+  --click-chart-color-default-orange: #ff7729;
+  --click-chart-color-default-green: #33ff44;
+  --click-chart-color-default-fuchsia: #fb64d6;
+  --click-chart-color-default-yellow: #eef400;
+  --click-chart-color-default-violet: #bb33ff;
+  --click-chart-color-default-babyblue: #00cbeb;
+  --click-chart-color-default-red: #ff2323;
+  --click-chart-color-default-teal: #6df8e1;
+  --click-chart-color-default-sunrise: #ffc300;
+  --click-chart-color-default-slate: #9a9ea7;
+  --click-chart-color-label-default: #ffffff;
+  --click-chart-color-label-deselected: lch(100 0 none / 0.3);
+  --click-serviceCard-color-background-default: rgb(17.794% 17.794% 17.794%);
+  --click-serviceCard-color-background-hover: lch(19.053 0 none);
+  --click-serviceCard-color-stroke-default: rgb(23.627% 23.627% 23.627%);
+  --click-serviceCard-color-stroke-hover: rgb(27.446% 27.446% 27.446%);
+  --click-gareth-test-main-text: #ffffff;
+  --click-gareth-test-main-danger: #ffbaba;
+  --transition-default: all 100ms ease-in 0ms;
+  --transition-duration-slow: 300ms;
+  --transition-duration-smooth: 150ms;
+  --transition-duration-medium: 100ms;
+  --transition-duration-fast: 50ms;
+  --transition-delay-slow: 100ms;
+  --transition-delay-fast: 0ms;
+  --transition-function-ease: ease;
+  --transition-function-ease-in: ease-in;
+  --transition-function-ease-in-out: ease-in-out;
+  --transition-function-linear: linear;
+  --grid-header-cell-borderWidth-default: 1px;
+  --grid-header-cell-borderWidth-selectIndirect: 1px;
+  --grid-header-cell-borderWidth-selectDirect: 1px;
+  --grid-body-cell-borderWidth-default: 1px;
+  --grid-body-cell-borderWidth-selectIndirect: 1px;
+  --grid-body-cell-borderWidth-selectDirect: 2px;
+  --palette-brand-50: #ffffe8;
+  --palette-brand-100: #feffc2;
+  --palette-brand-200: #fdffa3;
+  --palette-brand-300: #faff69;
+  --palette-brand-400: #eef400;
+  --palette-brand-500: #c7cc00;
+  --palette-brand-600: #959900;
+  --palette-brand-700: #686b00;
+  --palette-brand-800: #3c4601;
+  --palette-brand-900: #333300;
+  --palette-brand-base: #fbff46;
+  --palette-neutral-0: #ffffff;
+  --palette-neutral-100: #f9f9f9;
+  --palette-neutral-200: #dfdfdf;
+  --palette-neutral-300: #c0c0c0;
+  --palette-neutral-400: #a0a0a0;
+  --palette-neutral-500: #808080;
+  --palette-neutral-600: #606060;
+  --palette-neutral-650: #505050;
+  --palette-neutral-700: #414141;
+  --palette-neutral-712: #323232;
+  --palette-neutral-725: #282828;
+  --palette-neutral-750: #1f1f1c;
+  --palette-neutral-800: #1d1d1d;
+  --palette-neutral-900: #151515;
+  --palette-neutral-base: #212121;
+  --palette-slate-25: #fbfcff;
+  --palette-slate-50: #f6f7fa;
+  --palette-slate-100: #e6e7e9;
+  --palette-slate-200: #cccfd3;
+  --palette-slate-300: #b3b6bd;
+  --palette-slate-400: #9a9ea7;
+  --palette-slate-500: #808691;
+  --palette-slate-600: #696e79;
+  --palette-slate-700: #53575f;
+  --palette-slate-800: #302e32;
+  --palette-slate-900: #161517;
+  --palette-slate-base: #373439;
+  --palette-slate-50a: lch(49.809 30.506 276.77 / 0.06);
+  --palette-indigo-50: #f4f1fc;
+  --palette-indigo-100: #e4e2e9;
+  --palette-indigo-200: #c8c5d3;
+  --palette-indigo-300: #ada8bd;
+  --palette-indigo-400: #918ba7;
+  --palette-indigo-500: #766e91;
+  --palette-indigo-600: #5e5874;
+  --palette-indigo-700: #474257;
+  --palette-indigo-800: #23212c;
+  --palette-indigo-900: #18161d;
+  --palette-indigo-base: #2f2c3a;
+  --palette-info-50: #e7effd;
+  --palette-info-100: #d0dffb;
+  --palette-info-200: #a1bef7;
+  --palette-info-300: #6d9bf3;
+  --palette-info-400: #437eef;
+  --palette-info-500: #1d64ec;
+  --palette-info-600: #104ec6;
+  --palette-info-650: #0d3e9b;
+  --palette-info-700: #0d3e9b;
+  --palette-info-800: #092b6c;
+  --palette-info-900: #061c47;
+  --palette-info-base: #4781f0;
+  --palette-success-50: #e5ffe8;
+  --palette-success-100: #ccffd0;
+  --palette-success-200: #99ffa1;
+  --palette-success-300: #66ff73;
+  --palette-success-400: #33ff44;
+  --palette-success-500: #00e513;
+  --palette-success-600: #00bd10;
+  --palette-success-700: #008a0b;
+  --palette-success-800: #006108;
+  --palette-success-850: #004206;
+  --palette-success-900: #004206;
+  --palette-success-base: #62de85;
+  --palette-warning-50: #ffe2d1;
+  --palette-warning-100: #ffcbad;
+  --palette-warning-200: #ffb88f;
+  --palette-warning-300: #ff9457;
+  --palette-warning-400: #ff7729;
+  --palette-warning-500: #f55a00;
+  --palette-warning-600: #d64f00;
+  --palette-warning-700: #a33c00;
+  --palette-warning-800: #7a2d00;
+  --palette-warning-900: #471a00;
+  --palette-warning-base: #ffa63d;
+  --palette-danger-50: #ffdddd;
+  --palette-danger-100: #ffbaba;
+  --palette-danger-200: #ff9898;
+  --palette-danger-300: #ff7575;
+  --palette-danger-400: #ff2323;
+  --palette-danger-500: #f10000;
+  --palette-danger-600: #c10000;
+  --palette-danger-700: #910000;
+  --palette-danger-800: #610000;
+  --palette-danger-900: #300000;
+  --palette-danger-base: #ff5353;
+  --palette-gradients-base: linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%);
+  --palette-gradients-yellowToblack: linear-gradient(132deg, #FAFF69 8%, #292929 30%);
+  --palette-gradients-whiteToblack: linear-gradient(132deg, #FFFFFF 8%, #292929 30%);
+  --palette-gradients-transparent: rgba(0, 0, 0, 0);
+  --palette-utility-transparent: rgba(0, 0, 0, 0);
+  --palette-teal-50: #e6fefa;
+  --palette-teal-100: #cffcf4;
+  --palette-teal-200: #a3faec;
+  --palette-teal-300: #6df8e1;
+  --palette-teal-400: #0cedc8;
+  --palette-teal-500: #0bd0af;
+  --palette-teal-600: #089b83;
+  --palette-teal-700: #067462;
+  --palette-teal-800: #045245;
+  --palette-teal-850: #004237;
+  --palette-teal-900: #03352d;
+  --palette-violet-50: #f6e5ff;
+  --palette-violet-100: #eeccff;
+  --palette-violet-200: #dd99ff;
+  --palette-violet-300: #cc66ff;
+  --palette-violet-400: #bb33ff;
+  --palette-violet-500: #aa00ff;
+  --palette-violet-600: #8800cc;
+  --palette-violet-700: #660099;
+  --palette-violet-800: #440066;
+  --palette-violet-850: #33004d;
+  --palette-violet-900: #220033;
+  --palette-fuchsia-50: #fbeff8;
+  --palette-fuchsia-100: #fbc9ef;
+  --palette-fuchsia-200: #fb97e2;
+  --palette-fuchsia-300: #fb64d6;
+  --palette-fuchsia-400: #fb32c9;
+  --palette-fuchsia-500: #fb00bc;
+  --palette-fuchsia-600: #cc0099;
+  --palette-fuchsia-700: #990073;
+  --palette-fuchsia-800: #66004d;
+  --palette-fuchsia-850: #4d0039;
+  --palette-fuchsia-900: #330026;
+  --palette-sunrise-50: #fff3cc;
+  --palette-sunrise-100: #ffe799;
+  --palette-sunrise-200: #ffdb66;
+  --palette-sunrise-300: #ffcf33;
+  --palette-sunrise-400: #ffc300;
+  --palette-sunrise-500: #e0ac00;
+  --palette-sunrise-600: #b28800;
+  --palette-sunrise-700: #8a6900;
+  --palette-sunrise-800: #574200;
+  --palette-sunrise-900: #332700;
+  --palette-babyblue-50: #dbfaff;
+  --palette-babyblue-100: #bdf6ff;
+  --palette-babyblue-200: #8aefff;
+  --palette-babyblue-300: #33e4ff;
+  --palette-babyblue-400: #00cbeb;
+  --palette-babyblue-500: #00b5d1;
+  --palette-babyblue-600: #008599;
+  --palette-babyblue-700: #006170;
+  --palette-babyblue-800: #00424d;
+  --palette-babyblue-900: #002c33;
+  --sizes-0: 0;
+  --sizes-1: 1px;
+  --sizes-2: 0.25rem;
+  --sizes-3: 0.5rem;
+  --sizes-4: 0.75rem;
+  --sizes-5: 1rem;
+  --sizes-6: 1.25rem;
+  --sizes-7: 1.5rem;
+  --sizes-8: 1.75rem;
+  --sizes-9: 2rem;
+  --sizes-10: 2.5rem;
+  --sizes-11: 4rem;
+  --typography-font-families-regular: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-font-families-mono: "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-font-families-display: 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-font-weights-1: 400;
+  --typography-font-weights-2: 500;
+  --typography-font-weights-3: 600;
+  --typography-font-weights-4: 700;
+  --typography-font-sizes-0: 0.625rem;
+  --typography-font-sizes-1: 0.75rem;
+  --typography-font-sizes-2: 0.875rem;
+  --typography-font-sizes-3: 1rem;
+  --typography-font-sizes-4: 1.125rem;
+  --typography-font-sizes-5: 1.25rem;
+  --typography-font-sizes-6: 2rem;
+  --typography-font-sizes-base: 16px;
+  --typography-font-line-height-1: 1.5;
+  --typography-font-line-height-2: 1.6;
+  --typography-font-line-height-3: 1.7;
+  --typography-font-line-height-4: 1.3;
+  --typography-styles-product-titles-xs: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-sm: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-md: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-lg: 700 1.125rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-xl: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-2xl: 600 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-xs: 400 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-sm: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-md: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-lg: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-xs: 500 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-md: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-lg: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-xs: 600 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-sm: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-md: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-lg: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-mono-xs: 500 0.625rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-sm: 500 0.75rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-md: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-lg: 500 1rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-bold-xs: 700 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-sm: 700 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-md: 700 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-lg: 700 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-xs: 600 20px/1.5 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-sm: 600 24px/1.5 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-md: 600 36px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-lg: 600 56px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-xl: 700 64px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-2xl: 700 80px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-field-md: 400 0.875rem/1.6 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --border-radii-0: 0;
+  --border-radii-1: 0.25rem;
+  --border-radii-2: 0.5rem;
+  --border-radii-3: 0.75rem;
+  --border-radii-full: 9999px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --spaces-0: 0;
+  --spaces-1: 0.25rem;
+  --spaces-2: 0.5rem;
+  --spaces-3: 0.75rem;
+  --spaces-4: 1rem;
+  --spaces-5: 1.5rem;
+  --spaces-6: 2rem;
+  --spaces-7: 2.5rem;
+  --spaces-8: 4rem;
+  --shadow-1: 0 4px 6px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6), 0 2px 4px -1px rgb(8.2353% 8.2353% 8.2353% / 0.6);
+  --shadow-2: 0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1);
+  --shadow-3: -5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --shadow-4: 5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --shadow-5: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
+  --breakpoint-sizes-sm: 640px;
+  --breakpoint-sizes-md: 768px;
+  --breakpoint-sizes-lg: 1024px;
+  --breakpoint-sizes-xl: 1280px;
+  --breakpoint-sizes-2xl: 1536px;
+  --global-color-gradients-yellowToBlack: linear-gradient(132deg, #faff69 8%, #292929 30%);
+  --global-color-gradients-whiteToBlack: linear-gradient(132deg, #ffffff 8%, #292929 30%);
+  --global-color-background-default: #1f1f1c;
+  --global-color-background-muted: #282828;
+  --global-color-background-sidebar: #1f1f1c;
+  --global-color-background-split: #282828;
+  --global-color-background-muted_a: lch(49.809 30.506 276.77 / 0.06);
+  --global-color-text-default: #ffffff;
+  --global-color-text-muted: #b3b6bd;
+  --global-color-text-disabled: #808080;
+  --global-color-text-link-default: #faff69;
+  --global-color-text-link-hover: #feffc2;
+  --global-color-stroke-default: #323232;
+  --global-color-stroke-muted: #323232;
+  --global-color-stroke-intense: #414141;
+  --global-color-stroke-split: #414141;
+  --global-color-accent-default: #faff69;
+  --global-color-outline-default: #faff69;
+  --global-color-shadow-default: lch(6.7738 0 none / 0.6);
+  --global-color-feedback-info-background: #0d3e9b;
+  --global-color-feedback-info-foreground: #d0dffb;
+  --global-color-feedback-success-background: #004206;
+  --global-color-feedback-success-foreground: #ccffd0;
+  --global-color-feedback-warning-background: #7a2d00;
+  --global-color-feedback-warning-foreground: #ffb88f;
+  --global-color-feedback-danger-background: #610000;
+  --global-color-feedback-danger-foreground: #ffbaba;
+  --global-color-feedback-neutral-background: #414141;
+  --global-color-feedback-neutral-foreground: #f9f9f9;
+  --global-color-feedback-neutral-stroke: #323232;
+  --global-color-chart-bars-blue: #437eef;
+  --global-color-chart-bars-orange: #ff7729;
+  --global-color-chart-bars-green: #33ff44;
+  --global-color-chart-bars-fuchsia: #fb64d6;
+  --global-color-chart-bars-yellow: #eef400;
+  --global-color-chart-bars-violet: #bb33ff;
+  --global-color-chart-bars-babyblue: #00cbeb;
+  --global-color-chart-bars-red: #ff2323;
+  --global-color-chart-bars-teal: #6df8e1;
+  --global-color-chart-bars-sunrise: #ffc300;
+  --global-color-chart-bars-slate: #9a9ea7;
+  --global-color-chart-default-blue: #437eef;
+  --global-color-chart-default-orange: #ff7729;
+  --global-color-chart-default-green: #33ff44;
+  --global-color-chart-default-fuchsia: #fb64d6;
+  --global-color-chart-default-yellow: #eef400;
+  --global-color-chart-default-violet: #bb33ff;
+  --global-color-chart-default-babyblue: #00cbeb;
+  --global-color-chart-default-red: #ff2323;
+  --global-color-chart-default-danger: #ff2323;
+  --global-color-chart-default-teal: #6df8e1;
+  --global-color-chart-default-sunrise: #ffc300;
+  --global-color-chart-default-slate: #9a9ea7;
+  --global-color-chart-label-default: #ffffff;
+  --global-color-chart-label-deselected: lch(100 0 none / 0.3);
+  --global-color-iconButton-badge-foreground: #1d1d1d;
+  --global-color-iconButton-badge-background: #faff69;
+  --global-color-icon-background: linear-gradient(132deg, #FAFF69 8%, #292929 30%);
+  --name: dark;
+}
\ No newline at end of file
diff --git a/src/theme/styles/tokens-light.css b/src/theme/styles/tokens-light.css
new file mode 100644
index 000000000..38bc80cf5
--- /dev/null
+++ b/src/theme/styles/tokens-light.css
@@ -0,0 +1,1795 @@
+:root,
+[data-cui-theme="light"] {
+  --click-accordion-sm-icon-size-height: 1rem;
+  --click-accordion-sm-icon-size-width: 1rem;
+  --click-accordion-sm-space-gap: 0.25rem;
+  --click-accordion-sm-typography-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-sm-typography-label-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-sm-typography-label-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-icon-size-height: 1.25rem;
+  --click-accordion-md-icon-size-width: 1.25rem;
+  --click-accordion-md-space-gap: 0.25rem;
+  --click-accordion-md-typography-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-typography-label-hover: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-md-typography-label-active: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-icon-size-height: 1.5rem;
+  --click-accordion-lg-icon-size-width: 1.5rem;
+  --click-accordion-lg-space-gap: 0.25rem;
+  --click-accordion-lg-typography-label-default: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-typography-label-hover: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-lg-typography-label-active: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-accordion-color-default-label-default: #161517;
+  --click-accordion-color-default-label-hover: lch(13.917 1.3308 305.43);
+  --click-accordion-color-default-label-active: #161517;
+  --click-accordion-color-default-icon-default: #161517;
+  --click-accordion-color-default-icon-hover: lch(13.917 1.3308 305.43);
+  --click-accordion-color-default-icon-active: #161517;
+  --click-accordion-color-link-label-default: #437eef;
+  --click-accordion-color-link-label-hover: #104ec6;
+  --click-accordion-color-link-label-active: #437eef;
+  --click-accordion-color-link-icon-default: #437eef;
+  --click-accordion-color-link-icon-hover: lch(40.786 66.387 286.32);
+  --click-accordion-color-link-icon-active: #437eef;
+  --click-alert-medium-space-y: 0.75rem;
+  --click-alert-medium-space-x: 0.75rem;
+  --click-alert-medium-space-gap: 0;
+  --click-alert-medium-space-banner: 0.5rem;
+  --click-alert-medium-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-medium-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-medium-icon-height: 1.25rem;
+  --click-alert-medium-icon-width: 1.25rem;
+  --click-alert-small-space-y: 0.5rem;
+  --click-alert-small-space-x: 0.75rem;
+  --click-alert-small-space-gap: 0;
+  --click-alert-small-space-banner: 0.25rem;
+  --click-alert-small-icon-height: 1rem;
+  --click-alert-small-icon-width: 1rem;
+  --click-alert-small-typography-title-default: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-small-typography-text-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-alert-radii-center: 0;
+  --click-alert-radii-end: 0.25rem;
+  --click-alert-color-background-default: #ffffff;
+  --click-alert-color-background-success: rgb(20% 100% 26.667% / 0.1);
+  --click-alert-color-background-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-alert-color-background-danger: rgb(100% 13.725% 13.725% / 0.1);
+  --click-alert-color-background-warning: rgb(100% 46.667% 16.078% / 0.1);
+  --click-alert-color-background-info: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-alert-color-text-default: #696e79;
+  --click-alert-color-text-success: #008a0b;
+  --click-alert-color-text-neutral: #53575f;
+  --click-alert-color-text-danger: #c10000;
+  --click-alert-color-text-warning: #a33c00;
+  --click-alert-color-text-info: #437eef;
+  --click-alert-color-iconBackground-default: #ffffff;
+  --click-alert-color-iconBackground-success: rgb(20% 100% 26.667% / 0);
+  --click-alert-color-iconBackground-neutral: rgb(41.176% 43.137% 47.451% / 0);
+  --click-alert-color-iconBackground-danger: rgb(100% 13.725% 13.725% / 0);
+  --click-alert-color-iconBackground-warning: rgb(100% 46.667% 16.078% / 0);
+  --click-alert-color-iconBackground-info: rgb(26.275% 49.412% 93.725% / 0);
+  --click-alert-color-iconForeground-default: #696e79;
+  --click-alert-color-iconForeground-success: lch(49.786 70.246 135.31 / 0.75);
+  --click-alert-color-iconForeground-neutral: lch(36.838 5.2307 266.96 / 0.75);
+  --click-alert-color-iconForeground-danger: lch(41.001 86.638 40.858 / 0.75);
+  --click-alert-color-iconForeground-warning: lch(40.227 66.602 51.059 / 0.75);
+  --click-alert-color-iconForeground-info: lch(53.426 64.605 278.98 / 0.75);
+  --click-avatar-typography-label-sm-default: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-sm-hover: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-sm-active: 600 0.6875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-default: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-hover: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-typography-label-md-active: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-avatar-size-label-width: 1.5rem;
+  --click-avatar-size-width: 1.5rem;
+  --click-avatar-size-height: 1.5rem;
+  --click-avatar-radii-all: 9999px;
+  --click-avatar-color-background-default: #696e79;
+  --click-avatar-color-background-hover: #9a9ea7;
+  --click-avatar-color-background-active: #9a9ea7;
+  --click-avatar-color-text-default: #ffffff;
+  --click-avatar-color-text-hover: #ffffff;
+  --click-avatar-color-text-active: #ffffff;
+  --click-badge-space-md-x: 0.75rem;
+  --click-badge-space-md-y: 0.125rem;
+  --click-badge-space-md-gap: 0.25rem;
+  --click-badge-space-sm-x: 0.5rem;
+  --click-badge-space-sm-y: 0.1563rem;
+  --click-badge-space-sm-gap: 0.125rem;
+  --click-badge-typography-label-md-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-badge-typography-label-sm-default: 500 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-badge-radii-all: 9999px;
+  --click-badge-stroke: 1px;
+  --click-badge-icon-md-size-height: 0.75rem;
+  --click-badge-icon-md-size-width: 0.75rem;
+  --click-badge-icon-sm-size-height: 0.625rem;
+  --click-badge-icon-sm-size-width: 0.625rem;
+  --click-badge-opaque-color-background-default: #f6f7fa;
+  --click-badge-opaque-color-background-success: rgb(20% 100% 26.667% / 0.1);
+  --click-badge-opaque-color-background-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-badge-opaque-color-background-danger: rgb(100% 13.725% 13.725% / 0.1);
+  --click-badge-opaque-color-background-disabled: #dfdfdf;
+  --click-badge-opaque-color-background-info: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-badge-opaque-color-background-warning: rgb(100% 46.667% 16.078% / 0.1);
+  --click-badge-opaque-color-text-default: #696e79;
+  --click-badge-opaque-color-text-success: #008a0b;
+  --click-badge-opaque-color-text-neutral: #53575f;
+  --click-badge-opaque-color-text-danger: #c10000;
+  --click-badge-opaque-color-text-disabled: #a0a0a0;
+  --click-badge-opaque-color-text-info: #437eef;
+  --click-badge-opaque-color-text-warning: #a33c00;
+  --click-badge-opaque-color-stroke-default: #e6e7e9;
+  --click-badge-opaque-color-stroke-success: rgb(20% 100% 26.667% / 0.05);
+  --click-badge-opaque-color-stroke-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-badge-opaque-color-stroke-danger: rgb(100% 13.725% 13.725% / 0.05);
+  --click-badge-opaque-color-stroke-disabled: rgb(83.078% 83.078% 83.078%);
+  --click-badge-opaque-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.05);
+  --click-badge-opaque-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.05);
+  --click-badge-solid-color-background-default: #a0a0a0;
+  --click-badge-solid-color-background-success: #008a0b;
+  --click-badge-solid-color-background-neutral: #606060;
+  --click-badge-solid-color-background-danger: #c10000;
+  --click-badge-solid-color-background-disabled: #dfdfdf;
+  --click-badge-solid-color-background-info: #104ec6;
+  --click-badge-solid-color-background-warning: #d64f00;
+  --click-badge-solid-color-text-default: #ffffff;
+  --click-badge-solid-color-text-success: #ffffff;
+  --click-badge-solid-color-text-neutral: #ffffff;
+  --click-badge-solid-color-text-danger: #ffffff;
+  --click-badge-solid-color-text-disabled: #a0a0a0;
+  --click-badge-solid-color-text-info: #ffffff;
+  --click-badge-solid-color-text-warning: #ffffff;
+  --click-badge-solid-color-stroke-default: #e6e7e9;
+  --click-badge-solid-color-stroke-success: rgb(20% 100% 26.667% / 0.05);
+  --click-badge-solid-color-stroke-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-badge-solid-color-stroke-danger: rgb(100% 13.725% 13.725% / 0.05);
+  --click-badge-solid-color-stroke-disabled: rgb(83.078% 83.078% 83.078%);
+  --click-badge-solid-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.05);
+  --click-badge-solid-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.05);
+  --click-bigStat-space-all: 1rem;
+  --click-bigStat-space-sm-gap: 0;
+  --click-bigStat-space-lg-gap: 0.5rem;
+  --click-bigStat-radii-all: 0.25rem;
+  --click-bigStat-stroke: 1px;
+  --click-bigStat-typography-lg-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-label-muted: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-title-default: 700 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-lg-title-muted: 700 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-label-muted: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-typography-sm-title-muted: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-bigStat-color-stroke-default: #e6e7e9;
+  --click-bigStat-color-stroke-muted: #e6e7e9;
+  --click-bigStat-color-stroke-danger: #c10000;
+  --click-bigStat-color-background-default: #ffffff;
+  --click-bigStat-color-background-muted: #f6f7fa;
+  --click-bigStat-color-label-default: #696e79;
+  --click-bigStat-color-label-muted: #696e79;
+  --click-bigStat-color-label-danger: #c10000;
+  --click-bigStat-color-title-default: lch(11.126 1.374 305.43);
+  --click-bigStat-color-title-muted: lch(11.126 1.374 305.43);
+  --click-button-radii-all: 0.25rem;
+  --click-button-basic-space-x: 1rem;
+  --click-button-basic-space-y: 0.2813rem;
+  --click-button-basic-space-gap: 0.5rem;
+  --click-button-basic-space-group: 0.5rem;
+  --click-button-basic-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-basic-size-icon-height: 0.9688rem;
+  --click-button-basic-size-icon-all: 0.9688rem;
+  --click-button-basic-size-icon-width: 0.9688rem;
+  --click-button-basic-color-primary-background-default: #302e32;
+  --click-button-basic-color-primary-background-hover: lch(29.47 4.1845 266.96);
+  --click-button-basic-color-primary-background-active: #161517;
+  --click-button-basic-color-primary-background-disabled: #dfdfdf;
+  --click-button-basic-color-primary-background-loading: linear-gradient(90deg, rgb(76, 76, 76, 0.1) 0%, rgb(76, 76, 76) 100%);
+  --click-button-basic-color-primary-stroke-default: #302e32;
+  --click-button-basic-color-primary-stroke-hover: lch(29.47 4.1845 266.96);
+  --click-button-basic-color-primary-stroke-active: #161517;
+  --click-button-basic-color-primary-stroke-disabled: #dfdfdf;
+  --click-button-basic-color-primary-text-default: #ffffff;
+  --click-button-basic-color-primary-text-hover: #ffffff;
+  --click-button-basic-color-primary-text-active: #ffffff;
+  --click-button-basic-color-primary-text-disabled: #a0a0a0;
+  --click-button-basic-color-secondary-background-default: rgba(0, 0, 0, 0);
+  --click-button-basic-color-secondary-background-hover: #f6f7fa;
+  --click-button-basic-color-secondary-background-active: lch(95.274 1.5364 271.98);
+  --click-button-basic-color-secondary-background-disabled: #dfdfdf;
+  --click-button-basic-color-secondary-background-loading: linear-gradient(90deg, rgb(232, 233, 235, 0.1) 0%, rgb(232, 233, 235) 100%);
+  --click-button-basic-color-secondary-stroke-default: #e6e7e9;
+  --click-button-basic-color-secondary-stroke-hover: #e6e7e9;
+  --click-button-basic-color-secondary-stroke-active: #cccfd3;
+  --click-button-basic-color-secondary-stroke-disabled: #dfdfdf;
+  --click-button-basic-color-secondary-text-default: #161517;
+  --click-button-basic-color-secondary-text-hover: #161517;
+  --click-button-basic-color-secondary-text-active: #161517;
+  --click-button-basic-color-secondary-text-disabled: #a0a0a0;
+  --click-button-basic-color-danger-text-default: #c10000;
+  --click-button-basic-color-danger-text-hover: #c10000;
+  --click-button-basic-color-danger-text-active: #c10000;
+  --click-button-basic-color-danger-text-disabled: #a0a0a0;
+  --click-button-basic-color-danger-background-default: rgb(100% 13.725% 13.725% / 0.1);
+  --click-button-basic-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-basic-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.3);
+  --click-button-basic-color-danger-background-disabled: #dfdfdf;
+  --click-button-basic-color-danger-background-loading: linear-gradient(90deg, rgba(255, 211, 211, 0.1) 0%, rgb(255, 211, 211) 100%);
+  --click-button-basic-color-danger-stroke-default: rgb(100% 13.725% 13.725% / 0.1);
+  --click-button-basic-color-danger-stroke-hover: rgb(100% 13.725% 13.725% / 0.05);
+  --click-button-basic-color-danger-stroke-active: rgb(100% 13.725% 13.725% / 0.05);
+  --click-button-basic-color-danger-stroke-disabled: #dfdfdf;
+  --click-button-basic-color-empty-text-default: #437eef;
+  --click-button-basic-color-empty-text-hover: #104ec6;
+  --click-button-basic-color-empty-text-active: #437eef;
+  --click-button-basic-color-empty-text-disabled: #a0a0a0;
+  --click-button-basic-color-empty-background-default: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-hover: #f6f7fa;
+  --click-button-basic-color-empty-background-active: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-disabled: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-background-loading: linear-gradient(90deg, rgba(240, 242, 248, 0.1) 0%, rgb(240, 242, 248) 100%);
+  --click-button-basic-color-empty-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-basic-color-empty-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-iconButton-default-space-x: 0.4375rem;
+  --click-button-iconButton-default-space-y: 0.4375rem;
+  --click-button-iconButton-size-small: 0.75rem;
+  --click-button-iconButton-size-medium: 1rem;
+  --click-button-iconButton-size-large: 1.25rem;
+  --click-button-iconButton-radii-all: 0.25rem;
+  --click-button-iconButton-sm-space-x: 0.25rem;
+  --click-button-iconButton-sm-space-y: 0.25rem;
+  --click-button-iconButton-xs-space-x: 0;
+  --click-button-iconButton-xs-space-y: 0;
+  --click-button-iconButton-color-primary-background-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-primary-background-hover: #f6f7fa;
+  --click-button-iconButton-color-primary-background-active: rgb(86.824% 87.176% 88.235%);
+  --click-button-iconButton-color-primary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-primary-stroke-hover: #f6f7fa;
+  --click-button-iconButton-color-primary-stroke-active: rgb(86.824% 87.176% 88.235%);
+  --click-button-iconButton-color-primary-text-default: #161517;
+  --click-button-iconButton-color-primary-text-hover: #161517;
+  --click-button-iconButton-color-primary-text-active: #161517;
+  --click-button-iconButton-color-secondary-background-default: #302e32;
+  --click-button-iconButton-color-secondary-background-hover: lch(29.47 4.1845 266.96);
+  --click-button-iconButton-color-secondary-background-active: lch(6.5908 1.3668 305.43);
+  --click-button-iconButton-color-secondary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-secondary-stroke-hover: lch(29.47 4.1845 266.96);
+  --click-button-iconButton-color-secondary-stroke-active: lch(6.5908 1.3668 305.43);
+  --click-button-iconButton-color-secondary-text-default: #ffffff;
+  --click-button-iconButton-color-secondary-text-hover: #ffffff;
+  --click-button-iconButton-color-secondary-text-active: #ffffff;
+  --click-button-iconButton-color-disabled-background-default: #dfdfdf;
+  --click-button-iconButton-color-disabled-text-default: #a0a0a0;
+  --click-button-iconButton-color-danger-background-default: rgb(100% 13.725% 13.725% / 0.1);
+  --click-button-iconButton-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-iconButton-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.3);
+  --click-button-iconButton-color-danger-text-default: #c10000;
+  --click-button-iconButton-color-danger-text-hover: #c10000;
+  --click-button-iconButton-color-danger-text-active: #c10000;
+  --click-button-iconButton-color-danger-stroke-default: rgb(100% 13.725% 13.725% / 0.1);
+  --click-button-iconButton-color-danger-stroke-hover: rgb(100% 13.725% 13.725% / 0.2);
+  --click-button-iconButton-color-danger-stroke-active: rgb(100% 13.725% 13.725% / 0.3);
+  --click-button-iconButton-color-ghost-background-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-background-hover: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-background-active: rgb(0% 0% 0% / 0);
+  --click-button-iconButton-color-ghost-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-iconButton-color-ghost-text-default: #696e79;
+  --click-button-iconButton-color-ghost-text-hover: #161517;
+  --click-button-iconButton-color-ghost-text-active: #161517;
+  --click-button-iconButton-color-info-background-default: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-button-iconButton-color-info-background-hover: #d0dffb;
+  --click-button-iconButton-color-info-background-active: #a1bef7;
+  --click-button-iconButton-color-info-text-default: #437eef;
+  --click-button-iconButton-color-info-text-hover: #437eef;
+  --click-button-iconButton-color-info-text-active: #437eef;
+  --click-button-iconButton-color-info-stroke-default: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-button-iconButton-color-info-stroke-hover: #d0dffb;
+  --click-button-iconButton-color-info-stroke-active: #a1bef7;
+  --click-button-stroke: 1px;
+  --click-button-split-icon-space-y: 0.4375rem;
+  --click-button-split-icon-space-x: 0.3438rem;
+  --click-button-split-space-x: 1rem;
+  --click-button-split-space-y: 0.2813rem;
+  --click-button-split-space-gap: 0.5rem;
+  --click-button-split-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-split-primary-divide-default: lch(23.301 2.6341 306.08);
+  --click-button-split-primary-divide-active: lch(16.375 2.3568 306.08);
+  --click-button-split-primary-divide-hover: lch(33.055 3.2737 266.96);
+  --click-button-split-primary-divide-disabled: lch(75.5 0 none);
+  --click-button-split-primary-background-main-default: #302e32;
+  --click-button-split-primary-background-main-hover: lch(26.965 3.8288 266.96);
+  --click-button-split-primary-background-main-active: lch(6.348 1.3164 305.43);
+  --click-button-split-primary-background-main-disabled: #dfdfdf;
+  --click-button-split-primary-background-action-default: #161517;
+  --click-button-split-primary-background-action-hover: lch(25.617 3.6374 266.96);
+  --click-button-split-primary-background-action-active: lch(3.4689 0.71935 305.43);
+  --click-button-split-primary-background-action-disabled: lch(84.382 0 none);
+  --click-button-split-primary-text-default: #ffffff;
+  --click-button-split-primary-text-hover: #ffffff;
+  --click-button-split-primary-text-active: #ffffff;
+  --click-button-split-primary-text-disabled: #a0a0a0;
+  --click-button-split-primary-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-split-primary-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-split-secondary-divide-default: lch(92.029 1.0472 265.86);
+  --click-button-split-secondary-divide-hover: lch(92.449 0.99207 265.86);
+  --click-button-split-secondary-divide-active: #cccfd3;
+  --click-button-split-secondary-divide-disabled: lch(75.5 0 none);
+  --click-button-split-secondary-background-main-default: rgba(0, 0, 0, 0);
+  --click-button-split-secondary-background-main-hover: #f6f7fa;
+  --click-button-split-secondary-background-main-active: lch(95.274 1.5364 271.98);
+  --click-button-split-secondary-background-main-disabled: #dfdfdf;
+  --click-button-split-secondary-background-action-default: #f6f7fa;
+  --click-button-split-secondary-background-action-hover: lch(94.788 1.5286 271.98);
+  --click-button-split-secondary-background-action-active: lch(92.892 1.498 271.98);
+  --click-button-split-secondary-background-action-disabled: lch(84.382 0 none);
+  --click-button-split-secondary-text-default: #161517;
+  --click-button-split-secondary-text-hover: #161517;
+  --click-button-split-secondary-text-active: #161517;
+  --click-button-split-secondary-text-disabled: #a0a0a0;
+  --click-button-split-secondary-stroke-default: #e6e7e9;
+  --click-button-split-secondary-stroke-hover: #e6e7e9;
+  --click-button-split-secondary-stroke-active: #cccfd3;
+  --click-button-split-secondary-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-mobile-button-space-x: 0.75rem;
+  --click-button-mobile-button-space-y: 0.5rem;
+  --click-button-mobile-button-space-gap: 0.5rem;
+  --click-button-mobile-basic-size-icon-all: 1.25rem;
+  --click-button-group-radii-button-default-all: 2px;
+  --click-button-group-radii-button-borderless-all: 0.25rem;
+  --click-button-group-radii-panel-all: 0.25rem;
+  --click-button-group-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-typography-mobile-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-group-space-panel-default-x: 3px;
+  --click-button-group-space-panel-default-y: 3px;
+  --click-button-group-space-panel-default-gap: 3px;
+  --click-button-group-space-panel-borderless-x: 0;
+  --click-button-group-space-panel-borderless-y: 0;
+  --click-button-group-space-panel-borderless-gap: 0.25rem;
+  --click-button-group-space-button-default-y: 1.5px;
+  --click-button-group-space-button-default-x: 0.75rem;
+  --click-button-group-space-button-borderless-y: 5.5px;
+  --click-button-group-space-button-borderless-x: 1rem;
+  --click-button-group-color-background-default: rgba(0, 0, 0, 0);
+  --click-button-group-color-background-hover: #f6f7fa;
+  --click-button-group-color-background-active: lch(95.274 1.5364 271.98);
+  --click-button-group-color-background-disabled: rgba(0, 0, 0, 0);
+  --click-button-group-color-background-disabled-active: lch(76.219 1.2291 271.98);
+  --click-button-group-color-background-panel: rgba(0, 0, 0, 0);
+  --click-button-group-color-text-default: #505050;
+  --click-button-group-color-text-hover: #505050;
+  --click-button-group-color-text-active: #161517;
+  --click-button-group-color-text-disabled: #a0a0a0;
+  --click-button-group-color-text-disabled-active: #a0a0a0;
+  --click-button-group-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-hover: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-active: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-disabled: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-disabled-active: rgba(0, 0, 0, 0);
+  --click-button-group-color-stroke-panel: #e6e7e9;
+  --click-button-group-color-panel-stroke-default: #e6e7e9;
+  --click-button-group-color-panel-stroke-borderless: rgba(0, 0, 0, 0);
+  --click-button-alignLeft-size-icon-all: 0.9688rem;
+  --click-button-alignLeft-space-x: 1rem;
+  --click-button-alignLeft-space-y: 0.3438rem;
+  --click-button-alignLeft-space-gap: 0.5rem;
+  --click-button-alignLeft-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-hover: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignLeft-typography-mobile-label-active: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-button-alignedLeft-color-background-default: rgba(0, 0, 0, 0);
+  --click-button-alignedLeft-color-background-hover: #f6f7fa;
+  --click-button-alignedLeft-color-background-active: lch(95.274 1.5364 271.98);
+  --click-button-alignedLeft-color-stroke-default: #e6e7e9;
+  --click-button-alignedLeft-color-stroke-hover: #e6e7e9;
+  --click-button-alignedLeft-color-stroke-active: #cccfd3;
+  --click-button-alignedLeft-color-text-default: #161517;
+  --click-button-alignedLeft-color-text-hover: #161517;
+  --click-button-alignedLeft-color-text-active: #161517;
+  --click-card-secondary-space-all: 1rem;
+  --click-card-secondary-space-gap: 1rem;
+  --click-card-secondary-space-link-gap: 0.5rem;
+  --click-card-secondary-radii-all: 0.25rem;
+  --click-card-secondary-icon-size-all: 2rem;
+  --click-card-secondary-stroke: 1px;
+  --click-card-secondary-color-background-default: #ffffff;
+  --click-card-secondary-color-background-hover: #f6f7fa;
+  --click-card-secondary-color-background-active: lch(92.358 1.4894 271.98);
+  --click-card-secondary-color-background-disabled: #dfdfdf;
+  --click-card-secondary-color-title-default: lch(11.126 1.374 305.43);
+  --click-card-secondary-color-title-hover: lch(11.126 1.374 305.43);
+  --click-card-secondary-color-title-active: lch(11.126 1.374 305.43);
+  --click-card-secondary-color-title-disabled: #a0a0a0;
+  --click-card-secondary-color-description-default: #696e79;
+  --click-card-secondary-color-description-hover: #696e79;
+  --click-card-secondary-color-description-active: #696e79;
+  --click-card-secondary-color-description-disabled: #a0a0a0;
+  --click-card-secondary-color-link-default: #161517;
+  --click-card-secondary-color-link-hover: #437eef;
+  --click-card-secondary-color-link-active: #161517;
+  --click-card-secondary-color-link-disabled: #a0a0a0;
+  --click-card-secondary-color-stroke-default: #e6e7e9;
+  --click-card-secondary-color-stroke-hover: #e6e7e9;
+  --click-card-secondary-color-stroke-active: lch(87.029 1.0472 265.86);
+  --click-card-secondary-color-stroke-disabled: #dfdfdf;
+  --click-card-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-hover: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-active: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-title-disabled: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-description-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-hover: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-active: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-typography-link-disabled: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-primary-size-icon-sm-all: 2rem;
+  --click-card-primary-size-icon-md-all: 4rem;
+  --click-card-primary-space-md-y: 1.5rem;
+  --click-card-primary-space-md-x: 1.5rem;
+  --click-card-primary-space-md-gap: 0.75rem;
+  --click-card-primary-space-sm-y: 1.5rem;
+  --click-card-primary-space-sm-x: 1.5rem;
+  --click-card-primary-space-sm-gap: 0.25rem;
+  --click-card-primary-radii-all: 0.25rem;
+  --click-card-primary-stroke: 1px;
+  --click-card-primary-color-background-default: #ffffff;
+  --click-card-primary-color-background-hover: #f6f7fa;
+  --click-card-primary-color-background-active: #ffffff;
+  --click-card-primary-color-background-disabled: #dfdfdf;
+  --click-card-primary-color-title-default: lch(11.126 1.374 305.43);
+  --click-card-primary-color-title-hover: lch(11.126 1.374 305.43);
+  --click-card-primary-color-title-active: lch(11.126 1.374 305.43);
+  --click-card-primary-color-title-disabled: #a0a0a0;
+  --click-card-primary-color-description-default: #696e79;
+  --click-card-primary-color-description-hover: #696e79;
+  --click-card-primary-color-description-active: #696e79;
+  --click-card-primary-color-description-disabled: #a0a0a0;
+  --click-card-primary-color-stroke-default: #e6e7e9;
+  --click-card-primary-color-stroke-hover: #e6e7e9;
+  --click-card-primary-color-stroke-active: #151515;
+  --click-card-primary-color-stroke-disabled: #dfdfdf;
+  --click-card-shadow: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-card-horizontal-radii-all: 0.25rem;
+  --click-card-horizontal-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-hover: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-title-disabled: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-typography-description-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-horizontal-icon-size-all: 1.5rem;
+  --click-card-horizontal-space-md-y: 0.75rem;
+  --click-card-horizontal-space-md-x: 1rem;
+  --click-card-horizontal-space-md-gap: 1rem;
+  --click-card-horizontal-space-sm-y: 0.5rem;
+  --click-card-horizontal-space-sm-x: 0.75rem;
+  --click-card-horizontal-space-sm-gap: 0.75rem;
+  --click-card-horizontal-default-color-background-default: #ffffff;
+  --click-card-horizontal-default-color-background-hover: #f6f7fa;
+  --click-card-horizontal-default-color-background-active: #ffffff;
+  --click-card-horizontal-default-color-background-disabled: #dfdfdf;
+  --click-card-horizontal-default-color-title-default: lch(11.126 1.374 305.43);
+  --click-card-horizontal-default-color-title-hover: lch(11.126 1.374 305.43);
+  --click-card-horizontal-default-color-title-active: lch(11.126 1.374 305.43);
+  --click-card-horizontal-default-color-title-disabled: #a0a0a0;
+  --click-card-horizontal-default-color-description-default: #696e79;
+  --click-card-horizontal-default-color-description-hover: #696e79;
+  --click-card-horizontal-default-color-description-active: #696e79;
+  --click-card-horizontal-default-color-description-disabled: #a0a0a0;
+  --click-card-horizontal-default-color-stroke-default: #e6e7e9;
+  --click-card-horizontal-default-color-stroke-hover: #e6e7e9;
+  --click-card-horizontal-default-color-stroke-active: #151515;
+  --click-card-horizontal-default-color-stroke-disabled: #dfdfdf;
+  --click-card-horizontal-muted-color-background-default: #f6f7fa;
+  --click-card-horizontal-muted-color-background-hover: #ffffff;
+  --click-card-horizontal-muted-color-background-active: #f6f7fa;
+  --click-card-horizontal-muted-color-background-disabled: #dfdfdf;
+  --click-card-horizontal-muted-color-title-default: lch(11.126 1.374 305.43);
+  --click-card-horizontal-muted-color-title-hover: lch(11.126 1.374 305.43);
+  --click-card-horizontal-muted-color-title-active: lch(11.126 1.374 305.43);
+  --click-card-horizontal-muted-color-title-disabled: #a0a0a0;
+  --click-card-horizontal-muted-color-description-default: #696e79;
+  --click-card-horizontal-muted-color-description-hover: #696e79;
+  --click-card-horizontal-muted-color-description-active: #696e79;
+  --click-card-horizontal-muted-color-description-disabled: #a0a0a0;
+  --click-card-horizontal-muted-color-stroke-default: #e6e7e9;
+  --click-card-horizontal-muted-color-stroke-hover: #e6e7e9;
+  --click-card-horizontal-muted-color-stroke-active: #151515;
+  --click-card-horizontal-muted-color-stroke-disabled: #dfdfdf;
+  --click-card-promotion-radii-all: 0.25rem;
+  --click-card-promotion-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-card-promotion-space-y: 5.5px;
+  --click-card-promotion-space-x: 0.75rem;
+  --click-card-promotion-space-gap: 0.75rem;
+  --click-card-promotion-icon-size-all: 1rem;
+  --click-card-promotion-color-background-default: #f6f7fa;
+  --click-card-promotion-color-background-hover: #e6e7e9;
+  --click-card-promotion-color-background-active: lch(89.777 1.0803 265.86);
+  --click-card-promotion-color-icon-default: #161517;
+  --click-card-promotion-color-icon-hover: #161517;
+  --click-card-promotion-color-icon-active: #161517;
+  --click-card-promotion-color-stroke-default: linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%);
+  --click-card-promotion-color-stroke-hover: linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%);
+  --click-card-promotion-color-stroke-active: linear-gradient(174deg, #ABABAB 7.59%, #D4D4D4 30.01%);
+  --click-card-promotion-color-stroke-focus: #151515;
+  --click-card-promotion-color-text-default: #161517;
+  --click-card-promotion-color-text-hover: #161517;
+  --click-card-promotion-color-text-active: #161517;
+  --click-checkbox-radii-all: 0.125rem;
+  --click-checkbox-space-all: 1px;
+  --click-checkbox-space-gap: 0.5rem;
+  --click-checkbox-size-all: 1rem;
+  --click-checkbox-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-checkbox-color-variations-default-background-default: #f6f7fa;
+  --click-checkbox-color-variations-default-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-default-background-active: #161517;
+  --click-checkbox-color-variations-default-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-default-stroke-default: #b3b6bd;
+  --click-checkbox-color-variations-default-stroke-hover: #b3b6bd;
+  --click-checkbox-color-variations-default-stroke-active: #161517;
+  --click-checkbox-color-variations-default-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-default-check-default: #ffffff;
+  --click-checkbox-color-variations-default-check-hover: #ffffff;
+  --click-checkbox-color-variations-default-check-active: #ffffff;
+  --click-checkbox-color-variations-default-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var1-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var1-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var1-background-active: #00e513;
+  --click-checkbox-color-variations-var1-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var1-stroke-default: #62de85;
+  --click-checkbox-color-variations-var1-stroke-hover: #62de85;
+  --click-checkbox-color-variations-var1-stroke-active: #62de85;
+  --click-checkbox-color-variations-var1-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var1-check-default: #ffffff;
+  --click-checkbox-color-variations-var1-check-hover: #ffffff;
+  --click-checkbox-color-variations-var1-check-active: #ffffff;
+  --click-checkbox-color-variations-var1-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var2-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var2-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var2-background-active: #437eef;
+  --click-checkbox-color-variations-var2-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var2-stroke-default: #6d9bf3;
+  --click-checkbox-color-variations-var2-stroke-hover: #6d9bf3;
+  --click-checkbox-color-variations-var2-stroke-active: #6d9bf3;
+  --click-checkbox-color-variations-var2-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var2-check-default: #ffffff;
+  --click-checkbox-color-variations-var2-check-hover: #ffffff;
+  --click-checkbox-color-variations-var2-check-active: #ffffff;
+  --click-checkbox-color-variations-var2-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var3-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var3-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var3-background-active: #fb32c9;
+  --click-checkbox-color-variations-var3-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var3-stroke-default: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-hover: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-active: #fb64d6;
+  --click-checkbox-color-variations-var3-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var3-check-default: #ffffff;
+  --click-checkbox-color-variations-var3-check-hover: #ffffff;
+  --click-checkbox-color-variations-var3-check-active: #ffffff;
+  --click-checkbox-color-variations-var3-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var4-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var4-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var4-background-active: #ff7729;
+  --click-checkbox-color-variations-var4-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var4-stroke-default: #ff9457;
+  --click-checkbox-color-variations-var4-stroke-hover: #ff9457;
+  --click-checkbox-color-variations-var4-stroke-active: #ff9457;
+  --click-checkbox-color-variations-var4-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var4-check-default: #ffffff;
+  --click-checkbox-color-variations-var4-check-hover: #ffffff;
+  --click-checkbox-color-variations-var4-check-active: #ffffff;
+  --click-checkbox-color-variations-var4-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var5-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var5-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var5-background-active: #089b83;
+  --click-checkbox-color-variations-var5-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var5-stroke-default: #089b83;
+  --click-checkbox-color-variations-var5-stroke-hover: #089b83;
+  --click-checkbox-color-variations-var5-stroke-active: #089b83;
+  --click-checkbox-color-variations-var5-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var5-check-default: #ffffff;
+  --click-checkbox-color-variations-var5-check-hover: #ffffff;
+  --click-checkbox-color-variations-var5-check-active: #ffffff;
+  --click-checkbox-color-variations-var5-check-disabled: #a0a0a0;
+  --click-checkbox-color-variations-var6-background-default: #f6f7fa;
+  --click-checkbox-color-variations-var6-background-hover: #f6f7fa;
+  --click-checkbox-color-variations-var6-background-active: #bb33ff;
+  --click-checkbox-color-variations-var6-background-disabled: #dfdfdf;
+  --click-checkbox-color-variations-var6-stroke-default: #cc66ff;
+  --click-checkbox-color-variations-var6-stroke-hover: #bb33ff;
+  --click-checkbox-color-variations-var6-stroke-active: #bb33ff;
+  --click-checkbox-color-variations-var6-stroke-disabled: #c0c0c0;
+  --click-checkbox-color-variations-var6-check-default: #ffffff;
+  --click-checkbox-color-variations-var6-check-hover: #ffffff;
+  --click-checkbox-color-variations-var6-check-active: #ffffff;
+  --click-checkbox-color-variations-var6-check-disabled: #a0a0a0;
+  --click-checkbox-color-check-default: #ffffff;
+  --click-checkbox-color-check-hover: #ffffff;
+  --click-checkbox-color-check-active: #ffffff;
+  --click-checkbox-color-check-disabled: #a0a0a0;
+  --click-checkbox-color-background-default: #f6f7fa;
+  --click-checkbox-color-background-hover: #f6f7fa;
+  --click-checkbox-color-background-active: #161517;
+  --click-checkbox-color-background-disabled: #dfdfdf;
+  --click-checkbox-color-stroke-default: #b3b6bd;
+  --click-checkbox-color-stroke-hover: #b3b6bd;
+  --click-checkbox-color-stroke-active: #161517;
+  --click-checkbox-color-stroke-disabled: #c0c0c0;
+  --click-codeblock-space-x: 1rem;
+  --click-codeblock-space-y: 1rem;
+  --click-codeblock-space-gap: 1.5rem;
+  --click-codeblock-radii-all: 0.25rem;
+  --click-codeblock-stroke: 1px;
+  --click-codeblock-typography-text-default: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-codeblock-numbers-size-width: 1.5rem;
+  --click-codeblock-darkMode-color-background-default: #282828;
+  --click-codeblock-darkMode-color-text-default: #ffffff;
+  --click-codeblock-darkMode-color-numbers-default: #c0c0c0;
+  --click-codeblock-darkMode-color-button-background-default: #282828;
+  --click-codeblock-darkMode-color-button-background-hover: #53575f;
+  --click-codeblock-darkMode-color-button-foreground-default: #ffffff;
+  --click-codeblock-darkMode-color-stroke-default: #282828;
+  --click-codeblock-lightMode-color-background-default: #f6f7fa;
+  --click-codeblock-lightMode-color-text-default: #282828;
+  --click-codeblock-lightMode-color-numbers-default: #808080;
+  --click-codeblock-lightMode-color-button-background-default: #f6f7fa;
+  --click-codeblock-lightMode-color-button-background-hover: #53575f;
+  --click-codeblock-lightMode-color-button-foreground-default: #a0a0a0;
+  --click-codeblock-lightMode-color-stroke-default: #282828;
+  --click-codeblock-monacoTheme-parameter-foreground: #53575f;
+  --click-codeblock-monacoTheme-parameter-background: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-codeInline-space-x: 0.25rem;
+  --click-codeInline-stroke: 1px;
+  --click-codeInline-typography-text-default: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-codeInline-radii-all: 0.25rem;
+  --click-codeInline-color-background-default: #f6f7fa;
+  --click-codeInline-color-text-default: #161517;
+  --click-codeInline-color-stroke-default: #e6e7e9;
+  --click-container-space-none: 0;
+  --click-container-space-xxs: 0.25rem;
+  --click-container-space-xs: 0.5rem;
+  --click-container-space-sm: 0.75rem;
+  --click-container-space-md: 1rem;
+  --click-container-space-lg: 1.5rem;
+  --click-container-space-xl: 2rem;
+  --click-container-space-xxl: 4rem;
+  --click-container-gap-none: 0;
+  --click-container-gap-xxs: 0.25rem;
+  --click-container-gap-xs: 0.5rem;
+  --click-container-gap-sm: 0.75rem;
+  --click-container-gap-md: 1rem;
+  --click-container-gap-lg: 1.5rem;
+  --click-container-gap-xl: 2rem;
+  --click-container-gap-xxl: 4rem;
+  --click-datePicker-dateOption-space-gap: 2px;
+  --click-datePicker-dateOption-radii-default: 0.25rem;
+  --click-datePicker-dateOption-radii-range: 0;
+  --click-datePicker-dateOption-stroke: 1px;
+  --click-datePicker-dateOption-size-height: 2rem;
+  --click-datePicker-dateOption-size-width: 2rem;
+  --click-datePicker-dateOption-typography-label-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-active: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-typography-label-range: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-dateOption-color-label-default: #161517;
+  --click-datePicker-dateOption-color-label-hover: #161517;
+  --click-datePicker-dateOption-color-label-active: #ffffff;
+  --click-datePicker-dateOption-color-label-disabled: #a0a0a0;
+  --click-datePicker-dateOption-color-label-range: #161517;
+  --click-datePicker-dateOption-color-background-default: #ffffff;
+  --click-datePicker-dateOption-color-background-hover: #ffffff;
+  --click-datePicker-dateOption-color-background-active: #151515;
+  --click-datePicker-dateOption-color-background-disabled: #ffffff;
+  --click-datePicker-dateOption-color-background-range: #e6e7e9;
+  --click-datePicker-dateOption-color-stroke-default: #ffffff;
+  --click-datePicker-dateOption-color-stroke-hover: #151515;
+  --click-datePicker-dateOption-color-stroke-active: #151515;
+  --click-datePicker-dateOption-color-stroke-disabled: #ffffff;
+  --click-datePicker-dateOption-color-stroke-range: #e6e7e9;
+  --click-datePicker-space-gap: 0.25rem;
+  --click-datePicker-typography-daytitle-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-datePicker-color-title-default: lch(11.126 1.374 305.43);
+  --click-datePicker-color-daytitle-default: #696e79;
+  --click-dialog-space-y: 1.5rem;
+  --click-dialog-space-x: 2rem;
+  --click-dialog-space-gap: 1rem;
+  --click-dialog-title-space-gap: 0.25rem;
+  --click-dialog-radii-all: 0.5rem;
+  --click-dialog-shadow-default: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-dialog-stroke-default: 1px solid #e6e7e9;
+  --click-dialog-typography-title-default: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dialog-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dialog-color-background-default: #ffffff;
+  --click-dialog-color-title-default: lch(11.126 1.374 305.43);
+  --click-dialog-color-description-default: #696e79;
+  --click-dialog-color-opaqueBackground-default: lch(6.7738 0 none / 0.75);
+  --click-docs-typography-titles-lg: 600 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-titles-md: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-titles-sm: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-breadcrumbs-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-breadcrumbs-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-docs-typography-toc-item-active: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-disabled: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-label-error: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-fieldText-error: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-placeholder-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-active: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-format-error: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-typography-genericLabel-error: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-type-mobile-label: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-type-mobile-field-value: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-field-space-x: 0.75rem;
+  --click-field-space-y: 0.2813rem;
+  --click-field-space-gap: 0.5rem;
+  --click-field-size-icon: 1rem;
+  --click-field-radii-all: 0.25rem;
+  --click-field-mobile-space-x: 0.75rem;
+  --click-field-mobile-space-y: 0.5rem;
+  --click-field-mobile-space-gap: 0.5rem;
+  --click-field-color-genericLabel-default: #161517;
+  --click-field-color-genericLabel-hover: #161517;
+  --click-field-color-genericLabel-active: #161517;
+  --click-field-color-genericLabel-disabled: #a0a0a0;
+  --click-field-color-background-default: #fbfcff;
+  --click-field-color-background-hover: #f6f7fa;
+  --click-field-color-background-active: #ffffff;
+  --click-field-color-background-disabled: #dfdfdf;
+  --click-field-color-background-error: #ffffff;
+  --click-field-color-text-default: #302e32;
+  --click-field-color-text-hover: #302e32;
+  --click-field-color-text-active: #161517;
+  --click-field-color-text-disabled: #a0a0a0;
+  --click-field-color-text-error: #c10000;
+  --click-field-color-stroke-default: #e6e7e9;
+  --click-field-color-stroke-hover: #cccfd3;
+  --click-field-color-stroke-active: #161517;
+  --click-field-color-stroke-disabled: #dfdfdf;
+  --click-field-color-stroke-error: #c10000;
+  --click-field-color-label-default: #696e79;
+  --click-field-color-label-hover: #696e79;
+  --click-field-color-label-active: #161517;
+  --click-field-color-label-disabled: #a0a0a0;
+  --click-field-color-label-error: #c10000;
+  --click-field-color-placeholder-default: #9a9ea7;
+  --click-field-color-placeholder-disabled: #b3b6bd;
+  --click-field-color-format-default: lch(71.998 4.1843 268.48);
+  --click-field-color-format-hover: lch(71.998 4.1843 268.48);
+  --click-field-color-format-active: lch(71.998 4.1843 268.48);
+  --click-field-color-format-disabled: #a0a0a0;
+  --click-field-color-format-error: lch(71.998 4.1843 268.48);
+  --click-fileUpload-sm-icon-size-height: 1.5rem;
+  --click-fileUpload-sm-icon-size-width: 1.5rem;
+  --click-fileUpload-sm-space-gap: 0.75rem;
+  --click-fileUpload-sm-space-x: 1rem;
+  --click-fileUpload-sm-space-y: 0.5rem;
+  --click-fileUpload-sm-radii-all: 0.25rem;
+  --click-fileUpload-sm-color-icon-default: #696e79;
+  --click-fileUpload-md-icon-size-height: 2rem;
+  --click-fileUpload-md-icon-size-width: 2rem;
+  --click-fileUpload-md-space-gap: 0.5rem;
+  --click-fileUpload-md-space-x: 1rem;
+  --click-fileUpload-md-space-y: 0.75rem;
+  --click-fileUpload-md-radii-all: 0.5rem;
+  --click-fileUpload-md-color-icon-default: #161517;
+  --click-fileUpload-typography-title-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-fileUpload-typography-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-fileUpload-hasFile-space-gap: 0.75rem;
+  --click-fileUpload-hasFile-header-space-gap: 0.5rem;
+  --click-fileUpload-transitions-all: all 100ms ease-in 0ms;
+  --click-fileUpload-color-background-default: #ffffff;
+  --click-fileUpload-color-background-hover: #ffffff;
+  --click-fileUpload-color-background-active: #f6f7fa;
+  --click-fileUpload-color-background-error: rgb(100% 13.725% 13.725% / 0.1);
+  --click-fileUpload-color-stroke-default: #e6e7e9;
+  --click-fileUpload-color-stroke-hover: #e6e7e9;
+  --click-fileUpload-color-stroke-active: #b3b6bd;
+  --click-fileUpload-color-stroke-error: rgba(0, 0, 0, 0);
+  --click-fileUpload-color-title-default: #161517;
+  --click-fileUpload-color-title-hover: #161517;
+  --click-fileUpload-color-title-active: #161517;
+  --click-fileUpload-color-title-error: #c10000;
+  --click-fileUpload-color-description-default: #696e79;
+  --click-fileUpload-color-description-hover: #696e79;
+  --click-fileUpload-color-description-active: #696e79;
+  --click-fileUpload-color-description-error: #c10000;
+  --click-flyout-space-default-x: 0;
+  --click-flyout-space-default-y: 1.5rem;
+  --click-flyout-space-default-gap: 1rem;
+  --click-flyout-space-default-top: 0;
+  --click-flyout-space-default-content-x: 1.5rem;
+  --click-flyout-space-default-content-y: 1.5rem;
+  --click-flyout-space-default-content-row-gap: 0.25rem;
+  --click-flyout-space-default-content-column-gap: 1rem;
+  --click-flyout-space-inline-x: 0;
+  --click-flyout-space-inline-y: 0.75rem;
+  --click-flyout-space-inline-gap: 0.75rem;
+  --click-flyout-space-inline-top: 3.5rem;
+  --click-flyout-space-inline-content-x: 0.75rem;
+  --click-flyout-space-inline-content-y: 0.75rem;
+  --click-flyout-space-inline-content-row-gap: 0.25rem;
+  --click-flyout-space-inline-content-column-gap: 0.75rem;
+  --click-flyout-shadow-default: -5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --click-flyout-shadow-reverse: 5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --click-flyout-size-default-width: 27.5rem;
+  --click-flyout-size-default-height: 100%;
+  --click-flyout-size-wide-width: 37.5rem;
+  --click-flyout-size-wide-height: 100vh;
+  --click-flyout-size-narrow-width: 21rem;
+  --click-flyout-size-narrow-height: 100%;
+  --click-flyout-size-widest-width: 55rem;
+  --click-flyout-size-widest-height: 100vh;
+  --click-flyout-typography-default-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-default-title-default: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-inline-description-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-typography-inline-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-flyout-color-background-default: #ffffff;
+  --click-flyout-color-title-default: lch(11.126 1.374 305.43);
+  --click-flyout-color-description-default: #696e79;
+  --click-flyout-color-stroke-default: #e6e7e9;
+  --click-genericMenu-item-space-x: 1rem;
+  --click-genericMenu-item-space-y: 0.3438rem;
+  --click-genericMenu-item-space-gap: 0.5rem;
+  --click-genericMenu-item-icon-size-height: 0.9688rem;
+  --click-genericMenu-item-icon-size-width: 0.9688rem;
+  --click-genericMenu-item-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-sectionHeader-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-hover: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-active: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-typography-subtext-disabled: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-item-two-lines-space-x: 1rem;
+  --click-genericMenu-item-two-lines-space-y: 0.3438rem;
+  --click-genericMenu-item-two-lines-space-gap: 0.75rem;
+  --click-genericMenu-item-size-minWidth: 180px;
+  --click-genericMenu-item-color-default-text-default: #161517;
+  --click-genericMenu-item-color-default-text-hover: #161517;
+  --click-genericMenu-item-color-default-text-active: #161517;
+  --click-genericMenu-item-color-default-text-disabled: #a0a0a0;
+  --click-genericMenu-item-color-default-text-muted: #696e79;
+  --click-genericMenu-item-color-default-background-default: #ffffff;
+  --click-genericMenu-item-color-default-background-hover: #f6f7fa;
+  --click-genericMenu-item-color-default-background-active: #ffffff;
+  --click-genericMenu-item-color-default-background-disabled: #ffffff;
+  --click-genericMenu-item-color-default-stroke-default: #e6e7e9;
+  --click-genericMenu-item-color-format-default: lch(71.998 4.1843 268.48);
+  --click-genericMenu-item-color-format-hover: lch(71.998 4.1843 268.48);
+  --click-genericMenu-item-color-format-active: lch(71.998 4.1843 268.48);
+  --click-genericMenu-item-color-format-disabled: #a0a0a0;
+  --click-genericMenu-item-color-subtext-default: #696e79;
+  --click-genericMenu-item-color-subtext-hover: #696e79;
+  --click-genericMenu-item-color-subtext-active: #696e79;
+  --click-genericMenu-item-color-subtext-disabled: #c0c0c0;
+  --click-genericMenu-item-color-danger-text-default: #c10000;
+  --click-genericMenu-item-color-danger-text-hover: #c10000;
+  --click-genericMenu-item-color-danger-text-active: #c10000;
+  --click-genericMenu-item-color-danger-text-disabled: #a0a0a0;
+  --click-genericMenu-item-color-danger-background-default: #ffffff;
+  --click-genericMenu-item-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.2);
+  --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.3);
+  --click-genericMenu-item-color-danger-background-disabled: #ffffff;
+  --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-space-gap: 0.25rem;
+  --click-genericMenu-button-space-y: 0.5rem;
+  --click-genericMenu-button-typography-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-typography-label-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-typography-label-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-button-color-background-default: #f6f7fa;
+  --click-genericMenu-button-color-label-default: #696e79;
+  --click-genericMenu-button-color-stroke-default: #e6e7e9;
+  --click-genericMenu-panel-radii-all: 0.25rem;
+  --click-genericMenu-panel-shadow-default: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-genericMenu-panel-size-height: 2rem;
+  --click-genericMenu-panel-color-background-default: #ffffff;
+  --click-genericMenu-panel-color-stroke-default: #e6e7e9;
+  --click-genericMenu-autocomplete-typography-results-label-default: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-typography-search-placeholder-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-typography-search-term-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-genericMenu-autocomplete-search-stroke-default: 2px solid #e6e7e9;
+  --click-genericMenu-autocomplete-color-placeholder-default: #9a9ea7;
+  --click-genericMenu-autocomplete-color-searchTerm-default: #161517;
+  --click-genericMenu-autocomplete-color-background-default: #ffffff;
+  --click-genericMenu-autocomplete-color-stroke-default: #e6e7e9;
+  --click-genericMenu-sectionHeader-space-bottom: 0.3438rem;
+  --click-genericMenu-sectionHeader-space-top: 0.5rem;
+  --click-genericMenu-placeholder-space-gap: 0.5rem;
+  --click-grid-header-cell-space-y: 0.4375rem;
+  --click-grid-header-cell-space-x: 0.5rem;
+  --click-grid-header-cell-size-height: 2rem;
+  --click-grid-header-cell-color-background-default: #f6f7fa;
+  --click-grid-header-cell-color-background-selectIndirect: lch(95.61 5.8361 264.18);
+  --click-grid-header-cell-color-background-selectDirect: #e7effd;
+  --click-grid-header-cell-color-title-default: #696e79;
+  --click-grid-header-cell-color-title-selectIndirect: #161517;
+  --click-grid-header-cell-color-title-selectDirect: #161517;
+  --click-grid-header-cell-color-stroke-default: lch(89.319 1.0747 265.86);
+  --click-grid-header-cell-color-stroke-selectIndirect: #e7effd;
+  --click-grid-header-cell-color-stroke-selectDirect: lch(86.135 15.126 266.4);
+  --click-grid-header-title-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-grid-body-cell-space-y: 5.5px;
+  --click-grid-body-cell-space-x: 0.5rem;
+  --click-grid-body-cell-size-height: 2rem;
+  --click-grid-body-cell-color-background-default: #ffffff;
+  --click-grid-body-cell-color-background-selectIndirect: lch(94.146 7.7815 264.18 / 0.2);
+  --click-grid-body-cell-color-background-selectDirect: lch(94.146 7.7815 264.18 / 0.2);
+  --click-grid-body-cell-color-stroke-default: #e6e7e9;
+  --click-grid-body-cell-color-stroke-selectIndirect: #d0dffb;
+  --click-grid-body-cell-color-stroke-selectDirect: #437eef;
+  --click-grid-body-cell-color-text-default: lch(7.1704 1.4351 305.43);
+  --click-grid-body-cell-color-text-selectIndirect: #161517;
+  --click-grid-body-cell-color-text-selectDirect: #161517;
+  --click-grid-cell-text-default: 500 0.875rem/1.5 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --click-grid-radii-none: 0;
+  --click-grid-radii-sm: 0.25rem;
+  --click-grid-radii-md: 0.5rem;
+  --click-grid-radii-lg: 0.75rem;
+  --click-grid-global-color-stroke-default: #e6e7e9;
+  --click-grid-global-color-background-default: #ffffff;
+  --click-gridContainer-gap-none: 0;
+  --click-gridContainer-gap-xxs: 0.25rem;
+  --click-gridContainer-gap-xs: 0.5rem;
+  --click-gridContainer-gap-sm: 0.75rem;
+  --click-gridContainer-gap-md: 1rem;
+  --click-gridContainer-gap-lg: 1.5rem;
+  --click-gridContainer-gap-xl: 2rem;
+  --click-gridContainer-gap-xxl: 4rem;
+  --click-gridContainer-gap-unset: '';
+  --click-icon-space-xs-all: 0.25rem;
+  --click-icon-space-sm-all: 0.25rem;
+  --click-icon-space-md-all: 0.365rem;
+  --click-icon-space-lg-all: 0.5rem;
+  --click-icon-space-xl-all: 0.75rem;
+  --click-icon-space-xxl-all: 1rem;
+  --click-icon-color-background-default: rgba(0, 0, 0, 0);
+  --click-icon-color-background-success: rgb(20% 100% 26.667% / 0.1);
+  --click-icon-color-background-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-icon-color-background-danger: rgb(100% 13.725% 13.725% / 0.1);
+  --click-icon-color-background-info: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-icon-color-background-warning: rgb(100% 46.667% 16.078% / 0.1);
+  --click-icon-color-text-default: rgba(0, 0, 0, 0);
+  --click-icon-color-text-success: #008a0b;
+  --click-icon-color-text-neutral: #53575f;
+  --click-icon-color-text-danger: #c10000;
+  --click-icon-color-text-info: #437eef;
+  --click-icon-color-text-warning: #a33c00;
+  --click-icon-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-icon-color-stroke-success: rgb(20% 100% 26.667% / 0.05);
+  --click-icon-color-stroke-neutral: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-icon-color-stroke-danger: rgb(100% 13.725% 13.725% / 0.05);
+  --click-icon-color-stroke-info: rgb(26.275% 49.412% 93.725% / 0.05);
+  --click-icon-color-stroke-warning: rgb(100% 46.667% 16.078% / 0.05);
+  --click-image-sm-size-height: 1rem;
+  --click-image-sm-size-width: 1rem;
+  --click-image-xs-size-height: 0.75rem;
+  --click-image-xs-size-width: 0.75rem;
+  --click-image-md-size-height: 1.25rem;
+  --click-image-md-size-width: 1.25rem;
+  --click-image-lg-size-height: 1.5rem;
+  --click-image-lg-size-width: 1.5rem;
+  --click-image-xl-size-height: 2rem;
+  --click-image-xl-size-width: 2rem;
+  --click-image-xxl-size-height: 4rem;
+  --click-image-xxl-size-width: 4rem;
+  --click-image-borderWidth-default: 1.5px;
+  --click-image-borderWidth-thin: 1px;
+  --click-image-color-stroke: #161517;
+  --click-link-space-md-gap: 0.25rem;
+  --click-link-space-sm-gap: 2px;
+  --click-link-icon-size-sm-height: 0.75rem;
+  --click-link-icon-size-sm-width: 0.75rem;
+  --click-link-icon-size-md-height: 1rem;
+  --click-link-icon-size-md-width: 1rem;
+  --click-panel-strokeWidth-default: 1px;
+  --click-panel-radii-none: 0;
+  --click-panel-radii-sm: 0.25rem;
+  --click-panel-radii-md: 0.5rem;
+  --click-panel-radii-lg: 0.75rem;
+  --click-panel-stroke-default: 1px solid #e6e7e9;
+  --click-panel-shadow-default: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-panel-space-y-none: 0;
+  --click-panel-space-y-xs: 0.5rem;
+  --click-panel-space-y-sm: 0.75rem;
+  --click-panel-space-y-md: 1rem;
+  --click-panel-space-y-lg: 1.5rem;
+  --click-panel-space-y-xl: 2rem;
+  --click-panel-space-x-none: 0;
+  --click-panel-space-x-xs: 0.5rem;
+  --click-panel-space-x-sm: 0.75rem;
+  --click-panel-space-x-md: 1rem;
+  --click-panel-space-x-lg: 1.5rem;
+  --click-panel-space-x-xl: 2rem;
+  --click-panel-space-gap-none: 0;
+  --click-panel-space-gap-xs: 0.5rem;
+  --click-panel-space-gap-sm: 0.75rem;
+  --click-panel-space-gap-md: 1rem;
+  --click-panel-space-gap-lg: 1.5rem;
+  --click-panel-space-gap-xl: 2rem;
+  --click-panel-color-background-default: #ffffff;
+  --click-panel-color-background-muted: #f6f7fa;
+  --click-panel-color-background-transparent: rgba(0, 0, 0, 0);
+  --click-panel-color-stroke-default: #e6e7e9;
+  --click-popover-space-y: 1rem;
+  --click-popover-space-x: 1.5rem;
+  --click-popover-space-gap: 0.75rem;
+  --click-popover-radii-all: 0.25rem;
+  --click-popover-shadow-default: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-popover-icon-size-height: 1.25rem;
+  --click-popover-icon-size-width: 1.25rem;
+  --click-popover-color-panel-background-default: #ffffff;
+  --click-popover-color-panel-stroke-default: #e6e7e9;
+  --click-radio-radii-all: 9999px;
+  --click-radio-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-radio-color-background-default: #f6f7fa;
+  --click-radio-color-background-hover: #f6f7fa;
+  --click-radio-color-background-active: #161517;
+  --click-radio-color-background-disabled: #dfdfdf;
+  --click-radio-color-stroke-default: #b3b6bd;
+  --click-radio-color-stroke-hover: #b3b6bd;
+  --click-radio-color-stroke-active: #151515;
+  --click-radio-color-stroke-disabled: #c0c0c0;
+  --click-radio-color-indicator-default: #ffffff;
+  --click-radio-color-indicator-hover: #f6f7fa;
+  --click-radio-color-indicator-active: #ffffff;
+  --click-radio-color-indicator-disabled: #a0a0a0;
+  --click-separator-horizontal-space-y-xs: 0;
+  --click-separator-horizontal-space-y-sm: 0.25rem;
+  --click-separator-horizontal-space-y-md: 0.5rem;
+  --click-separator-horizontal-space-y-ml: 0.75rem;
+  --click-separator-horizontal-space-y-lg: 1rem;
+  --click-separator-horizontal-space-y-xl: 1.5rem;
+  --click-separator-horizontal-space-y-xxl: 2rem;
+  --click-separator-horizontal-space-x-all: 0;
+  --click-separator-vertical-space-x-xs: 0;
+  --click-separator-vertical-space-x-sm: 0.25rem;
+  --click-separator-vertical-space-x-md: 0.5rem;
+  --click-separator-vertical-space-x-lg: 1rem;
+  --click-separator-vertical-space-x-xl: 1.5rem;
+  --click-separator-vertical-space-x-xxl: 2rem;
+  --click-separator-vertical-space-y-all: 0;
+  --click-separator-color-stroke-default: #e6e7e9;
+  --click-sidebar-navigation-item-radii-all: 0.25rem;
+  --click-sidebar-navigation-item-default-space-right: 0.75rem;
+  --click-sidebar-navigation-item-default-space-y: 0.2813rem;
+  --click-sidebar-navigation-item-default-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-default-space-left: 0;
+  --click-sidebar-navigation-item-typography-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-typography-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-typography-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-item-mobile-space-left: 0;
+  --click-sidebar-navigation-item-mobile-space-right: 0.75rem;
+  --click-sidebar-navigation-item-mobile-space-y: 0.75rem;
+  --click-sidebar-navigation-item-mobile-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-collapsible-space-left: 0;
+  --click-sidebar-navigation-item-collapsible-space-right: 0.75rem;
+  --click-sidebar-navigation-item-collapsible-space-y: 0.2813rem;
+  --click-sidebar-navigation-item-collapsible-space-gap: 0.75rem;
+  --click-sidebar-navigation-item-icon-size-height: 1rem;
+  --click-sidebar-navigation-item-icon-size-width: 1rem;
+  --click-sidebar-navigation-item-global-gap: 2px;
+  --click-sidebar-navigation-title-typography-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-hover: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-active: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-title-typography-disabled: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-default-space-left: 2.75rem;
+  --click-sidebar-navigation-subItem-default-space-right: 0.75rem;
+  --click-sidebar-navigation-subItem-default-space-y: 0.2813rem;
+  --click-sidebar-navigation-subItem-mobile-space-left: 2.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-right: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-y: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-space-gap: 0.75rem;
+  --click-sidebar-navigation-subItem-mobile-typography-default: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-mobile-typography-hover: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-mobile-typography-active: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-radii-all: 0.25rem;
+  --click-sidebar-navigation-subItem-typography-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-subItem-typography-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-sidebar-navigation-dragControl-separator-size-height: 0.125rem;
+  --click-sidebar-main-color-background-default: #ffffff;
+  --click-sidebar-main-color-text-default: #161517;
+  --click-sidebar-main-color-text-muted: #696e79;
+  --click-sidebar-main-color-stroke-default: #e6e7e9;
+  --click-sidebar-main-navigation-item-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-item-color-background-hover: lch(91.609 1.1023 265.86 / 0.6);
+  --click-sidebar-main-navigation-item-color-background-active: #e6e7e9;
+  --click-sidebar-main-navigation-item-color-text-default: #161517;
+  --click-sidebar-main-navigation-item-color-text-hover: #161517;
+  --click-sidebar-main-navigation-item-color-text-active: #161517;
+  --click-sidebar-main-navigation-item-color-text-muted: #696e79;
+  --click-sidebar-main-navigation-item-color-text-disabled: #a0a0a0;
+  --click-sidebar-main-navigation-item-color-icon-default: #696e79;
+  --click-sidebar-main-navigation-item-color-icon-disabled: #a0a0a0;
+  --click-sidebar-main-navigation-title-color-default: #696e79;
+  --click-sidebar-main-navigation-title-color-hover: #696e79;
+  --click-sidebar-main-navigation-title-color-active: #696e79;
+  --click-sidebar-main-navigation-subItem-color-text-default: #696e79;
+  --click-sidebar-main-navigation-subItem-color-text-hover: #161517;
+  --click-sidebar-main-navigation-subItem-color-text-active: #161517;
+  --click-sidebar-main-navigation-subItem-color-text-disabled: #a0a0a0;
+  --click-sidebar-main-navigation-subItem-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-background-hover: lch(91.609 1.1023 265.86 / 0.6);
+  --click-sidebar-main-navigation-subItem-color-background-active: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-background-disabled: rgba(0, 0, 0, 0);
+  --click-sidebar-main-navigation-subItem-color-icon-default: #696e79;
+  --click-sidebar-main-navigation-subItem-color-icon-disabled: #a0a0a0;
+  --click-sidebar-main-navigation-dragControl-separator-color-default: #161517;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-disabled: #a0a0a0;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-default: #161517;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-hover: #161517;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-active: #161517;
+  --click-sidebar-sqlSidebar-navigation-item-color-text-muted: #696e79;
+  --click-sidebar-sqlSidebar-navigation-item-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-item-color-background-hover: lch(91.609 1.1023 265.86 / 0.6);
+  --click-sidebar-sqlSidebar-navigation-item-color-background-active: #e6e7e9;
+  --click-sidebar-sqlSidebar-navigation-item-color-icon-default: #696e79;
+  --click-sidebar-sqlSidebar-navigation-title-color-default: #696e79;
+  --click-sidebar-sqlSidebar-navigation-title-color-hover: #696e79;
+  --click-sidebar-sqlSidebar-navigation-title-color-active: #696e79;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-default: #696e79;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-hover: #161517;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-active: #161517;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-text-disabled: #a0a0a0;
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-default: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-hover: lch(91.609 1.1023 265.86 / 0.6);
+  --click-sidebar-sqlSidebar-navigation-subItem-color-background-active: rgba(0, 0, 0, 0);
+  --click-sidebar-sqlSidebar-navigation-dragControl-separator-color-default: #161517;
+  --click-sidebar-sqlSidebar-color-background-default: #f6f7fa;
+  --click-sidebar-sqlSidebar-color-stroke-default: #e6e7e9;
+  --click-spacer-horizontal-space-y-xs: 0;
+  --click-spacer-horizontal-space-y-sm: 0.25rem;
+  --click-spacer-horizontal-space-y-md: 0.5rem;
+  --click-spacer-horizontal-space-y-ml: 0.75rem;
+  --click-spacer-horizontal-space-y-lg: 1rem;
+  --click-spacer-horizontal-space-y-xl: 1.5rem;
+  --click-spacer-horizontal-space-y-xxl: 2rem;
+  --click-spacer-horizontal-space-x-all: 0;
+  --click-stepper-vertical-numbered-connector-size-width: 0.1875rem;
+  --click-stepper-vertical-numbered-connector-stroke-default: 2px;
+  --click-stepper-vertical-numbered-connector-color-stroke-incomplete: #c0c0c0;
+  --click-stepper-vertical-numbered-connector-color-stroke-complete: #1f1f1c;
+  --click-stepper-vertical-numbered-connector-color-stroke-active: #c0c0c0;
+  --click-stepper-vertical-numbered-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-numbered-step-typography-number-default: 700 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-numbered-step-size-height: 1.5rem;
+  --click-stepper-vertical-numbered-step-size-width: 1.5rem;
+  --click-stepper-vertical-numbered-step-size-icon-height: 0.75rem;
+  --click-stepper-vertical-numbered-step-size-icon-width: 0.75rem;
+  --click-stepper-vertical-numbered-step-stroke-default: 2px;
+  --click-stepper-vertical-numbered-step-radii-default: 9999px;
+  --click-stepper-vertical-numbered-step-color-stroke-incomplete: #c0c0c0;
+  --click-stepper-vertical-numbered-step-color-stroke-complete: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-stroke-active: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-background-incomplete: #ffffff;
+  --click-stepper-vertical-numbered-step-color-background-complete: #ffffff;
+  --click-stepper-vertical-numbered-step-color-background-active: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-icon-incomplete: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-icon-complete: #1f1f1c;
+  --click-stepper-vertical-numbered-step-color-icon-active: #ffffff;
+  --click-stepper-vertical-numbered-content-space-gap-x: 1rem;
+  --click-stepper-vertical-numbered-content-space-gap-y: 0.5rem;
+  --click-stepper-vertical-numbered-content-space-left: 2.75rem;
+  --click-stepper-vertical-numbered-content-space-bottom-default: 2.5rem;
+  --click-stepper-vertical-numbered-content-space-bottom-active: 1.5rem;
+  --click-stepper-vertical-numbered-color-title-incomplete: #c0c0c0;
+  --click-stepper-vertical-numbered-color-title-complete: #696e79;
+  --click-stepper-vertical-numbered-color-title-active: #161517;
+  --click-stepper-vertical-bulleted-connector-size-width: 0.1875rem;
+  --click-stepper-vertical-bulleted-connector-stroke-default: 2px;
+  --click-stepper-vertical-bulleted-connector-color-stroke-incomplete: #c0c0c0;
+  --click-stepper-vertical-bulleted-connector-color-stroke-complete: #1f1f1c;
+  --click-stepper-vertical-bulleted-connector-color-stroke-active: #c0c0c0;
+  --click-stepper-vertical-bulleted-step-size-height: 1rem;
+  --click-stepper-vertical-bulleted-step-size-width: 1rem;
+  --click-stepper-vertical-bulleted-step-size-icon-height: 0.75rem;
+  --click-stepper-vertical-bulleted-step-size-icon-width: 0.75rem;
+  --click-stepper-vertical-bulleted-step-radii-default: 9999px;
+  --click-stepper-vertical-bulleted-step-stroke-default: 2px;
+  --click-stepper-vertical-bulleted-step-color-stroke-incomplete: #c0c0c0;
+  --click-stepper-vertical-bulleted-step-color-stroke-complete: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-stroke-active: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-background-incomplete: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-background-complete: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-background-active: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-icon-incomplete: #ffffff;
+  --click-stepper-vertical-bulleted-step-color-icon-complete: #1f1f1c;
+  --click-stepper-vertical-bulleted-step-color-icon-active: #ffffff;
+  --click-stepper-vertical-bulleted-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-stepper-vertical-bulleted-content-space-gap-x: 1rem;
+  --click-stepper-vertical-bulleted-content-space-gap-y: 0.5rem;
+  --click-stepper-vertical-bulleted-content-space-left: 2.25rem;
+  --click-stepper-vertical-bulleted-content-space-bottom-default: 2.5rem;
+  --click-stepper-vertical-bulleted-content-space-bottom-active: 1.5rem;
+  --click-stepper-vertical-bulleted-color-title-incomplete: #c0c0c0;
+  --click-stepper-vertical-bulleted-color-title-complete: #696e79;
+  --click-stepper-vertical-bulleted-color-title-active: #161517;
+  --click-switch-space-gap: 0.5rem;
+  --click-switch-radii-all: 9999px;
+  --click-switch-size-width: 2rem;
+  --click-switch-size-height: 1rem;
+  --click-switch-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-typography-label-disabled: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-switch-color-background-default: #cccfd3;
+  --click-switch-color-background-active: #151515;
+  --click-switch-color-background-disabled: #dfdfdf;
+  --click-switch-color-stroke-default: #cccfd3;
+  --click-switch-color-stroke-active: #161517;
+  --click-switch-color-stroke-disabled: #dfdfdf;
+  --click-switch-color-indicator-default: #ffffff;
+  --click-switch-color-indicator-active: #ffffff;
+  --click-switch-color-indicator-disabled: #a0a0a0;
+  --click-table-header-title-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-header-cell-space-md-y: 0.75rem;
+  --click-table-header-cell-space-md-x: 1rem;
+  --click-table-header-cell-space-sm-y: 0.5rem;
+  --click-table-header-cell-space-sm-x: 1rem;
+  --click-table-header-color-background-default: #f6f7fa;
+  --click-table-header-color-background-hover: #f6f7fa;
+  --click-table-header-color-background-active: #e7effd;
+  --click-table-header-color-title-default: #161517;
+  --click-table-header-color-icon-default: #161517;
+  --click-table-header-color-checkbox-background-default: #cccfd3;
+  --click-table-header-color-checkbox-border-default: #808691;
+  --click-table-cell-text-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-cell-label-default: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-table-cell-stroke: 1px;
+  --click-table-radii-all: 0.25rem;
+  --click-table-body-cell-space-md-y: 1rem;
+  --click-table-body-cell-space-md-x: 1rem;
+  --click-table-body-cell-space-sm-y: 0.5rem;
+  --click-table-body-cell-space-sm-x: 1rem;
+  --click-table-mobile-cell-space-y: 1rem;
+  --click-table-mobile-cell-space-x: 1rem;
+  --click-table-mobile-cell-space-gap: 0.5rem;
+  --click-table-row-color-background-default: #ffffff;
+  --click-table-row-color-background-hover: lch(94.146 7.7815 264.18 / 0.2);
+  --click-table-row-color-background-active: lch(94.146 7.7815 264.18 / 0.2);
+  --click-table-row-color-stroke-default: #e6e7e9;
+  --click-table-row-color-text-default: #161517;
+  --click-table-row-color-text-disabled: #a0a0a0;
+  --click-table-row-color-link-default: #437eef;
+  --click-table-row-color-label-default: #696e79;
+  --click-table-row-color-barChart-default: #dfdfdf;
+  --click-table-row-color-barChart-hover: #c0c0c0;
+  --click-table-global-color-stroke-default: #e6e7e9;
+  --click-table-global-color-background-default: #ffffff;
+  --click-tabs-space-y: 0.5rem;
+  --click-tabs-space-x: 0.75rem;
+  --click-tabs-radii-all: 0.25rem;
+  --click-tabs-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-basic-strokeWidth-default: 1px;
+  --click-tabs-basic-strokeWidth-hover: 1px;
+  --click-tabs-basic-strokeWidth-active: 2px;
+  --click-tabs-basic-strokeWidth-global: 1px;
+  --click-tabs-basic-color-background-default: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-background-hover: #f6f7fa;
+  --click-tabs-basic-color-background-active: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-text-default: #696e79;
+  --click-tabs-basic-color-text-hover: #161517;
+  --click-tabs-basic-color-text-active: #161517;
+  --click-tabs-basic-color-stroke-default: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-stroke-hover: rgba(0, 0, 0, 0);
+  --click-tabs-basic-color-stroke-active: #151515;
+  --click-tabs-basic-color-global-default: #e6e7e9;
+  --click-tabs-fileTabs-icon-size-height: 1rem;
+  --click-tabs-fileTabs-icon-size-width: 1rem;
+  --click-tabs-fileTabs-space-y: 1.0625rem;
+  --click-tabs-fileTabs-space-x: 1rem;
+  --click-tabs-fileTabs-space-gap: 0.75rem;
+  --click-tabs-fileTabs-typography-label-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-typography-label-hover: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-typography-label-active: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tabs-fileTabs-radii-all: 0;
+  --click-tabs-fileTabs-color-background-default: #f6f7fa;
+  --click-tabs-fileTabs-color-background-hover: #ffffff;
+  --click-tabs-fileTabs-color-background-active: #ffffff;
+  --click-tabs-fileTabs-color-text-default: #696e79;
+  --click-tabs-fileTabs-color-text-hover: #161517;
+  --click-tabs-fileTabs-color-text-active: #161517;
+  --click-tabs-fileTabs-color-stroke-default: #e6e7e9;
+  --click-tabs-fileTabs-color-stroke-hover: #e6e7e9;
+  --click-tabs-fileTabs-color-stroke-active: #e6e7e9;
+  --click-tabs-fileTabs-color-closeButton-background-default: rgba(0, 0, 0, 0);
+  --click-tabs-fileTabs-color-closeButton-background-hover: #e6e7e9;
+  --click-toast-icon-size-height: 1rem;
+  --click-toast-icon-size-width: 1rem;
+  --click-toast-space-title-gap: 0.5rem;
+  --click-toast-space-y: 0.75rem;
+  --click-toast-space-x: 0.75rem;
+  --click-toast-space-gap: 0.5rem;
+  --click-toast-radii-all: 0.25rem;
+  --click-toast-shadow: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-toast-typography-title-default: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-toast-typography-description-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-toast-size-width: 20.75rem;
+  --click-toast-color-title-default: lch(11.126 1.374 305.43);
+  --click-toast-color-description-default: #696e79;
+  --click-toast-color-stroke-default: #e6e7e9;
+  --click-toast-color-icon-default: lch(11.126 1.374 305.43);
+  --click-toast-color-icon-success: #008a0b;
+  --click-toast-color-icon-warning: #a33c00;
+  --click-toast-color-icon-danger: #c10000;
+  --click-tooltip-radii-all: 0.25rem;
+  --click-tooltip-space-x: 0.75rem;
+  --click-tooltip-space-y: 0.5rem;
+  --click-tooltip-typography-label-default: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-tooltip-color-background-default: lch(10.767 0 none / 0.85);
+  --click-tooltip-color-label-default: #ffffff;
+  --click-dashboards-chartWidget-space-gap: 1rem;
+  --click-dashboards-chartWidget-space-element-gap: 0.5rem;
+  --click-dashboards-chartWidget-borderWidth-default: 1px;
+  --click-dashboards-chartWidget-stroke-default: 1px solid #e6e7e9;
+  --click-dashboards-chartWidget-stroke-element-default: 1px solid #e6e7e9;
+  --click-dashboards-chartWidget-stroke-hover: 1px solid #b3b6bd;
+  --click-dashboards-chartWidget-stroke-selected: 1px solid #151515;
+  --click-dashboards-chartWidget-element-radii-all: 0.25rem;
+  --click-dashboards-chartWidget-radii-all: 0.25rem;
+  --click-dashboards-chartWidget-typography-title-default: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-typography-description-default-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-typography-label-default-default: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --click-dashboards-chartWidget-shadow-default: 0;
+  --click-dashboards-chartWidget-shadow-hover: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --click-dashboards-chartWidget-size-icon-all-drag: 1.25rem;
+  --click-dashboards-chartWidget-size-icon-all-menu: 1.5rem;
+  --click-dashboards-chartWidget-size-icon-all-resize: 0.75rem;
+  --click-dashboards-chartWidget-color-background-default: #ffffff;
+  --click-dashboards-chartWidget-color-background-hover: #ffffff;
+  --click-dashboards-chartWidget-color-background-selected: #ffffff;
+  --click-dashboards-chartWidget-color-stroke-default: #e6e7e9;
+  --click-dashboards-chartWidget-color-stroke-hover: #b3b6bd;
+  --click-dashboards-chartWidget-color-stroke-selected: #151515;
+  --click-dashboards-chartWidget-color-title-default: lch(11.126 1.374 305.43);
+  --click-dashboards-chartWidget-color-description-default: #696e79;
+  --click-dashboards-chartWidget-color-legend-default: #696e79;
+  --click-dashboards-chartWidget-color-legend-hover: #696e79;
+  --click-dashboards-chartWidget-color-legend-selected: #161517;
+  --click-dashboards-chartWidget-color-element-stroke-default: #e6e7e9;
+  --click-dashboards-chartWidget-color-icon-default: #161517;
+  --click-dashboards-chartWidget-color-icon-hover: #161517;
+  --click-dashboards-chartWidget-color-icon-selected: #151515;
+  --click-dashboards-chartWidget-color-opacity-bar-default: 0.2;
+  --click-dashboards-chartWidget-color-opacity-bar-hover: 0.5;
+  --click-dashboards-chartWidget-color-label-default: #696e79;
+  --click-dashboards-chartWidget-color-label-hover: #696e79;
+  --click-dashboards-chartWidget-color-label-selected: #696e79;
+  --click-global-color-stroke-default: #e6e7e9;
+  --click-global-color-stroke-muted: lch(91.609 1.1023 265.86);
+  --click-global-color-stroke-intense: #b3b6bd;
+  --click-global-color-accent-default: #151515;
+  --click-global-color-background-default: #ffffff;
+  --click-global-color-background-muted: #f6f7fa;
+  --click-global-color-text-default: #161517;
+  --click-global-color-text-muted: #696e79;
+  --click-global-color-text-disabled: #a0a0a0;
+  --click-global-color-text-link-default: #437eef;
+  --click-global-color-text-link-hover: #104ec6;
+  --click-global-color-text-danger: #c10000;
+  --click-global-color-title-default: lch(11.126 1.374 305.43);
+  --click-global-color-title-muted: #696e79;
+  --click-global-color-outline-default: #437eef;
+  --click-global-color-shadow-default: lch(6.7738 0 none / 0.15);
+  --click-feedback-color-info-background: rgb(26.275% 49.412% 93.725% / 0.1);
+  --click-feedback-color-info-foreground: #437eef;
+  --click-feedback-color-success-background: rgb(20% 100% 26.667% / 0.1);
+  --click-feedback-color-success-foreground: #008a0b;
+  --click-feedback-color-warning-background: rgb(100% 46.667% 16.078% / 0.1);
+  --click-feedback-color-warning-foreground: #a33c00;
+  --click-feedback-color-danger-background: rgb(100% 13.725% 13.725% / 0.1);
+  --click-feedback-color-danger-foreground: #c10000;
+  --click-feedback-color-neutral-background: rgb(41.176% 43.137% 47.451% / 0.1);
+  --click-feedback-color-neutral-foreground: #53575f;
+  --click-feedback-color-neutral-stroke: #e6e7e9;
+  --click-storybook-global-background: #ffffff;
+  --click-chart-color-default-blue: #437eef;
+  --click-chart-color-default-orange: #ff7729;
+  --click-chart-color-default-green: #00e513;
+  --click-chart-color-default-fuchsia: #fb32c9;
+  --click-chart-color-default-yellow: #eef400;
+  --click-chart-color-default-violet: #bb33ff;
+  --click-chart-color-default-babyblue: #00cbeb;
+  --click-chart-color-default-red: #ff2323;
+  --click-chart-color-default-teal: #089b83;
+  --click-chart-color-default-sunrise: #ffc300;
+  --click-chart-color-default-slate: #9a9ea7;
+  --click-chart-color-label-default: #161517;
+  --click-chart-color-label-deselected: lch(6.9377 1.4387 305.43 / 0.3);
+  --click-chart-bars-color-blue: #437eef;
+  --click-chart-bars-color-orange: #ff7729;
+  --click-chart-bars-color-green: #00e513;
+  --click-chart-bars-color-fuchsia: #fb32c9;
+  --click-chart-bars-color-yellow: #eef400;
+  --click-chart-bars-color-violet: #bb33ff;
+  --click-chart-bars-color-babyblue: #00cbeb;
+  --click-chart-bars-color-red: #ff2323;
+  --click-chart-bars-color-teal: #089b83;
+  --click-chart-bars-color-sunrise: #ffc300;
+  --click-chart-bars-color-slate: #9a9ea7;
+  --click-serviceCard-color-background-default: #fbfcff;
+  --click-serviceCard-color-background-hover: #fbfcff;
+  --click-serviceCard-color-stroke-default: #e6e7e9;
+  --click-serviceCard-color-stroke-hover: #cccfd3;
+  --click-gareth-test-main-text: #161517;
+  --click-gareth-test-main-danger: #c10000;
+  --transition-default: all 100ms ease-in 0ms;
+  --transition-duration-slow: 300ms;
+  --transition-duration-smooth: 150ms;
+  --transition-duration-medium: 100ms;
+  --transition-duration-fast: 50ms;
+  --transition-delay-slow: 100ms;
+  --transition-delay-fast: 0ms;
+  --transition-function-ease: ease;
+  --transition-function-ease-in: ease-in;
+  --transition-function-ease-in-out: ease-in-out;
+  --transition-function-linear: linear;
+  --grid-header-cell-borderWidth-default: 1px;
+  --grid-header-cell-borderWidth-selectIndirect: 1px;
+  --grid-header-cell-borderWidth-selectDirect: 1px;
+  --grid-body-cell-borderWidth-default: 1px;
+  --grid-body-cell-borderWidth-selectIndirect: 1px;
+  --grid-body-cell-borderWidth-selectDirect: 2px;
+  --palette-brand-50: #ffffe8;
+  --palette-brand-100: #feffc2;
+  --palette-brand-200: #fdffa3;
+  --palette-brand-300: #faff69;
+  --palette-brand-400: #eef400;
+  --palette-brand-500: #c7cc00;
+  --palette-brand-600: #959900;
+  --palette-brand-700: #686b00;
+  --palette-brand-800: #3c4601;
+  --palette-brand-900: #333300;
+  --palette-brand-base: #fbff46;
+  --palette-neutral-0: #ffffff;
+  --palette-neutral-100: #f9f9f9;
+  --palette-neutral-200: #dfdfdf;
+  --palette-neutral-300: #c0c0c0;
+  --palette-neutral-400: #a0a0a0;
+  --palette-neutral-500: #808080;
+  --palette-neutral-600: #606060;
+  --palette-neutral-650: #505050;
+  --palette-neutral-700: #414141;
+  --palette-neutral-712: #323232;
+  --palette-neutral-725: #282828;
+  --palette-neutral-750: #1f1f1c;
+  --palette-neutral-800: #1d1d1d;
+  --palette-neutral-900: #151515;
+  --palette-neutral-base: #212121;
+  --palette-slate-25: #fbfcff;
+  --palette-slate-50: #f6f7fa;
+  --palette-slate-100: #e6e7e9;
+  --palette-slate-200: #cccfd3;
+  --palette-slate-300: #b3b6bd;
+  --palette-slate-400: #9a9ea7;
+  --palette-slate-500: #808691;
+  --palette-slate-600: #696e79;
+  --palette-slate-700: #53575f;
+  --palette-slate-800: #302e32;
+  --palette-slate-900: #161517;
+  --palette-slate-base: #373439;
+  --palette-slate-50a: lch(49.809 30.506 276.77 / 0.06);
+  --palette-indigo-50: #f4f1fc;
+  --palette-indigo-100: #e4e2e9;
+  --palette-indigo-200: #c8c5d3;
+  --palette-indigo-300: #ada8bd;
+  --palette-indigo-400: #918ba7;
+  --palette-indigo-500: #766e91;
+  --palette-indigo-600: #5e5874;
+  --palette-indigo-700: #474257;
+  --palette-indigo-800: #23212c;
+  --palette-indigo-900: #18161d;
+  --palette-indigo-base: #2f2c3a;
+  --palette-info-50: #e7effd;
+  --palette-info-100: #d0dffb;
+  --palette-info-200: #a1bef7;
+  --palette-info-300: #6d9bf3;
+  --palette-info-400: #437eef;
+  --palette-info-500: #1d64ec;
+  --palette-info-600: #104ec6;
+  --palette-info-650: #0d3e9b;
+  --palette-info-700: #0d3e9b;
+  --palette-info-800: #092b6c;
+  --palette-info-900: #061c47;
+  --palette-info-base: #4781f0;
+  --palette-success-50: #e5ffe8;
+  --palette-success-100: #ccffd0;
+  --palette-success-200: #99ffa1;
+  --palette-success-300: #66ff73;
+  --palette-success-400: #33ff44;
+  --palette-success-500: #00e513;
+  --palette-success-600: #00bd10;
+  --palette-success-700: #008a0b;
+  --palette-success-800: #006108;
+  --palette-success-850: #004206;
+  --palette-success-900: #004206;
+  --palette-success-base: #62de85;
+  --palette-warning-50: #ffe2d1;
+  --palette-warning-100: #ffcbad;
+  --palette-warning-200: #ffb88f;
+  --palette-warning-300: #ff9457;
+  --palette-warning-400: #ff7729;
+  --palette-warning-500: #f55a00;
+  --palette-warning-600: #d64f00;
+  --palette-warning-700: #a33c00;
+  --palette-warning-800: #7a2d00;
+  --palette-warning-900: #471a00;
+  --palette-warning-base: #ffa63d;
+  --palette-danger-50: #ffdddd;
+  --palette-danger-100: #ffbaba;
+  --palette-danger-200: #ff9898;
+  --palette-danger-300: #ff7575;
+  --palette-danger-400: #ff2323;
+  --palette-danger-500: #f10000;
+  --palette-danger-600: #c10000;
+  --palette-danger-700: #910000;
+  --palette-danger-800: #610000;
+  --palette-danger-900: #300000;
+  --palette-danger-base: #ff5353;
+  --palette-gradients-base: linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%);
+  --palette-gradients-yellowToblack: linear-gradient(132deg, #FAFF69 8%, #292929 30%);
+  --palette-gradients-whiteToblack: linear-gradient(132deg, #FFFFFF 8%, #292929 30%);
+  --palette-gradients-transparent: rgba(0, 0, 0, 0);
+  --palette-utility-transparent: rgba(0, 0, 0, 0);
+  --palette-teal-50: #e6fefa;
+  --palette-teal-100: #cffcf4;
+  --palette-teal-200: #a3faec;
+  --palette-teal-300: #6df8e1;
+  --palette-teal-400: #0cedc8;
+  --palette-teal-500: #0bd0af;
+  --palette-teal-600: #089b83;
+  --palette-teal-700: #067462;
+  --palette-teal-800: #045245;
+  --palette-teal-850: #004237;
+  --palette-teal-900: #03352d;
+  --palette-violet-50: #f6e5ff;
+  --palette-violet-100: #eeccff;
+  --palette-violet-200: #dd99ff;
+  --palette-violet-300: #cc66ff;
+  --palette-violet-400: #bb33ff;
+  --palette-violet-500: #aa00ff;
+  --palette-violet-600: #8800cc;
+  --palette-violet-700: #660099;
+  --palette-violet-800: #440066;
+  --palette-violet-850: #33004d;
+  --palette-violet-900: #220033;
+  --palette-fuchsia-50: #fbeff8;
+  --palette-fuchsia-100: #fbc9ef;
+  --palette-fuchsia-200: #fb97e2;
+  --palette-fuchsia-300: #fb64d6;
+  --palette-fuchsia-400: #fb32c9;
+  --palette-fuchsia-500: #fb00bc;
+  --palette-fuchsia-600: #cc0099;
+  --palette-fuchsia-700: #990073;
+  --palette-fuchsia-800: #66004d;
+  --palette-fuchsia-850: #4d0039;
+  --palette-fuchsia-900: #330026;
+  --palette-sunrise-50: #fff3cc;
+  --palette-sunrise-100: #ffe799;
+  --palette-sunrise-200: #ffdb66;
+  --palette-sunrise-300: #ffcf33;
+  --palette-sunrise-400: #ffc300;
+  --palette-sunrise-500: #e0ac00;
+  --palette-sunrise-600: #b28800;
+  --palette-sunrise-700: #8a6900;
+  --palette-sunrise-800: #574200;
+  --palette-sunrise-900: #332700;
+  --palette-babyblue-50: #dbfaff;
+  --palette-babyblue-100: #bdf6ff;
+  --palette-babyblue-200: #8aefff;
+  --palette-babyblue-300: #33e4ff;
+  --palette-babyblue-400: #00cbeb;
+  --palette-babyblue-500: #00b5d1;
+  --palette-babyblue-600: #008599;
+  --palette-babyblue-700: #006170;
+  --palette-babyblue-800: #00424d;
+  --palette-babyblue-900: #002c33;
+  --sizes-0: 0;
+  --sizes-1: 1px;
+  --sizes-2: 0.25rem;
+  --sizes-3: 0.5rem;
+  --sizes-4: 0.75rem;
+  --sizes-5: 1rem;
+  --sizes-6: 1.25rem;
+  --sizes-7: 1.5rem;
+  --sizes-8: 1.75rem;
+  --sizes-9: 2rem;
+  --sizes-10: 2.5rem;
+  --sizes-11: 4rem;
+  --typography-font-families-regular: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-font-families-mono: "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-font-families-display: 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-font-weights-1: 400;
+  --typography-font-weights-2: 500;
+  --typography-font-weights-3: 600;
+  --typography-font-weights-4: 700;
+  --typography-font-sizes-0: 0.625rem;
+  --typography-font-sizes-1: 0.75rem;
+  --typography-font-sizes-2: 0.875rem;
+  --typography-font-sizes-3: 1rem;
+  --typography-font-sizes-4: 1.125rem;
+  --typography-font-sizes-5: 1.25rem;
+  --typography-font-sizes-6: 2rem;
+  --typography-font-sizes-base: 16px;
+  --typography-font-line-height-1: 1.5;
+  --typography-font-line-height-2: 1.6;
+  --typography-font-line-height-3: 1.7;
+  --typography-font-line-height-4: 1.3;
+  --typography-styles-product-titles-xs: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-sm: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-md: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-lg: 700 1.125rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-xl: 700 1.25rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-titles-2xl: 600 2rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-xs: 400 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-sm: 400 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-md: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-normal-lg: 400 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-xs: 500 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-md: 500 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-medium-lg: 500 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-xs: 600 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-sm: 600 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-md: 600 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-semibold-lg: 600 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-mono-xs: 500 0.625rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-sm: 500 0.75rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-md: 500 0.875rem/1.7 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-mono-lg: 500 1rem/1.6 "Inconsolata", Consolas, "SFMono Regular", monospace;
+  --typography-styles-product-text-bold-xs: 700 0.625rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-sm: 700 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-md: 700 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-product-text-bold-lg: 700 1rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-xs: 600 20px/1.5 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-sm: 600 24px/1.5 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-md: 600 36px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-lg: 600 56px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-xl: 700 64px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-brand-titles-2xl: 700 80px/1.3 'Basier Square', "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --typography-styles-field-md: 400 0.875rem/1.6 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --border-radii-0: 0;
+  --border-radii-1: 0.25rem;
+  --border-radii-2: 0.5rem;
+  --border-radii-3: 0.75rem;
+  --border-radii-full: 9999px;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --spaces-0: 0;
+  --spaces-1: 0.25rem;
+  --spaces-2: 0.5rem;
+  --spaces-3: 0.75rem;
+  --spaces-4: 1rem;
+  --spaces-5: 1.5rem;
+  --spaces-6: 2rem;
+  --spaces-7: 2.5rem;
+  --spaces-8: 4rem;
+  --shadow-1: 0 4px 6px -1px lch(6.7738 0 none / 0.15), 0 2px 4px -1px lch(6.7738 0 none / 0.15);
+  --shadow-2: 0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1);
+  --shadow-3: -5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --shadow-4: 5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08);
+  --shadow-5: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
+  --breakpoint-sizes-sm: 640px;
+  --breakpoint-sizes-md: 768px;
+  --breakpoint-sizes-lg: 1024px;
+  --breakpoint-sizes-xl: 1280px;
+  --breakpoint-sizes-2xl: 1536px;
+  --global-color-gradients-yellowToBlack: linear-gradient(132deg, #faff69 8%, #292929 30%);
+  --global-color-gradients-whiteToBlack: linear-gradient(132deg, #ffffff 8%, #292929 30%);
+  --global-color-background-default: #ffffff;
+  --global-color-background-muted: #f6f7fa;
+  --global-color-background-sidebar: #ffffff;
+  --global-color-background-split: #f6f7fa;
+  --global-color-background-muted_a: lch(49.809 30.506 276.77 / 0.06);
+  --global-color-stroke-default: #e6e7e9;
+  --global-color-stroke-muted: #e6e7e9;
+  --global-color-stroke-intense: #b3b6bd;
+  --global-color-stroke-split: #e6e7e9;
+  --global-color-accent-default: #151515;
+  --global-color-text-default: #161517;
+  --global-color-text-muted: #696e79;
+  --global-color-text-disabled: #a0a0a0;
+  --global-color-text-link-default: #437eef;
+  --global-color-text-link-hover: #104ec6;
+  --global-color-outline-default: #437eef;
+  --global-color-shadow-default: lch(6.7738 0 none / 0.15);
+  --global-color-feedback-info-background: #e7effd;
+  --global-color-feedback-info-foreground: #437eef;
+  --global-color-feedback-success-background: #e5ffe8;
+  --global-color-feedback-success-foreground: #008a0b;
+  --global-color-feedback-warning-background: #ffe2d1;
+  --global-color-feedback-warning-foreground: #a33c00;
+  --global-color-feedback-danger-background: #ffdddd;
+  --global-color-feedback-danger-foreground: #c10000;
+  --global-color-feedback-neutral-background: #f6f7fa;
+  --global-color-feedback-neutral-foreground: #53575f;
+  --global-color-feedback-neutral-stroke: #e6e7e9;
+  --global-color-chart-default-blue: #437eef;
+  --global-color-chart-default-orange: #ff7729;
+  --global-color-chart-default-green: #00e513;
+  --global-color-chart-default-fuchsia: #fb32c9;
+  --global-color-chart-default-yellow: #eef400;
+  --global-color-chart-default-violet: #bb33ff;
+  --global-color-chart-default-babyblue: #00cbeb;
+  --global-color-chart-default-red: #ff2323;
+  --global-color-chart-default-danger: #ff2323;
+  --global-color-chart-default-teal: #089b83;
+  --global-color-chart-default-sunrise: #ffc300;
+  --global-color-chart-default-slate: #9a9ea7;
+  --global-color-chart-bars-blue: #437eef;
+  --global-color-chart-bars-orange: #ff7729;
+  --global-color-chart-bars-green: #00e513;
+  --global-color-chart-bars-fuchsia: #fb32c9;
+  --global-color-chart-bars-yellow: #eef400;
+  --global-color-chart-bars-violet: #bb33ff;
+  --global-color-chart-bars-babyblue: #00cbeb;
+  --global-color-chart-bars-red: #ff2323;
+  --global-color-chart-bars-teal: #089b83;
+  --global-color-chart-bars-sunrise: #ffc300;
+  --global-color-chart-bars-slate: #9a9ea7;
+  --global-color-chart-label-default: #161517;
+  --global-color-chart-label-deselected: lch(6.9377 1.4387 305.43 / 0.3);
+  --global-color-iconButton-badge-foreground: #437eef;
+  --global-color-iconButton-badge-background: #e7effd;
+  --global-color-icon-background: linear-gradient(132deg, #FFFFFF 8%, #292929 30%);
+  --name: light;
+}
\ No newline at end of file
diff --git a/src/theme/theme.config.json b/src/theme/theme.config.json
new file mode 100644
index 000000000..93d9e12f5
--- /dev/null
+++ b/src/theme/theme.config.json
@@ -0,0 +1,3 @@
+{
+  "storageKey": "cui-theme"
+}
diff --git a/src/theme/tokens/variables.dark.ts b/src/theme/tokens/variables.dark.ts
index de73d5acc..53a6a9871 100644
--- a/src/theme/tokens/variables.dark.ts
+++ b/src/theme/tokens/variables.dark.ts
@@ -2048,7 +2048,6 @@ const theme = {
             },
             stroke: {
               default: '#323232',
-              focus: '#faff69',
             },
           },
           format: {
@@ -2079,7 +2078,6 @@ const theme = {
             },
             stroke: {
               default: 'rgba(0, 0, 0, 0)',
-              focus: '#faff69',
             },
           },
         },
diff --git a/src/theme/tokens/variables.light.ts b/src/theme/tokens/variables.light.ts
index 2297b15b2..7071c5e48 100644
--- a/src/theme/tokens/variables.light.ts
+++ b/src/theme/tokens/variables.light.ts
@@ -2033,7 +2033,6 @@ const theme = {
             },
             stroke: {
               default: '#e6e7e9',
-              focus: '#437eef',
             },
           },
           format: {
@@ -2061,10 +2060,6 @@ const theme = {
               active: 'rgb(100% 13.725% 13.725% / 0.3)',
               disabled: '#ffffff',
             },
-            stroke: {
-              default: 'rgba(0, 0, 0, 0)',
-              focus: '#437eef',
-            },
           },
         },
       },
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
index 4777683b3..1f441bc86 100644
--- a/src/utils/localStorage.ts
+++ b/src/utils/localStorage.ts
@@ -1 +1,7 @@
-export const CUI_THEME_STORAGE_KEY = 'cui-theme';
+// WARN: The storage key is shared with .scripts/js/generate-token
+// which is a nodejs script. At the moment opted for json instead
+// of adding support for `js` files, but json means importing the
+// whole file (the file shouldn't grow, so should be alright?)
+import config from '@/theme/theme.config.json' with { type: 'json' };
+
+export const CUI_THEME_STORAGE_KEY = config.storageKey;
diff --git a/vite.config.ts b/vite.config.ts
index fcd85724b..a0a58fe62 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,8 +6,17 @@ import dts from 'vite-plugin-dts';
 import { externalizeDeps } from 'vite-plugin-externalize-deps';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { visualizer } from 'rollup-plugin-visualizer';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 const srcDir = path.resolve(__dirname, 'src').replace(/\\/g, '/');
+const isTest = process.env.VITEST === 'true';
+
+// TODO: Find a solution for static files based on conf extensions
+const cssExternalPlugin = () => ({
+  name: 'css-external',
+  enforce: 'pre' as const,
+  resolveId: (id: string) => (id.endsWith('.module.css') ? { id, external: true } : null),
+});
 
 const createEntryFileNames = (ext: 'js' | 'cjs') => {
   return (chunkInfo: { name: string }) => {
@@ -51,9 +60,7 @@ const buildOptions: BuildOptions = {
         entryFileNames: createEntryFileNames('js'),
         chunkFileNames: '[name].js',
         banner: chunk =>
-          chunk.name === 'index' || chunk.name === 'hooks/index'
-            ? `'use client';`
-            : '',
+          chunk.name === 'index' || chunk.name === 'hooks/index' ? `'use client';` : '',
         interop: 'auto',
       },
       {
@@ -64,9 +71,7 @@ const buildOptions: BuildOptions = {
         entryFileNames: createEntryFileNames('cjs'),
         chunkFileNames: '[name].cjs',
         banner: chunk =>
-          chunk.name === 'index' || chunk.name === 'hooks/index'
-            ? `'use client';`
-            : '',
+          chunk.name === 'index' || chunk.name === 'hooks/index' ? `'use client';` : '',
         interop: 'auto',
         exports: 'named',
       },
@@ -78,7 +83,10 @@ const buildOptions: BuildOptions = {
 const viteConfig = defineConfig({
   publicDir: false,
   plugins: [
+    ...(isTest ? [] : [cssExternalPlugin()]),
     react({
+      // TODO: On styled-components migration completion
+      // remove styled-components babel plugins
       babel: {
         plugins: [['babel-plugin-styled-components', { displayName: false }]],
 
@@ -112,6 +120,21 @@ const viteConfig = defineConfig({
       useFile: path.join(process.cwd(), 'package.json'),
     }),
     tsconfigPaths(),
+    viteStaticCopy({
+      targets: ['cjs', 'esm'].map(dest => ({
+        src: 'src/**/*.module.css',
+        dest,
+        rename: (fileName: string, fileExt: string, srcPath: string) => {
+          const srcIndex = srcPath.indexOf('/src/');
+          const ext = fileExt.startsWith('.') ? fileExt : `.${fileExt}`;
+          if (srcIndex !== -1) {
+            const relativePath = srcPath.slice(srcIndex + 5, srcPath.lastIndexOf('/'));
+            return `${relativePath}/${fileName}${ext}`;
+          }
+          return `${fileName}${ext}`;
+        },
+      })),
+    }),
     // WARNING: Keep the visualizer last
     ...(process.env.ANALYZE === 'true'
       ? [
diff --git a/yarn.lock b/yarn.lock
index 347b7ee91..753e432ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -804,6 +804,8 @@ __metadata:
     "@vitejs/plugin-react": "npm:^5.1.2"
     babel-plugin-styled-components: "npm:^2.1.4"
     chromatic: "npm:^13.3.4"
+    class-variance-authority: "npm:^0.7.1"
+    clsx: "npm:^2.1.1"
     date-fns: "npm:4.1.0"
     dayjs: "npm:^1.11.19"
     eslint: "npm:^9"
@@ -839,6 +841,7 @@ __metadata:
     vite: "npm:^7.3.0"
     vite-plugin-dts: "npm:^4.3.0"
     vite-plugin-externalize-deps: "npm:^0.10.0"
+    vite-plugin-static-copy: "npm:^3.2.0"
     vite-tsconfig-paths: "npm:^6.0.5"
     vitest: "npm:^2.1.8"
     watch: "npm:^1.0.2"
@@ -5206,6 +5209,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"anymatch@npm:~3.1.2":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
+  dependencies:
+    normalize-path: "npm:^3.0.0"
+    picomatch: "npm:^2.0.4"
+  checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
+  languageName: node
+  linkType: hard
+
 "arg@npm:^4.1.0":
   version: 4.1.3
   resolution: "arg@npm:4.1.3"
@@ -5468,6 +5481,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"binary-extensions@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "binary-extensions@npm:2.3.0"
+  checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5
+  languageName: node
+  linkType: hard
+
 "boolbase@npm:^1.0.0":
   version: 1.0.0
   resolution: "boolbase@npm:1.0.0"
@@ -5494,7 +5514,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.3":
+"braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -5709,6 +5729,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "chokidar@npm:3.6.0"
+  dependencies:
+    anymatch: "npm:~3.1.2"
+    braces: "npm:~3.0.2"
+    fsevents: "npm:~2.3.2"
+    glob-parent: "npm:~5.1.2"
+    is-binary-path: "npm:~2.1.0"
+    is-glob: "npm:~4.0.1"
+    normalize-path: "npm:~3.0.0"
+    readdirp: "npm:~3.6.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^3.0.0":
   version: 3.0.0
   resolution: "chownr@npm:3.0.0"
@@ -5742,6 +5781,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"class-variance-authority@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "class-variance-authority@npm:0.7.1"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  checksum: 10c0/0f438cea22131808b99272de0fa933c2532d5659773bfec0c583de7b3f038378996d3350683426b8e9c74a6286699382106d71fbec52f0dd5fbb191792cccb5b
+  languageName: node
+  linkType: hard
+
 "classnames@npm:2.3.1":
   version: 2.3.1
   resolution: "classnames@npm:2.3.1"
@@ -5771,6 +5819,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -7587,7 +7642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.2":
+"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -8113,6 +8168,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-binary-path@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "is-binary-path@npm:2.1.0"
+  dependencies:
+    binary-extensions: "npm:^2.0.0"
+  checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38
+  languageName: node
+  linkType: hard
+
 "is-boolean-object@npm:^1.2.1":
   version: 1.2.2
   resolution: "is-boolean-object@npm:1.2.2"
@@ -8230,7 +8294,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -9285,6 +9349,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "normalize-path@npm:3.0.0"
+  checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
+  languageName: node
+  linkType: hard
+
 "nth-check@npm:^2.0.1":
   version: 2.1.1
   resolution: "nth-check@npm:2.1.1"
@@ -9504,7 +9575,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-map@npm:^7.0.2":
+"p-map@npm:^7.0.2, p-map@npm:^7.0.4":
   version: 7.0.4
   resolution: "p-map@npm:7.0.4"
   checksum: 10c0/a5030935d3cb2919d7e89454d1ce82141e6f9955413658b8c9403cfe379283770ed3048146b44cde168aa9e8c716505f196d5689db0ae3ce9a71521a2fef3abd
@@ -9683,7 +9754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -10172,7 +10243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readdirp@npm:^3.6.0":
+"readdirp@npm:^3.6.0, readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
   dependencies:
@@ -11895,6 +11966,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-static-copy@npm:^3.2.0":
+  version: 3.3.0
+  resolution: "vite-plugin-static-copy@npm:3.3.0"
+  dependencies:
+    chokidar: "npm:^3.6.0"
+    p-map: "npm:^7.0.4"
+    picocolors: "npm:^1.1.1"
+    tinyglobby: "npm:^0.2.15"
+  peerDependencies:
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10c0/c70d48a1edfada3d1d90f13311a5ab7e67ea0decdf6b5758a6ba8b10db4e64e8e3573f43b7fe56024eff783ce945fe290ee7b96872f9df1ca0059458dd85713b
+  languageName: node
+  linkType: hard
+
 "vite-tsconfig-paths@npm:^6.0.5":
   version: 6.0.5
   resolution: "vite-tsconfig-paths@npm:6.0.5"