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.
Colors
These are the light theme’s live color roles. Light and dark have independent colors, scales, and component color overrides. Values below follow the CSS export, not a static palette.
Global color roles
Surface and semantic roles include foreground partners for readable content on their fills. Use the CSS variable in styles; copy a name or value from the table.
| Token | CSS variable | Value |
|---|---|---|
| Background | --ds-background | #fff8f6 |
| Foreground | --ds-foreground | #201916 |
| Muted | --ds-muted | #fff4f1 |
| Muted foreground | --ds-muted-foreground | #796f6c |
| Border | --ds-border | #8e8480 |
| Primary | --ds-primary | #e8673c |
| On primary | --ds-on-primary | #291b15 |
| Secondary | --ds-secondary | #81711d |
| On secondary | --ds-on-secondary | #ffffff |
| Success | --ds-success | #1c822b |
| On success | --ds-on-success | #ffffff |
| Warning | --ds-warning | #946900 |
| On warning | --ds-on-warning | #ffffff |
| Danger | --ds-danger | #bb4441 |
| On danger | --ds-on-danger | #ffffff |
| Info | --ds-info | #2671c9 |
| On info | --ds-on-info | #ffffff |
Color ramp
Seven live theme roles, each with 11 light-to-dark stops. Swatches and values follow the exported --ds-{role}-{stop} CSS variables, including overrides. Scroll horizontally to see every stop.
| Role | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| neutral | --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 |
| primary | --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 |
| secondary | --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 |
| success | --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 |
| warning | --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 |
| danger | --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 |
| info | --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 |
Component color tokens
Each component has background, foreground, and border aliases. A declared override replaces the inherited global value even if they currently match. Variant/tone-specific styles below list the actual resolved CSS variables consumed by the component.
| Component | CSS variable | Source | Resolved value |
|---|---|---|---|
| Button | --button-background | Inherited from --ds-primary | #e8673c |
| Button | --button-foreground | Inherited from --ds-on-primary | #291b15 |
| Button | --button-border | Inherited from --ds-border | #8e8480 |
| Input | --input-background | Inherited from --ds-background | #fff8f6 |
| Input | --input-foreground | Inherited from --ds-foreground | #201916 |
| Input | --input-border | Inherited from --ds-border | #8e8480 |
| Card | --card-background | Inherited from --ds-background | #fff8f6 |
| Card | --card-foreground | Inherited from --ds-foreground | #201916 |
| Card | --card-border | Inherited from --ds-border | #8e8480 |
| Badge | --badge-background | Inherited from --ds-background | #fff8f6 |
| Badge | --badge-foreground | Inherited from --ds-foreground | #201916 |
| Badge | --badge-border | Inherited from --ds-border | #8e8480 |
| Switch | --switch-background | Inherited from --ds-primary | #e8673c |
| Switch | --switch-foreground | Inherited from --ds-on-primary | #291b15 |
| Switch | --switch-border | Inherited from --ds-border | #8e8480 |
| Checkbox | --checkbox-background | Inherited from --ds-primary | #e8673c |
| Checkbox | --checkbox-foreground | Inherited from --ds-on-primary | #291b15 |
| Checkbox | --checkbox-border | Inherited from --ds-border | #8e8480 |
| Text | --text-foreground | Inherited from --ds-foreground | #201916 |
Derived color variables
Hover, active, subtle, on-subtle, outline, focus, and component-specific colors are computed from the current theme and overrides. They are not separate editable roles; use these variables for states and readable text.
| CSS variable | Value |
|---|---|
--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-hover | #e6653a |
--button-active | #e26237 |
--badge-neutral-subtle | #e9e2e0 |
--badge-neutral-on-subtle | #645c58 |
--badge-neutral-outline | #8d8480 |
--badge-primary-subtle | #fdeae3 |
--badge-primary-on-subtle | #a23200 |
--badge-primary-outline | #d8582c |
--badge-success-subtle | #e8ece2 |
--badge-success-on-subtle | #00721b |
--badge-success-outline | #3e9d46 |
--badge-warning-subtle | #f4eadd |
--badge-warning-on-subtle | #7a5600 |
--badge-warning-outline | #aa7e26 |
--badge-danger-subtle | #f8e6e4 |
--badge-danger-on-subtle | #a32d2d |
--badge-danger-outline | #d35a55 |
--badge-info-subtle | #e9ebf2 |
--badge-info-on-subtle | #075cb2 |
--badge-info-outline | #3d87e1 |
--card-description | #635c59 |
--card-filled-description | #635b58 |
CSS variable reference
Use global roles and scales with var(--ds-…), or a component alias with var(--button-…). The exported CSS contains both light and dark selectors; the active theme determines the resolved color.
.example {
color: var(--ds-foreground);
background: var(--ds-background);
border-color: var(--ds-border);
outline-color: var(--ds-primary-focus);
}
.example--accent { background: var(--ds-primary-500); }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;
}