[data-preset="uix"] {
  --color-base-white: #FFFFFF;
  --color-base-black: #000000;
  --color-primary-50: #F0F6FF;
  --color-primary-100: #DFEAFF;
  --color-primary-200: #C5DAFF;
  --color-primary-300: #9EC1FF;
  --color-primary-400: #6B9EFF;
  --color-primary-500: #3F80FF;
  --color-primary-600: #1C64F2;
  --color-primary-700: #0A51D8;
  --color-primary-800: #0C44B2;
  --color-primary-900: #143D8D;
  --color-primary-950: #0A2353;
  --color-secondary-50: #FFF2EE;
  --color-secondary-100: #FFE3D9;
  --color-secondary-200: #FFCCBA;
  --color-secondary-300: #FFA787;
  --color-secondary-400: #FF5C02;
  --color-secondary-500: #E45100;
  --color-secondary-600: #C14300;
  --color-secondary-700: #A43800;
  --color-secondary-800: #892D00;
  --color-secondary-900: #752600;
  --color-secondary-950: #461300;
  --color-neutral-50: #FAFAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EA;
  --color-neutral-300: #D2D5DA;
  --color-neutral-400: #9CA1A7;
  --color-neutral-500: #6E7278;
  --color-neutral-600: #50555A;
  --color-neutral-700: #3D4146;
  --color-neutral-800: #25292E;
  --color-neutral-900: #16191D;
  --color-neutral-950: #090A0D;
  --color-error-50: #FFF2F0;
  --color-error-300: #FFA59A;
  --color-error-500: #E02E2E;
  --color-error-800: #9A000E;
  --color-error-950: #4B0A09;
  --color-warning-50: #FFF3E7;
  --color-warning-300: #F59E0B;
  --color-warning-500: #BB7700;
  --color-warning-800: #704500;
  --color-warning-950: #382000;
  --color-success-50: #EFF8F3;
  --color-success-300: #90D1B1;
  --color-success-500: #10B981;
  --color-success-800: #006040;
  --color-success-950: #002F1E;
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display-large: 76px;
  --text-display-large--line-height: 1.1;
  --text-display-large--letter-spacing: -0.02em;
  --text-display-large--font-weight: 700;
  --text-display-medium: 62px;
  --text-display-medium--line-height: 1.1;
  --text-display-medium--letter-spacing: -0.02em;
  --text-display-medium--font-weight: 700;
  --text-heading-1: 48px;
  --text-heading-1--line-height: 1.15;
  --text-heading-1--letter-spacing: -0.01em;
  --text-heading-1--font-weight: 700;
  --text-heading-2: 40px;
  --text-heading-2--line-height: 1.15;
  --text-heading-2--letter-spacing: -0.01em;
  --text-heading-2--font-weight: 700;
  --text-heading-3: 32px;
  --text-heading-3--line-height: 1.25;
  --text-heading-3--letter-spacing: -0.01em;
  --text-heading-3--font-weight: 600;
  --text-heading-4: 26px;
  --text-heading-4--line-height: 1.35;
  --text-heading-4--letter-spacing: 0em;
  --text-heading-4--font-weight: 600;
  --text-heading-5: 20px;
  --text-heading-5--line-height: 1.35;
  --text-heading-5--letter-spacing: 0em;
  --text-heading-5--font-weight: 600;
  --text-heading-6: 18px;
  --text-heading-6--line-height: 1.5;
  --text-heading-6--letter-spacing: 0em;
  --text-heading-6--font-weight: 600;
  --text-title-large: 20px;
  --text-title-large--line-height: 1.35;
  --text-title-large--letter-spacing: 0em;
  --text-title-large--font-weight: 500;
  --text-title-medium: 18px;
  --text-title-medium--line-height: 1.5;
  --text-title-medium--letter-spacing: 0em;
  --text-title-medium--font-weight: 500;
  --text-title-small: 16px;
  --text-title-small--line-height: 1.5;
  --text-title-small--letter-spacing: 0em;
  --text-title-small--font-weight: 500;
  --text-subtitle-large: 18px;
  --text-subtitle-large--line-height: 1.4;
  --text-subtitle-large--letter-spacing: 0em;
  --text-subtitle-large--font-weight: 500;
  --text-subtitle-medium: 16px;
  --text-subtitle-medium--line-height: 1.4;
  --text-subtitle-medium--letter-spacing: 0em;
  --text-subtitle-medium--font-weight: 500;
  --text-subtitle-small: 14px;
  --text-subtitle-small--line-height: 1.4;
  --text-subtitle-small--letter-spacing: 0em;
  --text-subtitle-small--font-weight: 500;
  --text-body-xl: 20px;
  --text-body-xl--line-height: 1.35;
  --text-body-xl--letter-spacing: 0em;
  --text-body-xl--font-weight: 400;
  --text-body-large: 18px;
  --text-body-large--line-height: 1.5;
  --text-body-large--letter-spacing: 0em;
  --text-body-large--font-weight: 400;
  --text-body-medium: 16px;
  --text-body-medium--line-height: 1.5;
  --text-body-medium--letter-spacing: 0em;
  --text-body-medium--font-weight: 400;
  --text-body-small: 14px;
  --text-body-small--line-height: 1.5;
  --text-body-small--letter-spacing: 0em;
  --text-body-small--font-weight: 400;
  --text-body-xs: 12px;
  --text-body-xs--line-height: 1.5;
  --text-body-xs--letter-spacing: 0em;
  --text-body-xs--font-weight: 400;
  --text-label-large: 16px;
  --text-label-large--line-height: 1.5;
  --text-label-large--letter-spacing: 0em;
  --text-label-large--font-weight: 500;
  --text-label-medium: 14px;
  --text-label-medium--line-height: 1.5;
  --text-label-medium--letter-spacing: 0em;
  --text-label-medium--font-weight: 500;
  --text-label-small: 12px;
  --text-label-small--line-height: 1.5;
  --text-label-small--letter-spacing: 0.01em;
  --text-label-small--font-weight: 500;
  --text-caption: 12px;
  --text-caption--line-height: 1.35;
  --text-caption--letter-spacing: 0.01em;
  --text-caption--font-weight: 400;
  --text-caption-small: 11px;
  --text-caption-small--line-height: 1.35;
  --text-caption-small--letter-spacing: 0.01em;
  --text-caption-small--font-weight: 400;
  --text-overline: 12px;
  --text-overline--line-height: 1.35;
  --text-overline--letter-spacing: 0.08em;
  --text-overline--font-weight: 600;
  --text-code-large: 16px;
  --text-code-large--line-height: 1.5;
  --text-code-large--letter-spacing: 0em;
  --text-code-large--font-weight: 400;
  --text-code: 14px;
  --text-code--line-height: 1.5;
  --text-code--letter-spacing: 0em;
  --text-code--font-weight: 400;
  --text-code-small: 12px;
  --text-code-small--line-height: 1.5;
  --text-code-small--letter-spacing: 0em;
  --text-code-small--font-weight: 400;
  --shadow-xs: 0px 1px 2px 0px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 5%, transparent);
  --shadow-sm: 0px 1px 3px 0px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 10%, transparent), 0px 1px 2px -1px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 6%, transparent);
  --shadow-md: 0px 4px 8px -2px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 10%, transparent), 0px 2px 4px -2px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 6%, transparent);
  --shadow-lg: 0px 12px 16px -4px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 8%, transparent), 0px 4px 6px -2px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 3%, transparent);
  --shadow-xl: 0px 20px 24px -4px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 8%, transparent), 0px 8px 8px -4px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 3%, transparent);
  --shadow-2xl: 0px 24px 48px -12px color-mix(in srgb, var(--shadow-color, rgb(0 0 0)) 18%, transparent);
}

