:root {
  --ui-surface: var(--neutral-1);
  --ui-surface-raised: var(--neutral-2);
  --ui-surface-strong: var(--neutral-3);
  --ui-text: var(--neutral-12);
  --ui-text-dim: var(--neutral-9-dim);
  --ui-border: color-mix(in oklab, var(--neutral-7) 28%, transparent);
  --ui-border-strong: color-mix(in oklab, var(--neutral-8) 40%, transparent);
  --ui-focus: var(--primary-7);
  --ui-shadow: var(--shadow-2);
  --ui-radius-sm: var(--border-radius-3);
  --ui-radius-md: var(--border-radius-4);
  --ui-radius-lg: var(--border-radius-5);
  --ui-control-height-sm: var(--size-5);
  --ui-control-height-md: var(--size-6);
  --ui-control-height-lg: var(--size-8);
  --ui-icon-xs: var(--font-size--2);
  --ui-icon-sm: var(--font-size-0);
  --ui-icon-md: var(--font-size-1);
  --ui-icon-lg: var(--font-size-2);
  --ui-icon-xl: var(--font-size-3);
  --field-stack-gap: var(--size-0);
  --field-radius: var(--radius-field, var(--border-radius-1));
  --field-label-color: var(--ui-text);
  --field-label-font-size: var(--font-size--1);
  --field-label-line-height: var(--line-height-1, 1.3);
  --field-label-font-weight: var(--font-weight-7, 700);
  --field-description-color: var(--ui-text-dim);
  --field-description-font-size: var(--font-size--2);
  --field-description-line-height: var(--line-height-2, 1.4);
  --field-error-color: var(--error-7);
  --scrollbar-size: var(--size-2);
  --scrollbar-radius: var(--border-radius-pill, 999px);
  --scrollbar-track: color-mix(in oklab, var(--ui-surface-strong) 38%, var(--ui-surface));
  --scrollbar-thumb: color-mix(in oklab, var(--neutral-6) 58%, var(--ui-surface-raised));
  --scrollbar-thumb-hover: color-mix(in oklab, var(--neutral-7) 62%, var(--ui-surface-raised));
  --scrollbar-thumb-border: color-mix(in oklab, var(--ui-surface) 72%, var(--ui-surface-raised));
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}

*::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-thumb-border);
  border-radius: var(--scrollbar-radius);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}