Text variants
Select a frame or text to edit its styles.
Heading / Neutral
Heading / Primary
Heading / Success
Heading / Warning
Heading / Danger
Heading / Info
H1 / Neutral
H1 / Primary
H1 / Success
H1 / Warning
H1 / Danger
H1 / Info
H2 / Neutral
H2 / Primary
H2 / Success
H2 / Warning
H2 / Danger
H2 / Info
H3 / Neutral
H3 / Primary
H3 / Success
H3 / Warning
H3 / Danger
H3 / Info
H4 / Neutral
H4 / Primary
H4 / Success
H4 / Warning
H4 / Danger
H4 / Info
H5 / Neutral
H5 / Primary
H5 / Success
H5 / Warning
H5 / Danger
H5 / Info
H6 / Neutral
H6 / Primary
H6 / Success
H6 / Warning
H6 / Danger
H6 / Info
Paragraph / Neutral
Paragraph / Primary
Paragraph / Success
Paragraph / Warning
Paragraph / Danger
Paragraph / Info
Label / Neutral
Label / Primary
Label / Success
Label / Warning
Label / Danger
Label / Info
Caption / Neutral
Caption / Primary
Caption / Success
Caption / Warning
Caption / Danger
Caption / Info
Playground
Preview only · not exported
Playground props
Not saved to your system.
Appearance
Content
More options
About this playground
Changes affect only this sample, not Variants or saved styles. Value and Checked update the live state. Reset restores the latest saved defaults and clears interactions.
Icons use presets; icon-only buttons fall back to Plus. Custom JSX, names, styles and callbacks are not editable here.
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.
React usage
Examples from snippets.ts. Imports refer to this project; this is not a published component package.
import { Text } from "@/app/studio/components";
export function Example() {
return (
<>
{/* Variant sets appearance; as sets document semantics. */}
<Text variant="h1">Page title</Text>
<Text variant="h2">Section title</Text>
<Text variant="h3">Subsection title</Text>
<Text variant="h4">Detail title</Text>
<Text variant="h5">Small heading</Text>
<Text variant="h6">Compact heading</Text>
<Text variant="heading" as="span">Legacy heading style</Text>
<Text>Paragraph text uses the default variant and size.</Text>
<Text variant="paragraph" tone="info">An informative note.</Text>
<Text variant="label" as="span">Visual label, not a form label</Text>
<Text variant="caption" as="span" tone="primary">Updated today</Text>
<Text tone="danger" size="lg">An important warning.</Text>
{/* Local instance typography, not a new typography token. */}
<Text appearance={{ width: "fill", fontSize: 18, fontWeight: 500, lineHeight: 1.8, letterSpacing: 0.3, textAlign: "right" }}>
Locally aligned text; shared typography is unchanged.
</Text>
</>
);
}
Props and defaults
Wrapper API from the component sources and docs/component-api.md. A dash means no wrapper default; inherited Base UI defaults are identified separately. These are React API defaults, separate from saved System sample defaults and temporary Preview options.
| Prop | Type | Default | Behavior |
|---|---|---|---|
variant | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "heading" | "paragraph" | "label" | "caption" | "paragraph" | Typography style, independent of the semantic element. |
size | "sm" | "md" | "lg" | "md" | Shared size scale; density for Card. |
tone | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "neutral" | Neutral uses the theme foreground; semantic tones use their readable on-subtle color. |
as | "h1"–"h6" | "p" | "span" | By variant | Rendered element. Defaults to h2 for heading, p for paragraph and span for label or caption. |
children | ReactNode | — | Component content. |
className | string | — | Applied to the root; the field wrapper for labelled controls. |
appearance | NodeAppearance | omitted | Theme-independent instance values on the painted element. Supplied values win over native style, exact recipes and shared System Styles; omitted values inherit. These are not new CSS tokens. |
native attributes | HTML attributes for the rendered element | — | Native props for the chosen heading, paragraph or span element. |
Presentational; not a Base UI control. The variant controls visual typography, not document structure: choose as="h1" through as="h6" for the correct heading level. The label style does not render an HTML label. Size scales font size, while line height remains unitless.
Saved sample defaults — export reference
These are saved System sample defaults, not React API defaults or shared styles. The matrix uses these unless you change temporary Preview options. Preview options are session-only: they never enter System CSS/JSON, the manual ZIP or CLI output. Project editing and insertion-default authoring are paused; existing saved values are preserved.
| Parameter | Source | Value |
|---|---|---|
Text text | Built-in starter | "Bring your next idea to life." |
Variant props.variant | Built-in starter | "paragraph" |
Size props.size | Built-in starter | "md" |
Tone props.tone | Built-in starter | "neutral" |
HTML element props.as | Built-in starter | omitted |
The manual ZIP populated example uses this saved snapshot. The CLI copies component sources with their unchanged React API defaults; it does not rewrite those defaults. Optional omitted props retain their component behavior.
Exact component recipes — authored fields
System Styles edits a matrix combination and layer, not temporary Preview content. This component has 180 exact recipes; the full catalog has 294. Each stored recipe applies to matching variant/state, tone where supported, and size. Studio writes non-color edits to every supported combination at the selected size and layer; Text retains its typographic variant and shares across tones. Colors stay on the selected combination and theme. Other sizes and layers are unchanged. Existing differences are preserved until the field is edited or reset. Preview options do not select the matrix edit scope, rewrite saved defaults or change exports.
Frame edits geometry, spacing, fill, decorative border and effects; Text edits typography and ink. They share a part record but never an editable field. Only authored, CSS-consumed fields in the light theme are listed below, not unset fields or generated box/state helpers.
Per property: local appearance / field parts → native style → exact recipe → legacy shared part style → component variant/state, theme tokens and parent inheritance. Studio reset removes each field in its editing group: same-size layer non-colors across supported combinations, or the selected combination color. The exact declarations below each restore their own fallback, not a snapshot. A transparent recipe surface reveals its parent rather than the older fill. No recipe can replace the global accessible focus outline.
Each key is variant.tone.size, including the separate legacy heading and h1–h6 styles. Root supports both Frame and Text. Exact ink overrides the shared all-tone root ink, then neutral component foreground or semantic on-subtle ink. In Card Content/Footer, scoped slot typography wins over this recipe; local appearance still wins. The semantic as element does not change the recipe.
Part scopes: root (Text) — frame + text.
No authored recipe fields in this theme — component CSS fallbacks remain active.
Lengths use px; fontWeight, lineHeight and opacity are unitless; shadows reference the shared presets. Non-color fields are shared across Light and Dark, normalized from Light on import including omissions. Colors remain theme-specific. CSS export clears omitted Dark declarations so sparse Light colors do not leak.
Unedited defaults retain 150 modeled contrast pairs per theme. Recipe diagnostics add only affected opaque text, marks, painted borders and parent-surface focus pairs, including modeled Card Content/Footer children. Geometry/type-only edits do not expand the audit; opacity, local overrides and arbitrary nesting are not certified. Passing these pairs is not a blanket WCAG claim.
Shared component part styles
Legacy shared part styles apply across combinations to linked existing components as well as new insertions. Exact matrix recipes override these defaults per field. Colors belong to the light theme; dimensions, typography, spacing, border widths, opacity and shadow presets are shared across Light and Dark. Local appearance and field parts still win for the properties they supply.
Only consumed, editable metadata fields are listed. An unset variable uses the component CSS default, which can depend on variant, state, size, tone and parent inheritance; it is not a materialized token value. Generated box/alignment helpers are implementation details, not editable styles. Root/control variant paint stays in the separate variant and state reference.
Text root
| Field / CSS variable | Scope | Source | CSS declaration |
|---|---|---|---|
Width--text-part-root-width | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Height--text-part-root-height | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Min width--text-part-root-min-width | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Min height--text-part-root-min-height | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Max width--text-part-root-max-width | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Padding top--text-part-root-padding-top | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Padding right--text-part-root-padding-right | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Padding bottom--text-part-root-padding-bottom | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Padding left--text-part-root-padding-left | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Margin top--text-part-root-margin-top | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Margin right--text-part-root-margin-right | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Margin bottom--text-part-root-margin-bottom | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Margin left--text-part-root-margin-left | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Top Left radius--text-part-root-border-top-left-radius | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Top Right radius--text-part-root-border-top-right-radius | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Bottom Right radius--text-part-root-border-bottom-right-radius | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Bottom Left radius--text-part-root-border-bottom-left-radius | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Font size--text-part-root-font-size | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Font weight--text-part-root-font-weight | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Line height--text-part-root-line-height | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Letter spacing--text-part-root-letter-spacing | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Text align--text-part-root-text-align | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Background--text-part-root-background | light theme color | Inherited CSS default | Not declared — component CSS fallback |
Color--text-part-root-color | light theme color | Inherited CSS default | Not declared — component CSS fallback |
Border color--text-part-root-border-color | light theme color | Inherited CSS default | Not declared — component CSS fallback |
Border width--text-part-root-border-width | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Shadow--text-part-root-shadow | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Opacity--text-part-root-opacity | Shared dimension / effect | Inherited CSS default | Not declared — component CSS fallback |
Reset removes an authored key to restore its CSS fallback, not a fixed copy of today’s value. Lengths use px; fontWeight, lineHeight and opacity are unitless. CSS export resets omitted Dark variables to initial where necessary, so Light’s sparse overrides cannot leak into Dark.
The contrast audit models opaque field-part, Card-slot and Text colors. Legacy shared Card Content/Footer typography styles the slot itself, not nested Text or Button/Badge labels; exact Card recipes have the descendant scope described above. The audit does not certify local appearance, opacity compositing, arbitrary nested/external surfaces, shadows or focus geometry. Review the rendered composition in both themes.
Local instance appearance (not tokens)
appearance overrides only this instance, taking precedence over System Styles. It targets the Input shell, Switch track, Checkbox box, or the component root. Unset values keep their shared part, theme, variant and state inheritance. Lengths are pixels; lineHeight is unitless. Colors are six-digit hex (background and borderColor also accept transparent); shadow uses the existing none/sm/md/lg presets.
Consumed primary fields: width, height, minWidth, minHeight, maxWidth, paddingTop, paddingRight, paddingBottom, paddingLeft, marginTop, marginRight, marginBottom, marginLeft, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, background, color, borderColor, borderWidth, shadow, opacity.
width/height accept a finite number, hug or fill; minWidth/minHeight are numeric and maxWidth also accepts fill. Hug means fit-content width or auto height. Fill is 100% of the containing block, not flex-grow.
Reset by omitting a React appearance key; page-document update commands use null to reset a field, part or entire override object. Values are stored in the page and copied into TSX, not exported as new theme CSS variables. Local colors and opacity can fail contrast even when the token audit passes; review both themes. Decorative borders and shadows never replace the shared focus outline.
Typography reference
Shared font family and resolved values for the current theme. Text variants use these CSS variables; size sm/lg scales only font size with --ds-size-scale-sm/lg, while md uses the base size. Variant is visual; use as to choose semantic markup. Tone selects --ds-foreground (neutral) or --ds-{tone}-on-subtle.
Font family preset: system · --ds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Base size: --ds-font-size: 14px. Shared by Light and Dark.
| Variant | Preview | Font size | Line height | Font weight | Letter spacing |
|---|---|---|---|---|---|
| heading | The quick brown fox | --ds-typography-heading-font-size32px | --ds-typography-heading-line-height1.2 | --ds-typography-heading-font-weight700 | --ds-typography-heading-letter-spacing-0.5px |
| h1 | The quick brown fox | --ds-typography-h1-font-size48px | --ds-typography-h1-line-height1.1 | --ds-typography-h1-font-weight700 | --ds-typography-h1-letter-spacing-1px |
| h2 | The quick brown fox | --ds-typography-h2-font-size40px | --ds-typography-h2-line-height1.15 | --ds-typography-h2-font-weight700 | --ds-typography-h2-letter-spacing-0.75px |
| h3 | The quick brown fox | --ds-typography-h3-font-size32px | --ds-typography-h3-line-height1.2 | --ds-typography-h3-font-weight700 | --ds-typography-h3-letter-spacing-0.5px |
| h4 | The quick brown fox | --ds-typography-h4-font-size28px | --ds-typography-h4-line-height1.25 | --ds-typography-h4-font-weight600 | --ds-typography-h4-letter-spacing-0.35px |
| h5 | The quick brown fox | --ds-typography-h5-font-size24px | --ds-typography-h5-line-height1.3 | --ds-typography-h5-font-weight600 | --ds-typography-h5-letter-spacing-0.25px |
| h6 | The quick brown fox | --ds-typography-h6-font-size20px | --ds-typography-h6-line-height1.35 | --ds-typography-h6-font-weight600 | --ds-typography-h6-letter-spacing0px |
| paragraph | The quick brown fox | --ds-typography-paragraph-font-size16px | --ds-typography-paragraph-line-height1.5 | --ds-typography-paragraph-font-weight400 | --ds-typography-paragraph-letter-spacing0px |
| label | The quick brown fox | --ds-typography-label-font-size14px | --ds-typography-label-line-height1.4 | --ds-typography-label-font-weight500 | --ds-typography-label-letter-spacing0px |
| caption | The quick brown fox | --ds-typography-caption-font-size12px | --ds-typography-caption-line-height1.4 | --ds-typography-caption-font-weight400 | --ds-typography-caption-letter-spacing0px |
Token inheritance
Live base aliases for this component. Overrides replace inheritance, even when equal to the global value. Variants, tones, sizes and states may use additional tokens; these are not computed element styles.
Among legacy aliases, only --text-foreground affects Text (neutral tone). Other tones use --ds-*-on-subtle; --text-part-root-color, when authored, overrides every tone. Typography inherits shared --ds-typography-* defaults beneath shared part styles, exact recipes, scoped Card Content/Footer typography and local appearance. Unused legacy aliases remain in CSS/JSON backups.
| Alias CSS name | Source | Resolved value |
|---|---|---|
--text-foreground | Inherited: --ds-foreground | #201916 |
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;
}