[data-content-color] {
  --content-color-bg: color-mix(in srgb, var(--content-color) 85%, transparent);
  --content-color-text: var(--content-color-contrast, var(--ui-text-primary));
  --content-color-border: color-mix(in srgb, var(--content-color) 58%, transparent);
  --content-color-hover-bg: color-mix(in srgb, var(--content-color) 24%, transparent);
  --content-color-active-bg: color-mix(in srgb, var(--content-color) 32%, transparent);
  --content-color-muted-bg: color-mix(in srgb, var(--content-color) 20%, var(--ui-surface-raised));
  --content-color-muted-text: inherit;
  --content-color-action-text: var(--content-color-text);
  --content-color-btn-primary-bg: var(--ui-surface-transparent);
  --content-color-btn-primary-border: color-mix(in srgb, var(--content-color-action-text) 62%, var(--ui-surface-raised));
  --content-color-btn-secondary-bg: var(--ui-surface-transparent);
  --content-color-btn-secondary-border: color-mix(in srgb, var(--ui-text-secondary) 46%, var(--ui-surface-raised));
  --content-color-btn-danger-bg: var(--ui-surface-transparent);
  --content-color-btn-danger-border: color-mix(in srgb, var(--ui-color-danger) 62%, var(--ui-surface-raised));
  --content-color-btn-info-bg: var(--ui-surface-transparent);
  --content-color-btn-info-border: color-mix(in srgb, var(--ui-color-info-strong) 62%, var(--ui-surface-raised));
  --content-color-focus-ring: 0 0 0 3px color-mix(in srgb, var(--content-color) 34%, transparent);
}

.content-color-surface {
  background-color: var(--content-color-bg, var(--ui-surface-raised));
  border-color: var(--content-color-border, var(--ui-border-subtle));
  color: var(--content-color-text, var(--ui-text-primary));
}

.content-color-muted-surface {
  background-color: var(--content-color-muted-bg, var(--ui-surface-muted));
  border-color: var(--content-color-border, var(--ui-border-subtle));
  color: var(--content-color-muted-text, var(--ui-text-primary));
}

.content-color-action-surface {
  background-color: var(--content-color-bg, var(--ui-color-action));
  border-color: var(--content-color-border, var(--ui-color-action));
  color: var(--content-color-action-text, var(--ui-text-on-accent));
}

.content-color-action-surface:hover {
  background-color: var(--content-color-hover-bg, var(--ui-color-action-hover));
  color: var(--content-color-action-text, var(--ui-text-on-accent));
}

.content-color-action-surface:active,
.content-color-action-surface.active {
  background-color: var(--content-color-active-bg, var(--ui-color-action-active));
  color: var(--content-color-action-text, var(--ui-text-on-accent));
}

.content-color-action-surface:focus-visible {
  box-shadow: var(--content-color-focus-ring, var(--ui-focus-ring));
  outline: 0;
}