On desktop, drag empty space or use the mouse wheel to pan without bounds. Hold Control or Command while scrolling to zoom at the pointer; Shift and scroll pans horizontally. Focus the canvas and use arrow keys to pan, or use Fit and zoom buttons. On mobile, scroll the page normally. Hover over a section for a selection outline; click an empty area of that section to edit its tokens. Select an example frame or its text to edit that exact combination. Keyboard users can select an example using its size button, then choose a layer in the inspector. Interactive behavior is available in the optional state previews.
System: Untitled system · light theme · source #e8673c
Use this system in your project
Download your tokens, then run these commands in an existing React 19 project. The CLI installs editable React and CSS Modules sources.
1. Save bambiui-tokens.json in your project. 2. Run the CLI commands below. 3. Follow the generated stylesheet and ThemeScope setup.
The JSON download includes both themes and saved tokens, never Playground props. The CLI reads it locally and never uploads your system. Without --system, init uses the default system.
Registry: . Imports and package-manager installation remain explicit. Distributed software is MIT licensed; Studio remains private.
Manual source ZIP (fallback)
Components, CSS Modules, both themes and a populated example from saved System sample defaults. Temporary Preview options are excluded. A detached system snapshot—not a Project backup. CLI sources retain their React API defaults.
Bind application behavior in your host. Optional Google Fonts remain remote. MIT license and scope notice are included; user-authored designs are not relicensed.
Spacing & sizing
Shape, spacing, and sizing tokens are shared across light and dark themes. Editing either theme updates both; only colors differ. Values below are the live exported CSS values in pixels.
Global shape, spacing & sizing
SpacingSm/Md/Lg (--ds-spacing-sm/md/lg) set the gap between items in Card.Content at matching Card sizes. Legacy paddingX, paddingY and gap tokens still control component padding and outer gaps independently. The sm/md/lg control heights are shared across controls.
| Token | CSS variable | Value |
|---|---|---|
| Radius md | --ds-radius | 8px |
| Radius sm | --ds-radius-sm | 4px |
| Radius lg | --ds-radius-lg | 12px |
| Horizontal padding | --ds-padding-x | 16px |
| Vertical padding | --ds-padding-y | 10px |
| Gap | --ds-gap | 8px |
| Margin | --ds-margin | 0px |
| Spacing sm | --ds-spacing-sm | 4px |
| Spacing md | --ds-spacing-md | 8px |
| Spacing lg | --ds-spacing-lg | 16px |
| Border width | --ds-border-width | 1px |
| Control height sm | --ds-control-height-sm | 32px |
| Control height md | --ds-control-height-md | 36px |
| Control height lg | --ds-control-height-lg | 44px |
Component numeric tokens
The radius alias defaults to shared --ds-radius-md; radius=sm/md/lg selects --ds-radius-sm/md/lg on supported components. Omitting the prop preserves historical numeric component overrides. Padding, gap, margin, font size and border width keep their component aliases; spacing presets are shared across themes.
| Component | CSS variable | Source | Resolved value |
|---|---|---|---|
| Button | --button-radius | Inherited from --ds-radius | 8px |
| Button | --button-padding-x | Inherited from --ds-padding-x | 16px |
| Button | --button-padding-y | Inherited from --ds-padding-y | 10px |
| Button | --button-gap | Inherited from --ds-gap | 8px |
| Button | --button-margin | Inherited from --ds-margin | 0px |
| Button | --button-font-size | Inherited from --ds-font-size | 14px |
| Button | --button-border-width | Inherited from --ds-border-width | 1px |
| Input | --input-radius | Inherited from --ds-radius | 8px |
| Input | --input-padding-x | Inherited from --ds-padding-x | 16px |
| Input | --input-padding-y | Inherited from --ds-padding-y | 10px |
| Input | --input-gap | Inherited from --ds-gap | 8px |
| Input | --input-margin | Inherited from --ds-margin | 0px |
| Input | --input-font-size | Inherited from --ds-font-size | 14px |
| Input | --input-border-width | Inherited from --ds-border-width | 1px |
| Card | --card-radius | Inherited from --ds-radius | 8px |
| Card | --card-padding-x | Inherited from --ds-padding-x | 16px |
| Card | --card-padding-y | Inherited from --ds-padding-y | 10px |
| Card | --card-gap | Inherited from --ds-gap | 8px |
| Card | --card-margin | Inherited from --ds-margin | 0px |
| Card | --card-font-size | Inherited from --ds-font-size | 14px |
| Card | --card-border-width | Inherited from --ds-border-width | 1px |
| Badge | --badge-radius | Inherited from --ds-radius | 8px |
| Badge | --badge-padding-x | Inherited from --ds-padding-x | 16px |
| Badge | --badge-padding-y | Inherited from --ds-padding-y | 10px |
| Badge | --badge-gap | Inherited from --ds-gap | 8px |
| Badge | --badge-margin | Inherited from --ds-margin | 0px |
| Badge | --badge-font-size | Inherited from --ds-font-size | 14px |
| Badge | --badge-border-width | Inherited from --ds-border-width | 1px |
| Switch | --switch-radius | Inherited from --ds-radius | 8px |
| Switch | --switch-padding-x | Inherited from --ds-padding-x | 16px |
| Switch | --switch-padding-y | Inherited from --ds-padding-y | 10px |
| Switch | --switch-gap | Inherited from --ds-gap | 8px |
| Switch | --switch-margin | Inherited from --ds-margin | 0px |
| Switch | --switch-font-size | Inherited from --ds-font-size | 14px |
| Switch | --switch-border-width | Inherited from --ds-border-width | 1px |
| Checkbox | --checkbox-radius | Inherited from --ds-radius | 8px |
| Checkbox | --checkbox-padding-x | Inherited from --ds-padding-x | 16px |
| Checkbox | --checkbox-padding-y | Inherited from --ds-padding-y | 10px |
| Checkbox | --checkbox-gap | Inherited from --ds-gap | 8px |
| Checkbox | --checkbox-margin | Inherited from --ds-margin | 0px |
| Checkbox | --checkbox-font-size | Inherited from --ds-font-size | 14px |
| Checkbox | --checkbox-border-width | Inherited from --ds-border-width | 1px |
CSS variable reference
Use var(--ds-…) for shared dimensions and var(--button-…) for component aliases. Numeric token declarations use px; component aliases inherit via var() unless overridden. Both theme selectors export the same non-color values.
.example {
padding: var(--ds-spacing-md);
gap: var(--ds-spacing-sm);
border-radius: var(--ds-radius);
min-height: var(--ds-control-height-md);
}
.button-example { padding-inline: var(--button-padding-x); }CSS variable export
Both themes, including aliases, derived state colors and system constants. Light is the root default; set data-ds-theme="dark" on your theme container for dark mode. Component markup and style rules are not included.
Show full-system CSS variables
:root, [data-ds-theme="light"] {
color-scheme: light;
--ds-size-scale-sm: 0.875;
--ds-size-scale-lg: 1.125;
--ds-icon-size: 1.15em;
--ds-focus-ring-width: 2px;
--ds-focus-ring-offset: 3px;
--ds-state-pressed-offset: 1px;
--ds-state-disabled-opacity: 0.4;
--ds-text-muted-mix: 70%;
--ds-button-font-weight: 500;
--ds-button-line-height: 1.35;
--ds-field-label-font-weight: 500;
--ds-field-helper-font-size: 0.86em;
--ds-field-helper-line-height: 1.45;
--ds-input-line-height: 1.4;
--ds-badge-line-height: 1.2;
--ds-card-title-font-weight: 550;
--ds-card-title-letter-spacing: -0.02em;
--ds-card-description-line-height: 1.65;
--ds-shadow-sm: 0 1px 2px #00000014;
--ds-shadow-md: 0 4px 12px #00000018;
--ds-shadow-lg: 0 8px 24px #27272a1f;
--ds-shadow-elevated: 0 8px 24px #27272a0c;
--ds-transition-duration: 150ms;
--ds-control-inset: 2px;
--ds-switch-thumb-shadow: 0 1px 2px #00000029;
--ds-checkbox-inset: 6px;
--ds-spinner-duration: 800ms;
--ds-card-icon-border-width: 1px;
--ds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ds-background: #fff8f6;
--ds-foreground: #201916;
--ds-muted: #fff4f1;
--ds-muted-foreground: #796f6c;
--ds-border: #8e8480;
--ds-primary: #e8673c;
--ds-on-primary: #291b15;
--ds-secondary: #81711d;
--ds-on-secondary: #ffffff;
--ds-success: #1c822b;
--ds-on-success: #ffffff;
--ds-warning: #946900;
--ds-on-warning: #ffffff;
--ds-danger: #bb4441;
--ds-on-danger: #ffffff;
--ds-info: #2671c9;
--ds-on-info: #ffffff;
--ds-radius: 8px;
--ds-radius-sm: 4px;
--ds-radius-lg: 12px;
--ds-padding-x: 16px;
--ds-padding-y: 10px;
--ds-gap: 8px;
--ds-margin: 0px;
--ds-spacing-sm: 4px;
--ds-spacing-md: 8px;
--ds-spacing-lg: 16px;
--ds-font-size: 14px;
--ds-border-width: 1px;
--ds-control-height-sm: 32px;
--ds-control-height-md: 36px;
--ds-control-height-lg: 44px;
--ds-neutral-50: #fff9f6;
--ds-neutral-100: #f6ece8;
--ds-neutral-200: #e6dcd7;
--ds-neutral-300: #d2c8c4;
--ds-neutral-400: #b8afab;
--ds-neutral-500: #9f9692;
--ds-neutral-600: #877e7a;
--ds-neutral-700: #706763;
--ds-neutral-800: #59504d;
--ds-neutral-900: #433b38;
--ds-neutral-1000: #120c09;
--ds-primary-50: #fff8f6;
--ds-primary-100: #ffe9e2;
--ds-primary-200: #ffd3c4;
--ds-primary-300: #ffb69f;
--ds-primary-400: #ff8d68;
--ds-primary-500: #ed6c41;
--ds-primary-600: #d15225;
--ds-primary-700: #b43900;
--ds-primary-800: #902b00;
--ds-primary-900: #6d1f00;
--ds-primary-1000: #1f0400;
--ds-secondary-50: #fffbe5;
--ds-secondary-100: #fff0a6;
--ds-secondary-200: #f0df8f;
--ds-secondary-300: #dccc7c;
--ds-secondary-400: #c2b263;
--ds-secondary-500: #a9994a;
--ds-secondary-600: #908030;
--ds-secondary-700: #796910;
--ds-secondary-800: #605200;
--ds-secondary-900: #483d00;
--ds-secondary-1000: #110d00;
--ds-success-50: #f0fff0;
--ds-success-100: #caffca;
--ds-success-200: #99f99d;
--ds-success-300: #86e58a;
--ds-success-400: #6cca71;
--ds-success-500: #52b059;
--ds-success-600: #379740;
--ds-success-700: #167e27;
--ds-success-800: #006517;
--ds-success-900: #004b0f;
--ds-success-1000: #001201;
--ds-warning-50: #fff9f0;
--ds-warning-100: #ffeccc;
--ds-warning-200: #ffd895;
--ds-warning-300: #f1c270;
--ds-warning-400: #d7a956;
--ds-warning-500: #bd903c;
--ds-warning-600: #a3781e;
--ds-warning-700: #896100;
--ds-warning-800: #6c4c00;
--ds-warning-900: #513800;
--ds-warning-1000: #150b00;
--ds-danger-50: #fff8f8;
--ds-danger-100: #ffe9e6;
--ds-danger-200: #ffd1cd;
--ds-danger-300: #ffb5ae;
--ds-danger-400: #ff8a82;
--ds-danger-500: #e86d66;
--ds-danger-600: #cc544f;
--ds-danger-700: #b03a38;
--ds-danger-800: #951e22;
--ds-danger-900: #78000e;
--ds-danger-1000: #220001;
--ds-info-50: #f7faff;
--ds-info-100: #e4f0ff;
--ds-info-200: #c9e0ff;
--ds-info-300: #a7ceff;
--ds-info-400: #79b4ff;
--ds-info-500: #509af5;
--ds-info-600: #3780da;
--ds-info-700: #1b68bf;
--ds-info-800: #0050a0;
--ds-info-900: #003b79;
--ds-info-1000: #000d23;
--ds-typography-heading-font-size: 32px;
--ds-typography-heading-line-height: 1.2;
--ds-typography-heading-font-weight: 700;
--ds-typography-heading-letter-spacing: -0.5px;
--ds-typography-h1-font-size: 48px;
--ds-typography-h1-line-height: 1.1;
--ds-typography-h1-font-weight: 700;
--ds-typography-h1-letter-spacing: -1px;
--ds-typography-h2-font-size: 40px;
--ds-typography-h2-line-height: 1.15;
--ds-typography-h2-font-weight: 700;
--ds-typography-h2-letter-spacing: -0.75px;
--ds-typography-h3-font-size: 32px;
--ds-typography-h3-line-height: 1.2;
--ds-typography-h3-font-weight: 700;
--ds-typography-h3-letter-spacing: -0.5px;
--ds-typography-h4-font-size: 28px;
--ds-typography-h4-line-height: 1.25;
--ds-typography-h4-font-weight: 600;
--ds-typography-h4-letter-spacing: -0.35px;
--ds-typography-h5-font-size: 24px;
--ds-typography-h5-line-height: 1.3;
--ds-typography-h5-font-weight: 600;
--ds-typography-h5-letter-spacing: -0.25px;
--ds-typography-h6-font-size: 20px;
--ds-typography-h6-line-height: 1.35;
--ds-typography-h6-font-weight: 600;
--ds-typography-h6-letter-spacing: 0px;
--ds-typography-paragraph-font-size: 16px;
--ds-typography-paragraph-line-height: 1.5;
--ds-typography-paragraph-font-weight: 400;
--ds-typography-paragraph-letter-spacing: 0px;
--ds-typography-label-font-size: 14px;
--ds-typography-label-line-height: 1.4;
--ds-typography-label-font-weight: 500;
--ds-typography-label-letter-spacing: 0px;
--ds-typography-caption-font-size: 12px;
--ds-typography-caption-line-height: 1.4;
--ds-typography-caption-font-weight: 400;
--ds-typography-caption-letter-spacing: 0px;
--button-background: var(--ds-primary);
--button-foreground: var(--ds-on-primary);
--button-border: var(--ds-border);
--button-radius: var(--ds-radius);
--button-padding-x: var(--ds-padding-x);
--button-padding-y: var(--ds-padding-y);
--button-gap: var(--ds-gap);
--button-margin: var(--ds-margin);
--button-font-size: var(--ds-font-size);
--button-border-width: var(--ds-border-width);
--input-background: var(--ds-background);
--input-foreground: var(--ds-foreground);
--input-border: var(--ds-border);
--input-radius: var(--ds-radius);
--input-padding-x: var(--ds-padding-x);
--input-padding-y: var(--ds-padding-y);
--input-gap: var(--ds-gap);
--input-margin: var(--ds-margin);
--input-font-size: var(--ds-font-size);
--input-border-width: var(--ds-border-width);
--card-background: var(--ds-background);
--card-foreground: var(--ds-foreground);
--card-border: var(--ds-border);
--card-radius: var(--ds-radius);
--card-padding-x: var(--ds-padding-x);
--card-padding-y: var(--ds-padding-y);
--card-gap: var(--ds-gap);
--card-margin: var(--ds-margin);
--card-font-size: var(--ds-font-size);
--card-border-width: var(--ds-border-width);
--badge-background: var(--ds-background);
--badge-foreground: var(--ds-foreground);
--badge-border: var(--ds-border);
--badge-radius: var(--ds-radius);
--badge-padding-x: var(--ds-padding-x);
--badge-padding-y: var(--ds-padding-y);
--badge-gap: var(--ds-gap);
--badge-margin: var(--ds-margin);
--badge-font-size: var(--ds-font-size);
--badge-border-width: var(--ds-border-width);
--switch-background: var(--ds-primary);
--switch-foreground: var(--ds-on-primary);
--switch-border: var(--ds-border);
--switch-radius: var(--ds-radius);
--switch-padding-x: var(--ds-padding-x);
--switch-padding-y: var(--ds-padding-y);
--switch-gap: var(--ds-gap);
--switch-margin: var(--ds-margin);
--switch-font-size: var(--ds-font-size);
--switch-border-width: var(--ds-border-width);
--checkbox-background: var(--ds-primary);
--checkbox-foreground: var(--ds-on-primary);
--checkbox-border: var(--ds-border);
--checkbox-radius: var(--ds-radius);
--checkbox-padding-x: var(--ds-padding-x);
--checkbox-padding-y: var(--ds-padding-y);
--checkbox-gap: var(--ds-gap);
--checkbox-margin: var(--ds-margin);
--checkbox-font-size: var(--ds-font-size);
--checkbox-border-width: var(--ds-border-width);
--text-background: var(--ds-background);
--text-foreground: var(--ds-foreground);
--text-border: var(--ds-border);
--text-radius: var(--ds-radius);
--text-padding-x: var(--ds-padding-x);
--text-padding-y: var(--ds-padding-y);
--text-gap: var(--ds-gap);
--text-margin: var(--ds-margin);
--text-font-size: var(--ds-font-size);
--text-border-width: var(--ds-border-width);
--ds-radius-md: 8px;
--ds-primary-hover: #e6653a;
--ds-primary-active: #e26237;
--ds-primary-subtle: #fdeae3;
--ds-primary-on-subtle: #a23200;
--ds-primary-outline: #d8582c;
--ds-primary-focus: #d8582c;
--ds-secondary-hover: #6d5d00;
--ds-secondary-active: #574a00;
--ds-secondary-subtle: #f2ebe0;
--ds-secondary-on-subtle: #6d5d00;
--ds-secondary-outline: #978636;
--ds-secondary-focus: #978636;
--ds-success-hover: #00721b;
--ds-success-active: #005b14;
--ds-success-subtle: #e8ece2;
--ds-success-on-subtle: #00721b;
--ds-success-outline: #3e9d46;
--ds-success-focus: #3e9d46;
--ds-warning-hover: #7a5600;
--ds-warning-active: #624400;
--ds-warning-subtle: #f4eadd;
--ds-warning-on-subtle: #7a5600;
--ds-warning-outline: #aa7e26;
--ds-warning-focus: #aa7e26;
--ds-danger-hover: #a32d2d;
--ds-danger-active: #8b1119;
--ds-danger-subtle: #f8e6e4;
--ds-danger-on-subtle: #a32d2d;
--ds-danger-outline: #d35a55;
--ds-danger-focus: #d35a55;
--ds-info-hover: #075cb2;
--ds-info-active: #004891;
--ds-info-subtle: #e9ebf2;
--ds-info-on-subtle: #075cb2;
--ds-info-outline: #3d87e1;
--ds-info-focus: #3d87e1;
--button-variant-primary-background: #e8673c;
--button-variant-primary-foreground: #291b15;
--button-variant-primary-border: #8e8480;
--button-variant-primary-border-width: 1px;
--button-variant-primary-shadow: none;
--button-variant-primary-hover-background: #e6653a;
--button-variant-primary-active-background: #e26237;
--button-variant-secondary-background: #81711d;
--button-variant-secondary-foreground: #ffffff;
--button-variant-secondary-border: #81711d;
--button-variant-secondary-border-width: 1px;
--button-variant-secondary-shadow: none;
--button-variant-secondary-hover-background: #6d5d00;
--button-variant-secondary-active-background: #574a00;
--button-variant-outline-background: transparent;
--button-variant-outline-foreground: #201916;
--button-variant-outline-border: #8e8480;
--button-variant-outline-border-width: 1px;
--button-variant-outline-shadow: none;
--button-variant-outline-hover-background: #fff4f1;
--button-variant-outline-active-background: #fff4f1;
--button-variant-ghost-background: transparent;
--button-variant-ghost-foreground: #201916;
--button-variant-ghost-border: transparent;
--button-variant-ghost-border-width: 1px;
--button-variant-ghost-shadow: none;
--button-variant-ghost-hover-background: #fff4f1;
--button-variant-ghost-active-background: #fff4f1;
--button-variant-destructive-background: #bb4441;
--button-variant-destructive-foreground: #ffffff;
--button-variant-destructive-border: #bb4441;
--button-variant-destructive-border-width: 1px;
--button-variant-destructive-shadow: none;
--button-variant-destructive-hover-background: #a32d2d;
--button-variant-destructive-active-background: #8b1119;
--button-variant-link-background: transparent;
--button-variant-link-foreground: #a23200;
--button-variant-link-border: transparent;
--button-variant-link-border-width: 1px;
--button-variant-link-shadow: none;
--button-variant-link-hover-background: #fff4f1;
--button-variant-link-active-background: #fff4f1;
--button-hover: #e6653a;
--button-active: #e26237;
--input-variant-default-background: #fff8f6;
--input-variant-default-foreground: #201916;
--input-variant-default-border: #8e8480;
--input-variant-default-border-width: 1px;
--input-variant-default-shadow: none;
--input-variant-hover-background: #fff8f6;
--input-variant-hover-foreground: #201916;
--input-variant-hover-border: #8e8480;
--input-variant-hover-border-width: 1px;
--input-variant-hover-shadow: none;
--input-variant-invalid-background: #fff8f6;
--input-variant-invalid-foreground: #201916;
--input-variant-invalid-border: #bb4441;
--input-variant-invalid-border-width: 1px;
--input-variant-invalid-shadow: none;
--input-variant-readonly-background: #fff8f6;
--input-variant-readonly-foreground: #201916;
--input-variant-readonly-border: #8e8480;
--input-variant-readonly-border-width: 1px;
--input-variant-readonly-shadow: none;
--switch-variant-checked-background: #e8673c;
--switch-variant-checked-foreground: #291b15;
--switch-variant-checked-border: #8e8480;
--switch-variant-checked-border-width: 1px;
--switch-variant-checked-shadow: none;
--switch-variant-unchecked-background: #fff4f1;
--switch-variant-unchecked-foreground: #201916;
--switch-variant-unchecked-border: #8e8480;
--switch-variant-unchecked-border-width: 1px;
--switch-variant-unchecked-shadow: none;
--switch-variant-invalid-checked-background: #e8673c;
--switch-variant-invalid-checked-foreground: #291b15;
--switch-variant-invalid-checked-border: #d35a55;
--switch-variant-invalid-checked-border-width: 1px;
--switch-variant-invalid-checked-shadow: none;
--switch-variant-invalid-unchecked-background: #fff4f1;
--switch-variant-invalid-unchecked-foreground: #201916;
--switch-variant-invalid-unchecked-border: #d35a55;
--switch-variant-invalid-unchecked-border-width: 1px;
--switch-variant-invalid-unchecked-shadow: none;
--checkbox-variant-checked-background: #e8673c;
--checkbox-variant-checked-foreground: #291b15;
--checkbox-variant-checked-border: #8e8480;
--checkbox-variant-checked-border-width: 1px;
--checkbox-variant-checked-shadow: none;
--checkbox-variant-unchecked-background: #fff4f1;
--checkbox-variant-unchecked-foreground: #201916;
--checkbox-variant-unchecked-border: #8e8480;
--checkbox-variant-unchecked-border-width: 1px;
--checkbox-variant-unchecked-shadow: none;
--checkbox-variant-invalid-checked-background: #e8673c;
--checkbox-variant-invalid-checked-foreground: #291b15;
--checkbox-variant-invalid-checked-border: #d35a55;
--checkbox-variant-invalid-checked-border-width: 1px;
--checkbox-variant-invalid-checked-shadow: none;
--checkbox-variant-invalid-unchecked-background: #fff4f1;
--checkbox-variant-invalid-unchecked-foreground: #201916;
--checkbox-variant-invalid-unchecked-border: #d35a55;
--checkbox-variant-invalid-unchecked-border-width: 1px;
--checkbox-variant-invalid-unchecked-shadow: none;
--badge-neutral-subtle: #e9e2e0;
--badge-neutral-on-subtle: #645c58;
--badge-neutral-outline: #8d8480;
--badge-variant-solid-neutral-background: #201916;
--badge-variant-solid-neutral-foreground: #fff8f6;
--badge-variant-solid-neutral-border: #201916;
--badge-variant-solid-neutral-border-width: 1px;
--badge-variant-solid-neutral-shadow: none;
--badge-variant-solid-neutral-subtle: #e9e2e0;
--badge-variant-solid-neutral-on-subtle: #645c58;
--badge-variant-solid-neutral-outline: #201916;
--badge-variant-subtle-neutral-background: #e9e2e0;
--badge-variant-subtle-neutral-foreground: #645c58;
--badge-variant-subtle-neutral-border: transparent;
--badge-variant-subtle-neutral-border-width: 1px;
--badge-variant-subtle-neutral-shadow: none;
--badge-variant-subtle-neutral-subtle: #e9e2e0;
--badge-variant-subtle-neutral-on-subtle: #645c58;
--badge-variant-subtle-neutral-outline: transparent;
--badge-variant-outline-neutral-background: #fff8f6;
--badge-variant-outline-neutral-foreground: #645c58;
--badge-variant-outline-neutral-border: #8d8480;
--badge-variant-outline-neutral-border-width: 1px;
--badge-variant-outline-neutral-shadow: none;
--badge-variant-outline-neutral-subtle: #e9e2e0;
--badge-variant-outline-neutral-on-subtle: #645c58;
--badge-variant-outline-neutral-outline: #8d8480;
--badge-primary-subtle: #fdeae3;
--badge-primary-on-subtle: #a23200;
--badge-primary-outline: #d8582c;
--badge-variant-solid-primary-background: #e8673c;
--badge-variant-solid-primary-foreground: #291b15;
--badge-variant-solid-primary-border: #e8673c;
--badge-variant-solid-primary-border-width: 1px;
--badge-variant-solid-primary-shadow: none;
--badge-variant-solid-primary-subtle: #fdeae3;
--badge-variant-solid-primary-on-subtle: #a23200;
--badge-variant-solid-primary-outline: #e8673c;
--badge-variant-subtle-primary-background: #fdeae3;
--badge-variant-subtle-primary-foreground: #a23200;
--badge-variant-subtle-primary-border: transparent;
--badge-variant-subtle-primary-border-width: 1px;
--badge-variant-subtle-primary-shadow: none;
--badge-variant-subtle-primary-subtle: #fdeae3;
--badge-variant-subtle-primary-on-subtle: #a23200;
--badge-variant-subtle-primary-outline: transparent;
--badge-variant-outline-primary-background: #fff8f6;
--badge-variant-outline-primary-foreground: #a23200;
--badge-variant-outline-primary-border: #d8582c;
--badge-variant-outline-primary-border-width: 1px;
--badge-variant-outline-primary-shadow: none;
--badge-variant-outline-primary-subtle: #fdeae3;
--badge-variant-outline-primary-on-subtle: #a23200;
--badge-variant-outline-primary-outline: #d8582c;
--badge-success-subtle: #e8ece2;
--badge-success-on-subtle: #00721b;
--badge-success-outline: #3e9d46;
--badge-variant-solid-success-background: #1c822b;
--badge-variant-solid-success-foreground: #ffffff;
--badge-variant-solid-success-border: #1c822b;
--badge-variant-solid-success-border-width: 1px;
--badge-variant-solid-success-shadow: none;
--badge-variant-solid-success-subtle: #e8ece2;
--badge-variant-solid-success-on-subtle: #00721b;
--badge-variant-solid-success-outline: #1c822b;
--badge-variant-subtle-success-background: #e8ece2;
--badge-variant-subtle-success-foreground: #00721b;
--badge-variant-subtle-success-border: transparent;
--badge-variant-subtle-success-border-width: 1px;
--badge-variant-subtle-success-shadow: none;
--badge-variant-subtle-success-subtle: #e8ece2;
--badge-variant-subtle-success-on-subtle: #00721b;
--badge-variant-subtle-success-outline: transparent;
--badge-variant-outline-success-background: #fff8f6;
--badge-variant-outline-success-foreground: #00721b;
--badge-variant-outline-success-border: #3e9d46;
--badge-variant-outline-success-border-width: 1px;
--badge-variant-outline-success-shadow: none;
--badge-variant-outline-success-subtle: #e8ece2;
--badge-variant-outline-success-on-subtle: #00721b;
--badge-variant-outline-success-outline: #3e9d46;
--badge-warning-subtle: #f4eadd;
--badge-warning-on-subtle: #7a5600;
--badge-warning-outline: #aa7e26;
--badge-variant-solid-warning-background: #946900;
--badge-variant-solid-warning-foreground: #ffffff;
--badge-variant-solid-warning-border: #946900;
--badge-variant-solid-warning-border-width: 1px;
--badge-variant-solid-warning-shadow: none;
--badge-variant-solid-warning-subtle: #f4eadd;
--badge-variant-solid-warning-on-subtle: #7a5600;
--badge-variant-solid-warning-outline: #946900;
--badge-variant-subtle-warning-background: #f4eadd;
--badge-variant-subtle-warning-foreground: #7a5600;
--badge-variant-subtle-warning-border: transparent;
--badge-variant-subtle-warning-border-width: 1px;
--badge-variant-subtle-warning-shadow: none;
--badge-variant-subtle-warning-subtle: #f4eadd;
--badge-variant-subtle-warning-on-subtle: #7a5600;
--badge-variant-subtle-warning-outline: transparent;
--badge-variant-outline-warning-background: #fff8f6;
--badge-variant-outline-warning-foreground: #7a5600;
--badge-variant-outline-warning-border: #aa7e26;
--badge-variant-outline-warning-border-width: 1px;
--badge-variant-outline-warning-shadow: none;
--badge-variant-outline-warning-subtle: #f4eadd;
--badge-variant-outline-warning-on-subtle: #7a5600;
--badge-variant-outline-warning-outline: #aa7e26;
--badge-danger-subtle: #f8e6e4;
--badge-danger-on-subtle: #a32d2d;
--badge-danger-outline: #d35a55;
--badge-variant-solid-danger-background: #bb4441;
--badge-variant-solid-danger-foreground: #ffffff;
--badge-variant-solid-danger-border: #bb4441;
--badge-variant-solid-danger-border-width: 1px;
--badge-variant-solid-danger-shadow: none;
--badge-variant-solid-danger-subtle: #f8e6e4;
--badge-variant-solid-danger-on-subtle: #a32d2d;
--badge-variant-solid-danger-outline: #bb4441;
--badge-variant-subtle-danger-background: #f8e6e4;
--badge-variant-subtle-danger-foreground: #a32d2d;
--badge-variant-subtle-danger-border: transparent;
--badge-variant-subtle-danger-border-width: 1px;
--badge-variant-subtle-danger-shadow: none;
--badge-variant-subtle-danger-subtle: #f8e6e4;
--badge-variant-subtle-danger-on-subtle: #a32d2d;
--badge-variant-subtle-danger-outline: transparent;
--badge-variant-outline-danger-background: #fff8f6;
--badge-variant-outline-danger-foreground: #a32d2d;
--badge-variant-outline-danger-border: #d35a55;
--badge-variant-outline-danger-border-width: 1px;
--badge-variant-outline-danger-shadow: none;
--badge-variant-outline-danger-subtle: #f8e6e4;
--badge-variant-outline-danger-on-subtle: #a32d2d;
--badge-variant-outline-danger-outline: #d35a55;
--badge-info-subtle: #e9ebf2;
--badge-info-on-subtle: #075cb2;
--badge-info-outline: #3d87e1;
--badge-variant-solid-info-background: #2671c9;
--badge-variant-solid-info-foreground: #ffffff;
--badge-variant-solid-info-border: #2671c9;
--badge-variant-solid-info-border-width: 1px;
--badge-variant-solid-info-shadow: none;
--badge-variant-solid-info-subtle: #e9ebf2;
--badge-variant-solid-info-on-subtle: #075cb2;
--badge-variant-solid-info-outline: #2671c9;
--badge-variant-subtle-info-background: #e9ebf2;
--badge-variant-subtle-info-foreground: #075cb2;
--badge-variant-subtle-info-border: transparent;
--badge-variant-subtle-info-border-width: 1px;
--badge-variant-subtle-info-shadow: none;
--badge-variant-subtle-info-subtle: #e9ebf2;
--badge-variant-subtle-info-on-subtle: #075cb2;
--badge-variant-subtle-info-outline: transparent;
--badge-variant-outline-info-background: #fff8f6;
--badge-variant-outline-info-foreground: #075cb2;
--badge-variant-outline-info-border: #3d87e1;
--badge-variant-outline-info-border-width: 1px;
--badge-variant-outline-info-shadow: none;
--badge-variant-outline-info-subtle: #e9ebf2;
--badge-variant-outline-info-on-subtle: #075cb2;
--badge-variant-outline-info-outline: #3d87e1;
--card-variant-outlined-background: #fff8f6;
--card-variant-outlined-foreground: #201916;
--card-variant-outlined-border: #8e8480;
--card-variant-outlined-border-width: 1px;
--card-variant-outlined-shadow: none;
--card-variant-outlined-description: #635c59;
--card-variant-elevated-background: #fff8f6;
--card-variant-elevated-foreground: #201916;
--card-variant-elevated-border: transparent;
--card-variant-elevated-border-width: 1px;
--card-variant-elevated-shadow: var(--ds-shadow-lg);
--card-variant-elevated-description: #635c59;
--card-variant-filled-background: #fff4f1;
--card-variant-filled-foreground: #201916;
--card-variant-filled-border: transparent;
--card-variant-filled-border-width: 1px;
--card-variant-filled-shadow: none;
--card-variant-filled-description: #635b58;
--card-description: #635c59;
--card-filled-description: #635b58;
}
[data-ds-theme="dark"] {
color-scheme: dark;
--ds-size-scale-sm: 0.875;
--ds-size-scale-lg: 1.125;
--ds-icon-size: 1.15em;
--ds-focus-ring-width: 2px;
--ds-focus-ring-offset: 3px;
--ds-state-pressed-offset: 1px;
--ds-state-disabled-opacity: 0.4;
--ds-text-muted-mix: 70%;
--ds-button-font-weight: 500;
--ds-button-line-height: 1.35;
--ds-field-label-font-weight: 500;
--ds-field-helper-font-size: 0.86em;
--ds-field-helper-line-height: 1.45;
--ds-input-line-height: 1.4;
--ds-badge-line-height: 1.2;
--ds-card-title-font-weight: 550;
--ds-card-title-letter-spacing: -0.02em;
--ds-card-description-line-height: 1.65;
--ds-shadow-sm: 0 1px 2px #00000014;
--ds-shadow-md: 0 4px 12px #00000018;
--ds-shadow-lg: 0 8px 24px #27272a1f;
--ds-shadow-elevated: 0 8px 24px #27272a0c;
--ds-transition-duration: 150ms;
--ds-control-inset: 2px;
--ds-switch-thumb-shadow: 0 1px 2px #00000029;
--ds-checkbox-inset: 6px;
--ds-spinner-duration: 800ms;
--ds-card-icon-border-width: 1px;
--ds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ds-background: #0e0706;
--ds-foreground: #ede2de;
--ds-muted: #201916;
--ds-muted-foreground: #a69c98;
--ds-border: #8e8480;
--ds-primary: #f47247;
--ds-on-primary: #000000;
--ds-secondary: #af9f50;
--ds-on-secondary: #000000;
--ds-success: #58b75e;
--ds-on-success: #000000;
--ds-warning: #cd9200;
--ds-on-warning: #000000;
--ds-danger: #ef736c;
--ds-on-danger: #000000;
--ds-info: #56a0fc;
--ds-on-info: #000000;
--ds-radius: 8px;
--ds-radius-sm: 4px;
--ds-radius-lg: 12px;
--ds-padding-x: 16px;
--ds-padding-y: 10px;
--ds-gap: 8px;
--ds-margin: 0px;
--ds-spacing-sm: 4px;
--ds-spacing-md: 8px;
--ds-spacing-lg: 16px;
--ds-font-size: 14px;
--ds-border-width: 1px;
--ds-control-height-sm: 32px;
--ds-control-height-md: 36px;
--ds-control-height-lg: 44px;
--ds-neutral-50: #fff9f6;
--ds-neutral-100: #f7ece8;
--ds-neutral-200: #e6dbd7;
--ds-neutral-300: #d3c8c4;
--ds-neutral-400: #b9aeab;
--ds-neutral-500: #a09692;
--ds-neutral-600: #887e7a;
--ds-neutral-700: #706763;
--ds-neutral-800: #59504d;
--ds-neutral-900: #443b38;
--ds-neutral-1000: #120b09;
--ds-primary-50: #fff8f6;
--ds-primary-100: #ffe9e2;
--ds-primary-200: #ffd3c4;
--ds-primary-300: #ffb69f;
--ds-primary-400: #ff8d68;
--ds-primary-500: #ed6c41;
--ds-primary-600: #d15225;
--ds-primary-700: #b43900;
--ds-primary-800: #902b00;
--ds-primary-900: #6d1f00;
--ds-primary-1000: #1e0400;
--ds-secondary-50: #fffbe5;
--ds-secondary-100: #fff0a5;
--ds-secondary-200: #f0df8f;
--ds-secondary-300: #dccc7c;
--ds-secondary-400: #c2b263;
--ds-secondary-500: #a9994a;
--ds-secondary-600: #908030;
--ds-secondary-700: #796911;
--ds-secondary-800: #605200;
--ds-secondary-900: #483d00;
--ds-secondary-1000: #110d00;
--ds-success-50: #f0fff0;
--ds-success-100: #caffca;
--ds-success-200: #99f99c;
--ds-success-300: #85e589;
--ds-success-400: #6bca70;
--ds-success-500: #51b058;
--ds-success-600: #36973f;
--ds-success-700: #157f26;
--ds-success-800: #006517;
--ds-success-900: #004b0e;
--ds-success-1000: #001201;
--ds-warning-50: #fff9f0;
--ds-warning-100: #ffeccd;
--ds-warning-200: #ffd896;
--ds-warning-300: #fcbf4d;
--ds-warning-400: #e1a52c;
--ds-warning-500: #c58c00;
--ds-warning-600: #a77600;
--ds-warning-700: #896000;
--ds-warning-800: #6d4c00;
--ds-warning-900: #513800;
--ds-warning-1000: #150b00;
--ds-danger-50: #fff8f8;
--ds-danger-100: #ffe9e6;
--ds-danger-200: #ffd1cd;
--ds-danger-300: #ffb5ae;
--ds-danger-400: #ff8a82;
--ds-danger-500: #e86d66;
--ds-danger-600: #cc544f;
--ds-danger-700: #b03a38;
--ds-danger-800: #951e22;
--ds-danger-900: #78000e;
--ds-danger-1000: #220001;
--ds-info-50: #f7faff;
--ds-info-100: #e4f0ff;
--ds-info-200: #c9e0ff;
--ds-info-300: #a7ceff;
--ds-info-400: #79b4ff;
--ds-info-500: #509af5;
--ds-info-600: #3680da;
--ds-info-700: #1a68bf;
--ds-info-800: #0051a0;
--ds-info-900: #003c79;
--ds-info-1000: #000d23;
--ds-typography-heading-font-size: 32px;
--ds-typography-heading-line-height: 1.2;
--ds-typography-heading-font-weight: 700;
--ds-typography-heading-letter-spacing: -0.5px;
--ds-typography-h1-font-size: 48px;
--ds-typography-h1-line-height: 1.1;
--ds-typography-h1-font-weight: 700;
--ds-typography-h1-letter-spacing: -1px;
--ds-typography-h2-font-size: 40px;
--ds-typography-h2-line-height: 1.15;
--ds-typography-h2-font-weight: 700;
--ds-typography-h2-letter-spacing: -0.75px;
--ds-typography-h3-font-size: 32px;
--ds-typography-h3-line-height: 1.2;
--ds-typography-h3-font-weight: 700;
--ds-typography-h3-letter-spacing: -0.5px;
--ds-typography-h4-font-size: 28px;
--ds-typography-h4-line-height: 1.25;
--ds-typography-h4-font-weight: 600;
--ds-typography-h4-letter-spacing: -0.35px;
--ds-typography-h5-font-size: 24px;
--ds-typography-h5-line-height: 1.3;
--ds-typography-h5-font-weight: 600;
--ds-typography-h5-letter-spacing: -0.25px;
--ds-typography-h6-font-size: 20px;
--ds-typography-h6-line-height: 1.35;
--ds-typography-h6-font-weight: 600;
--ds-typography-h6-letter-spacing: 0px;
--ds-typography-paragraph-font-size: 16px;
--ds-typography-paragraph-line-height: 1.5;
--ds-typography-paragraph-font-weight: 400;
--ds-typography-paragraph-letter-spacing: 0px;
--ds-typography-label-font-size: 14px;
--ds-typography-label-line-height: 1.4;
--ds-typography-label-font-weight: 500;
--ds-typography-label-letter-spacing: 0px;
--ds-typography-caption-font-size: 12px;
--ds-typography-caption-line-height: 1.4;
--ds-typography-caption-font-weight: 400;
--ds-typography-caption-letter-spacing: 0px;
--button-background: var(--ds-primary);
--button-foreground: var(--ds-on-primary);
--button-border: var(--ds-border);
--button-radius: var(--ds-radius);
--button-padding-x: var(--ds-padding-x);
--button-padding-y: var(--ds-padding-y);
--button-gap: var(--ds-gap);
--button-margin: var(--ds-margin);
--button-font-size: var(--ds-font-size);
--button-border-width: var(--ds-border-width);
--input-background: var(--ds-background);
--input-foreground: var(--ds-foreground);
--input-border: var(--ds-border);
--input-radius: var(--ds-radius);
--input-padding-x: var(--ds-padding-x);
--input-padding-y: var(--ds-padding-y);
--input-gap: var(--ds-gap);
--input-margin: var(--ds-margin);
--input-font-size: var(--ds-font-size);
--input-border-width: var(--ds-border-width);
--card-background: var(--ds-background);
--card-foreground: var(--ds-foreground);
--card-border: var(--ds-border);
--card-radius: var(--ds-radius);
--card-padding-x: var(--ds-padding-x);
--card-padding-y: var(--ds-padding-y);
--card-gap: var(--ds-gap);
--card-margin: var(--ds-margin);
--card-font-size: var(--ds-font-size);
--card-border-width: var(--ds-border-width);
--badge-background: var(--ds-background);
--badge-foreground: var(--ds-foreground);
--badge-border: var(--ds-border);
--badge-radius: var(--ds-radius);
--badge-padding-x: var(--ds-padding-x);
--badge-padding-y: var(--ds-padding-y);
--badge-gap: var(--ds-gap);
--badge-margin: var(--ds-margin);
--badge-font-size: var(--ds-font-size);
--badge-border-width: var(--ds-border-width);
--switch-background: var(--ds-primary);
--switch-foreground: var(--ds-on-primary);
--switch-border: var(--ds-border);
--switch-radius: var(--ds-radius);
--switch-padding-x: var(--ds-padding-x);
--switch-padding-y: var(--ds-padding-y);
--switch-gap: var(--ds-gap);
--switch-margin: var(--ds-margin);
--switch-font-size: var(--ds-font-size);
--switch-border-width: var(--ds-border-width);
--checkbox-background: var(--ds-primary);
--checkbox-foreground: var(--ds-on-primary);
--checkbox-border: var(--ds-border);
--checkbox-radius: var(--ds-radius);
--checkbox-padding-x: var(--ds-padding-x);
--checkbox-padding-y: var(--ds-padding-y);
--checkbox-gap: var(--ds-gap);
--checkbox-margin: var(--ds-margin);
--checkbox-font-size: var(--ds-font-size);
--checkbox-border-width: var(--ds-border-width);
--text-background: var(--ds-background);
--text-foreground: var(--ds-foreground);
--text-border: var(--ds-border);
--text-radius: var(--ds-radius);
--text-padding-x: var(--ds-padding-x);
--text-padding-y: var(--ds-padding-y);
--text-gap: var(--ds-gap);
--text-margin: var(--ds-margin);
--text-font-size: var(--ds-font-size);
--text-border-width: var(--ds-border-width);
--ds-radius-md: 8px;
--ds-primary-hover: #ff9877;
--ds-primary-active: #ffbba5;
--ds-primary-subtle: #371a12;
--ds-primary-on-subtle: #ff8761;
--ds-primary-outline: #d8582c;
--ds-primary-focus: #d8582c;
--ds-secondary-hover: #c8b869;
--ds-secondary-active: #dfcf7f;
--ds-secondary-subtle: #2b2213;
--ds-secondary-on-subtle: #bfaf60;
--ds-secondary-outline: #968736;
--ds-secondary-focus: #968736;
--ds-success-hover: #72d177;
--ds-success-active: #89e88c;
--ds-success-subtle: #1b2716;
--ds-success-on-subtle: #68c76d;
--ds-success-outline: #3d9d45;
--ds-success-focus: #3d9d45;
--ds-warning-hover: #e8ab35;
--ds-warning-active: #ffc252;
--ds-warning-subtle: #302005;
--ds-warning-on-subtle: #dea227;
--ds-warning-outline: #ae7c00;
--ds-warning-focus: #ae7c00;
--ds-danger-hover: #ff958d;
--ds-danger-active: #ffbab3;
--ds-danger-subtle: #371a18;
--ds-danger-on-subtle: #ff847c;
--ds-danger-outline: #d35a55;
--ds-danger-focus: #d35a55;
--ds-info-hover: #85baff;
--ds-info-active: #add1ff;
--ds-info-subtle: #1b2332;
--ds-info-on-subtle: #73b1ff;
--ds-info-outline: #3d87e1;
--ds-info-focus: #3d87e1;
--button-variant-primary-background: #f47247;
--button-variant-primary-foreground: #000000;
--button-variant-primary-border: #8e8480;
--button-variant-primary-border-width: 1px;
--button-variant-primary-shadow: none;
--button-variant-primary-hover-background: #ff9877;
--button-variant-primary-active-background: #ffbba5;
--button-variant-secondary-background: #af9f50;
--button-variant-secondary-foreground: #000000;
--button-variant-secondary-border: #af9f50;
--button-variant-secondary-border-width: 1px;
--button-variant-secondary-shadow: none;
--button-variant-secondary-hover-background: #c8b869;
--button-variant-secondary-active-background: #dfcf7f;
--button-variant-outline-background: transparent;
--button-variant-outline-foreground: #ede2de;
--button-variant-outline-border: #8e8480;
--button-variant-outline-border-width: 1px;
--button-variant-outline-shadow: none;
--button-variant-outline-hover-background: #201916;
--button-variant-outline-active-background: #201916;
--button-variant-ghost-background: transparent;
--button-variant-ghost-foreground: #ede2de;
--button-variant-ghost-border: transparent;
--button-variant-ghost-border-width: 1px;
--button-variant-ghost-shadow: none;
--button-variant-ghost-hover-background: #201916;
--button-variant-ghost-active-background: #201916;
--button-variant-destructive-background: #ef736c;
--button-variant-destructive-foreground: #000000;
--button-variant-destructive-border: #ef736c;
--button-variant-destructive-border-width: 1px;
--button-variant-destructive-shadow: none;
--button-variant-destructive-hover-background: #ff958d;
--button-variant-destructive-active-background: #ffbab3;
--button-variant-link-background: transparent;
--button-variant-link-foreground: #ff8761;
--button-variant-link-border: transparent;
--button-variant-link-border-width: 1px;
--button-variant-link-shadow: none;
--button-variant-link-hover-background: #201916;
--button-variant-link-active-background: #201916;
--button-hover: #ff9877;
--button-active: #ffbba5;
--input-variant-default-background: #0e0706;
--input-variant-default-foreground: #ede2de;
--input-variant-default-border: #8e8480;
--input-variant-default-border-width: 1px;
--input-variant-default-shadow: none;
--input-variant-hover-background: #0e0706;
--input-variant-hover-foreground: #ede2de;
--input-variant-hover-border: #8e8480;
--input-variant-hover-border-width: 1px;
--input-variant-hover-shadow: none;
--input-variant-invalid-background: #0e0706;
--input-variant-invalid-foreground: #ede2de;
--input-variant-invalid-border: #ef736c;
--input-variant-invalid-border-width: 1px;
--input-variant-invalid-shadow: none;
--input-variant-readonly-background: #0e0706;
--input-variant-readonly-foreground: #ede2de;
--input-variant-readonly-border: #8e8480;
--input-variant-readonly-border-width: 1px;
--input-variant-readonly-shadow: none;
--switch-variant-checked-background: #f47247;
--switch-variant-checked-foreground: #000000;
--switch-variant-checked-border: #8e8480;
--switch-variant-checked-border-width: 1px;
--switch-variant-checked-shadow: none;
--switch-variant-unchecked-background: #201916;
--switch-variant-unchecked-foreground: #ede2de;
--switch-variant-unchecked-border: #8e8480;
--switch-variant-unchecked-border-width: 1px;
--switch-variant-unchecked-shadow: none;
--switch-variant-invalid-checked-background: #f47247;
--switch-variant-invalid-checked-foreground: #000000;
--switch-variant-invalid-checked-border: #d35a55;
--switch-variant-invalid-checked-border-width: 1px;
--switch-variant-invalid-checked-shadow: none;
--switch-variant-invalid-unchecked-background: #201916;
--switch-variant-invalid-unchecked-foreground: #ede2de;
--switch-variant-invalid-unchecked-border: #d35a55;
--switch-variant-invalid-unchecked-border-width: 1px;
--switch-variant-invalid-unchecked-shadow: none;
--checkbox-variant-checked-background: #f47247;
--checkbox-variant-checked-foreground: #000000;
--checkbox-variant-checked-border: #8e8480;
--checkbox-variant-checked-border-width: 1px;
--checkbox-variant-checked-shadow: none;
--checkbox-variant-unchecked-background: #201916;
--checkbox-variant-unchecked-foreground: #ede2de;
--checkbox-variant-unchecked-border: #8e8480;
--checkbox-variant-unchecked-border-width: 1px;
--checkbox-variant-unchecked-shadow: none;
--checkbox-variant-invalid-checked-background: #f47247;
--checkbox-variant-invalid-checked-foreground: #000000;
--checkbox-variant-invalid-checked-border: #d35a55;
--checkbox-variant-invalid-checked-border-width: 1px;
--checkbox-variant-invalid-checked-shadow: none;
--checkbox-variant-invalid-unchecked-background: #201916;
--checkbox-variant-invalid-unchecked-foreground: #ede2de;
--checkbox-variant-invalid-unchecked-border: #d35a55;
--checkbox-variant-invalid-unchecked-border-width: 1px;
--checkbox-variant-invalid-unchecked-shadow: none;
--badge-neutral-subtle: #362e2d;
--badge-neutral-on-subtle: #b6aba8;
--badge-neutral-outline: #8e8480;
--badge-variant-solid-neutral-background: #ede2de;
--badge-variant-solid-neutral-foreground: #0e0706;
--badge-variant-solid-neutral-border: #ede2de;
--badge-variant-solid-neutral-border-width: 1px;
--badge-variant-solid-neutral-shadow: none;
--badge-variant-solid-neutral-subtle: #362e2d;
--badge-variant-solid-neutral-on-subtle: #b6aba8;
--badge-variant-solid-neutral-outline: #ede2de;
--badge-variant-subtle-neutral-background: #362e2d;
--badge-variant-subtle-neutral-foreground: #b6aba8;
--badge-variant-subtle-neutral-border: transparent;
--badge-variant-subtle-neutral-border-width: 1px;
--badge-variant-subtle-neutral-shadow: none;
--badge-variant-subtle-neutral-subtle: #362e2d;
--badge-variant-subtle-neutral-on-subtle: #b6aba8;
--badge-variant-subtle-neutral-outline: transparent;
--badge-variant-outline-neutral-background: #0e0706;
--badge-variant-outline-neutral-foreground: #b6aba8;
--badge-variant-outline-neutral-border: #8e8480;
--badge-variant-outline-neutral-border-width: 1px;
--badge-variant-outline-neutral-shadow: none;
--badge-variant-outline-neutral-subtle: #362e2d;
--badge-variant-outline-neutral-on-subtle: #b6aba8;
--badge-variant-outline-neutral-outline: #8e8480;
--badge-primary-subtle: #371a12;
--badge-primary-on-subtle: #ff8761;
--badge-primary-outline: #d8582c;
--badge-variant-solid-primary-background: #f47247;
--badge-variant-solid-primary-foreground: #000000;
--badge-variant-solid-primary-border: #f47247;
--badge-variant-solid-primary-border-width: 1px;
--badge-variant-solid-primary-shadow: none;
--badge-variant-solid-primary-subtle: #371a12;
--badge-variant-solid-primary-on-subtle: #ff8761;
--badge-variant-solid-primary-outline: #f47247;
--badge-variant-subtle-primary-background: #371a12;
--badge-variant-subtle-primary-foreground: #ff8761;
--badge-variant-subtle-primary-border: transparent;
--badge-variant-subtle-primary-border-width: 1px;
--badge-variant-subtle-primary-shadow: none;
--badge-variant-subtle-primary-subtle: #371a12;
--badge-variant-subtle-primary-on-subtle: #ff8761;
--badge-variant-subtle-primary-outline: transparent;
--badge-variant-outline-primary-background: #0e0706;
--badge-variant-outline-primary-foreground: #ff8761;
--badge-variant-outline-primary-border: #d8582c;
--badge-variant-outline-primary-border-width: 1px;
--badge-variant-outline-primary-shadow: none;
--badge-variant-outline-primary-subtle: #371a12;
--badge-variant-outline-primary-on-subtle: #ff8761;
--badge-variant-outline-primary-outline: #d8582c;
--badge-success-subtle: #1b2716;
--badge-success-on-subtle: #68c76d;
--badge-success-outline: #3d9d45;
--badge-variant-solid-success-background: #58b75e;
--badge-variant-solid-success-foreground: #000000;
--badge-variant-solid-success-border: #58b75e;
--badge-variant-solid-success-border-width: 1px;
--badge-variant-solid-success-shadow: none;
--badge-variant-solid-success-subtle: #1b2716;
--badge-variant-solid-success-on-subtle: #68c76d;
--badge-variant-solid-success-outline: #58b75e;
--badge-variant-subtle-success-background: #1b2716;
--badge-variant-subtle-success-foreground: #68c76d;
--badge-variant-subtle-success-border: transparent;
--badge-variant-subtle-success-border-width: 1px;
--badge-variant-subtle-success-shadow: none;
--badge-variant-subtle-success-subtle: #1b2716;
--badge-variant-subtle-success-on-subtle: #68c76d;
--badge-variant-subtle-success-outline: transparent;
--badge-variant-outline-success-background: #0e0706;
--badge-variant-outline-success-foreground: #68c76d;
--badge-variant-outline-success-border: #3d9d45;
--badge-variant-outline-success-border-width: 1px;
--badge-variant-outline-success-shadow: none;
--badge-variant-outline-success-subtle: #1b2716;
--badge-variant-outline-success-on-subtle: #68c76d;
--badge-variant-outline-success-outline: #3d9d45;
--badge-warning-subtle: #302005;
--badge-warning-on-subtle: #dea227;
--badge-warning-outline: #ae7c00;
--badge-variant-solid-warning-background: #cd9200;
--badge-variant-solid-warning-foreground: #000000;
--badge-variant-solid-warning-border: #cd9200;
--badge-variant-solid-warning-border-width: 1px;
--badge-variant-solid-warning-shadow: none;
--badge-variant-solid-warning-subtle: #302005;
--badge-variant-solid-warning-on-subtle: #dea227;
--badge-variant-solid-warning-outline: #cd9200;
--badge-variant-subtle-warning-background: #302005;
--badge-variant-subtle-warning-foreground: #dea227;
--badge-variant-subtle-warning-border: transparent;
--badge-variant-subtle-warning-border-width: 1px;
--badge-variant-subtle-warning-shadow: none;
--badge-variant-subtle-warning-subtle: #302005;
--badge-variant-subtle-warning-on-subtle: #dea227;
--badge-variant-subtle-warning-outline: transparent;
--badge-variant-outline-warning-background: #0e0706;
--badge-variant-outline-warning-foreground: #dea227;
--badge-variant-outline-warning-border: #ae7c00;
--badge-variant-outline-warning-border-width: 1px;
--badge-variant-outline-warning-shadow: none;
--badge-variant-outline-warning-subtle: #302005;
--badge-variant-outline-warning-on-subtle: #dea227;
--badge-variant-outline-warning-outline: #ae7c00;
--badge-danger-subtle: #371a18;
--badge-danger-on-subtle: #ff847c;
--badge-danger-outline: #d35a55;
--badge-variant-solid-danger-background: #ef736c;
--badge-variant-solid-danger-foreground: #000000;
--badge-variant-solid-danger-border: #ef736c;
--badge-variant-solid-danger-border-width: 1px;
--badge-variant-solid-danger-shadow: none;
--badge-variant-solid-danger-subtle: #371a18;
--badge-variant-solid-danger-on-subtle: #ff847c;
--badge-variant-solid-danger-outline: #ef736c;
--badge-variant-subtle-danger-background: #371a18;
--badge-variant-subtle-danger-foreground: #ff847c;
--badge-variant-subtle-danger-border: transparent;
--badge-variant-subtle-danger-border-width: 1px;
--badge-variant-subtle-danger-shadow: none;
--badge-variant-subtle-danger-subtle: #371a18;
--badge-variant-subtle-danger-on-subtle: #ff847c;
--badge-variant-subtle-danger-outline: transparent;
--badge-variant-outline-danger-background: #0e0706;
--badge-variant-outline-danger-foreground: #ff847c;
--badge-variant-outline-danger-border: #d35a55;
--badge-variant-outline-danger-border-width: 1px;
--badge-variant-outline-danger-shadow: none;
--badge-variant-outline-danger-subtle: #371a18;
--badge-variant-outline-danger-on-subtle: #ff847c;
--badge-variant-outline-danger-outline: #d35a55;
--badge-info-subtle: #1b2332;
--badge-info-on-subtle: #73b1ff;
--badge-info-outline: #3d87e1;
--badge-variant-solid-info-background: #56a0fc;
--badge-variant-solid-info-foreground: #000000;
--badge-variant-solid-info-border: #56a0fc;
--badge-variant-solid-info-border-width: 1px;
--badge-variant-solid-info-shadow: none;
--badge-variant-solid-info-subtle: #1b2332;
--badge-variant-solid-info-on-subtle: #73b1ff;
--badge-variant-solid-info-outline: #56a0fc;
--badge-variant-subtle-info-background: #1b2332;
--badge-variant-subtle-info-foreground: #73b1ff;
--badge-variant-subtle-info-border: transparent;
--badge-variant-subtle-info-border-width: 1px;
--badge-variant-subtle-info-shadow: none;
--badge-variant-subtle-info-subtle: #1b2332;
--badge-variant-subtle-info-on-subtle: #73b1ff;
--badge-variant-subtle-info-outline: transparent;
--badge-variant-outline-info-background: #0e0706;
--badge-variant-outline-info-foreground: #73b1ff;
--badge-variant-outline-info-border: #3d87e1;
--badge-variant-outline-info-border-width: 1px;
--badge-variant-outline-info-shadow: none;
--badge-variant-outline-info-subtle: #1b2332;
--badge-variant-outline-info-on-subtle: #73b1ff;
--badge-variant-outline-info-outline: #3d87e1;
--card-variant-outlined-background: #0e0706;
--card-variant-outlined-foreground: #ede2de;
--card-variant-outlined-border: #8e8480;
--card-variant-outlined-border-width: 1px;
--card-variant-outlined-shadow: none;
--card-variant-outlined-description: #aaa09d;
--card-variant-elevated-background: #0e0706;
--card-variant-elevated-foreground: #ede2de;
--card-variant-elevated-border: transparent;
--card-variant-elevated-border-width: 1px;
--card-variant-elevated-shadow: var(--ds-shadow-lg);
--card-variant-elevated-description: #aaa09d;
--card-variant-filled-background: #201916;
--card-variant-filled-foreground: #ede2de;
--card-variant-filled-border: transparent;
--card-variant-filled-border-width: 1px;
--card-variant-filled-shadow: none;
--card-variant-filled-description: #afa6a2;
--card-description: #aaa09d;
--card-filled-description: #afa6a2;
}