@media (max-width: 1023.98px) {
[data-preset="uix"] {
  --text-display-large: 68px;
  --text-display-medium: 56px;
  --text-heading-1: 44px;
  --text-heading-2: 36px;
  --text-heading-3: 30px;
  --text-heading-4: 24px;
}
}

@media (max-width: 767.98px) {
[data-preset="uix"] {
  --text-display-large: 58px;
  --text-display-medium: 48px;
  --text-heading-1: 38px;
  --text-heading-2: 32px;
  --text-heading-3: 28px;
  --text-heading-4: 23px;
}
}

[data-preset="uix"] {
  --bg-canvas: var(--color-neutral-50);
  --bg-surface: var(--color-base-white);
  --bg-subtle: var(--color-neutral-100);
  --bg-muted: var(--color-neutral-200);
  --bg-inverse: var(--color-neutral-900);
  --bg-disabled: var(--color-neutral-100);
  --bg-overlay: var(--color-neutral-950);
  --bg-brand: var(--color-primary-600);
  --bg-brand-hover: var(--color-primary-700);
  --bg-brand-pressed: var(--color-primary-800);
  --bg-brand-subtle: var(--color-primary-50);
  --bg-secondary: var(--color-secondary-600);
  --bg-secondary-hover: var(--color-secondary-700);
  --bg-secondary-pressed: var(--color-secondary-800);
  --bg-secondary-subtle: var(--color-secondary-50);
  --bg-danger: var(--color-error-500);
  --bg-danger-hover: var(--color-error-800);
  --bg-danger-pressed: var(--color-error-800);
  --bg-danger-subtle: var(--color-error-50);
  --bg-warning: var(--color-warning-500);
  --bg-warning-subtle: var(--color-warning-50);
  --bg-success: var(--color-success-500);
  --bg-success-subtle: var(--color-success-50);
  --bg-info: var(--color-primary-500);
  --bg-info-subtle: var(--color-primary-50);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-400);
  --text-inverse: var(--color-base-white);
  --text-on-brand: var(--color-base-white);
  --text-on-secondary: var(--color-base-white);
  --text-on-danger: var(--color-base-white);
  --text-brand: var(--color-primary-600);
  --text-danger: var(--color-error-800);
  --text-warning: var(--color-warning-800);
  --text-success: var(--color-success-800);
  --text-info: var(--color-primary-700);
  --border-default: var(--color-neutral-200);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-400);
  --border-brand: var(--color-primary-500);
  --border-focus: var(--color-primary-400);
  --border-danger: var(--color-error-500);
  --border-warning: var(--color-warning-500);
  --border-success: var(--color-success-500);
  --icon-primary: var(--color-neutral-700);
  --icon-secondary: var(--color-neutral-500);
  --icon-brand: var(--color-primary-600);
  --icon-on-brand: var(--color-base-white);
  --icon-danger: var(--color-error-500);
  --icon-warning: var(--color-warning-500);
  --icon-success: var(--color-success-500);
  --shadow-color: var(--color-neutral-950);
}

