:is(
  [data-theme='blue'],
  [data-theme='green'],
  [data-theme='violet'],
  [data-theme='amber'],
  [data-theme='neutral'],
  [data-theme='gray'],
  [data-theme='teal'],
  [data-theme='cyan']
) {
  --color-action-primary: var(--theme-600);
  --color-action-primary-hover: var(--theme-700);
  --color-action-primary-active: var(--theme-800);
  --color-action-primary-disabled: var(--theme-200);
  --color-content-link: var(--theme-600);
  --color-content-link-hover: var(--theme-700);
  --color-border-focus: var(--theme-500);
  --color-focus-ring: var(--theme-500);
  --color-icon-brand: var(--theme-600);
  --color-selection: var(--theme-100);
}

[data-theme='blue'] {
  --theme-100: var(--color-blue-100);
  --theme-200: var(--color-blue-200);
  --theme-500: var(--color-blue-500);
  --theme-600: var(--color-blue-600);
  --theme-700: var(--color-blue-700);
  --theme-800: var(--color-blue-800);
}

[data-theme='green'] {
  --theme-100: var(--color-green-100);
  --theme-200: var(--color-green-200);
  --theme-500: var(--color-green-500);
  --theme-600: var(--color-green-600);
  --theme-700: var(--color-green-700);
  --theme-800: var(--color-green-800);
}

[data-theme='violet'] {
  --theme-100: var(--color-violet-100);
  --theme-200: var(--color-violet-200);
  --theme-500: var(--color-violet-500);
  --theme-600: var(--color-violet-600);
  --theme-700: var(--color-violet-700);
  --theme-800: var(--color-violet-800);
}

[data-theme='amber'] {
  --theme-100: var(--color-amber-100);
  --theme-200: var(--color-amber-200);
  --theme-500: var(--color-amber-500);
  --theme-600: var(--color-amber-600);
  --theme-700: var(--color-amber-700);
  --theme-800: var(--color-amber-800);
}

[data-theme='neutral'],
[data-theme='gray'] {
  --theme-100: var(--color-gray-100);
  --theme-200: var(--color-gray-200);
  --theme-500: var(--color-gray-500);
  --theme-600: var(--color-gray-600);
  --theme-700: var(--color-gray-700);
  --theme-800: var(--color-gray-800);
}

[data-theme='teal'] {
  --theme-100: var(--color-teal-100);
  --theme-200: var(--color-teal-200);
  --theme-500: var(--color-teal-500);
  --theme-600: var(--color-teal-600);
  --theme-700: var(--color-teal-700);
  --theme-800: var(--color-teal-800);
}

[data-theme='cyan'] {
  --theme-100: var(--color-cyan-100);
  --theme-200: var(--color-cyan-200);
  --theme-500: var(--color-cyan-500);
  --theme-600: var(--color-cyan-600);
  --theme-700: var(--color-cyan-700);
  --theme-800: var(--color-cyan-800);
}

:root {
  color-scheme: light;
}

[data-color-mode='dark'] {
  color-scheme: dark;
  --color-content-primary: var(--color-neutral-50);
  --color-content-secondary: var(--color-neutral-300);
  --color-content-tertiary: var(--color-neutral-400);
  --color-content-placeholder: var(--color-neutral-500);
  --color-content-disabled: var(--color-neutral-600);
  --color-content-inverse: var(--color-neutral-950);
  --color-surface-default: var(--color-neutral-950);
  --color-surface-subtle: var(--color-neutral-900);
  --color-surface-muted: var(--color-neutral-800);
  --color-surface-emphasis: var(--color-neutral-700);
  --color-surface-inverse: var(--color-neutral-50);
  --color-surface-disabled: var(--color-neutral-800);
  --color-border-default: var(--color-neutral-700);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-strong: var(--color-neutral-500);
  --color-border-inverse: var(--color-neutral-200);
  --color-border-disabled: var(--color-neutral-700);
  --color-icon-primary: var(--color-neutral-100);
  --color-icon-secondary: var(--color-neutral-300);
  --color-icon-tertiary: var(--color-neutral-400);
  --color-icon-disabled: var(--color-neutral-600);
  --color-icon-inverse: var(--color-neutral-950);
  --color-overlay: rgb(0 0 0 / 0.7);
}

[data-color-mode='light'] {
  color-scheme: light;
}