@utility primary {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-primary);
  --coloring-on-color: var(--color-on-primary);
  --coloring-hover: var(--color-primary-hover);
}

@utility secondary {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-secondary);
  --coloring-on-color: var(--color-on-secondary);
  --coloring-hover: var(--color-secondary-hover);
}

@utility positive {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-positive);
  --coloring-on-color: var(--color-on-positive);
  --coloring-hover: var(--color-positive-hover);
}

@utility negative {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-negative);
  --coloring-on-color: var(--color-on-negative);
  --coloring-hover: var(--color-negative-hover);
}

@utility warning {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-warning);
  --coloring-on-color: var(--color-on-warning);
  --coloring-hover: var(--color-warning-hover);
}

@utility neutral {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-neutral);
  --coloring-on-color: var(--color-on-neutral);
  --coloring-hover: var(--color-neutral-hover);
  --coloring-text: var(--color-neutral-text);
  --coloring-text-hover: var(--color-neutral-text-hover);
  --coloring-outline: var(--color-neutral-outline);
  --coloring-outline-hover: var(--color-neutral-outline-hover);
  --coloring-tonal: var(--color-neutral-tonal);
  --coloring-tonal-text: var(--color-neutral-tonal-text);
  --coloring-tonal-background: var(--color-neutral-tonal-background);
  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
}

@utility disabled {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-disabled);
  --coloring-on-color: var(--color-on-disabled);
  --coloring-hover: var(--color-disabled);
  --coloring-text-hover: transparent;
}

@utility description {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-description);
}

@utility surface {
  @apply coloring-reset-variables;
  --coloring-color: var(--color-surface);
  --coloring-on-color: var(--color-on-surface);
  --coloring-hover: var(--color-surface-hover);
}

@utility coloring-style-detect {
  @apply data-[coloringstyle=solid]:coloring-solid;
  @apply data-[coloringstyle=text]:coloring-text;
  @apply data-[coloringstyle=outline]:coloring-outline;
  @apply data-[coloringstyle=tonal]:coloring-tonal;
}

@utility coloring-style-hover-detect {
  @apply data-[coloringstyle=solid]:coloring-solid-hover;
  @apply data-[coloringstyle=text]:coloring-text-hover;
  @apply data-[coloringstyle=outline]:coloring-outline-hover;
  @apply data-[coloringstyle=tonal]:coloring-tonal-hover;
}

@utility coloring-color-detect {
  @apply data-[color=primary]:primary;
  @apply data-[color=secondary]:secondary;
  @apply data-[color=positive]:positive;
  @apply data-[color=warning]:warning;
  @apply data-[color=negative]:negative;
  @apply data-[color=neutral]:neutral;
  @apply data-[color=description]:description;
  @apply data-[color=surface]:surface;
  @apply data-[color=disabled]:disabled;
}