[data-theme="dark"] [data-preset="uix"], [data-preset="uix"][data-theme="dark"] {
  --bg-canvas: var(--color-neutral-950);
  --bg-surface: var(--color-neutral-900);
  --bg-subtle: var(--color-neutral-800);
  --bg-muted: var(--color-neutral-700);
  --bg-inverse: var(--color-neutral-50);
  --bg-disabled: var(--color-neutral-800);
  --bg-overlay: var(--color-neutral-950);
  --bg-brand: var(--color-primary-600);
  --bg-brand-hover: var(--color-primary-700);
  --bg-brand-pressed: var(--color-primary-800);
  --bg-brand-subtle: var(--color-primary-950);
  --bg-secondary: var(--color-secondary-400);
  --bg-secondary-hover: var(--color-secondary-300);
  --bg-secondary-pressed: var(--color-secondary-200);
  --bg-secondary-subtle: var(--color-secondary-950);
  --bg-danger: var(--color-error-500);
  --bg-danger-hover: var(--color-error-800);
  --bg-danger-pressed: var(--color-error-800);
  --bg-danger-subtle: var(--color-error-950);
  --bg-warning: var(--color-warning-300);
  --bg-warning-subtle: var(--color-warning-950);
  --bg-success: var(--color-success-500);
  --bg-success-subtle: var(--color-success-950);
  --bg-info: var(--color-primary-400);
  --bg-info-subtle: var(--color-primary-950);
  --text-primary: var(--color-neutral-50);
  --text-secondary: var(--color-neutral-300);
  --text-tertiary: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-600);
  --text-inverse: var(--color-neutral-900);
  --text-on-brand: var(--color-base-white);
  --text-on-secondary: var(--color-neutral-950);
  --text-on-danger: var(--color-base-white);
  --text-brand: var(--color-primary-400);
  --text-danger: var(--color-error-300);
  --text-warning: var(--color-warning-300);
  --text-success: var(--color-success-300);
  --text-info: var(--color-primary-300);
  --border-default: var(--color-neutral-700);
  --border-subtle: var(--color-neutral-800);
  --border-strong: var(--color-neutral-500);
  --border-brand: var(--color-primary-400);
  --border-focus: var(--color-primary-500);
  --border-danger: var(--color-error-300);
  --border-warning: var(--color-warning-300);
  --border-success: var(--color-success-300);
  --icon-primary: var(--color-neutral-200);
  --icon-secondary: var(--color-neutral-400);
  --icon-brand: var(--color-primary-400);
  --icon-on-brand: var(--color-base-white);
  --icon-danger: var(--color-error-300);
  --icon-warning: var(--color-warning-300);
  --icon-success: var(--color-success-300);
  --shadow-color: var(--color-base-black);
}

[data-preset="uix"] {
  --uix-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --uix-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --uix-fast: 140ms;
  --uix-base: 220ms;
  --uix-slow: 360ms;
}

[data-preset="uix"] { font-family: var(--font-body); color: var(--text-primary); }