@utility coloring-solid {
  @apply bg-[var(--coloring-solid-color,var(--coloring-color))]
  text-[var(--coloring-solid-text,var(--coloring-on-color))];
}

@utility coloring-solid-hover {
  @apply coloring-solid
  hover:bg-[var(--coloring-solid-hover,var(--coloring-hover))];
}

@utility coloring-tonal {
  @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
  text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
}

@utility coloring-tonal-hover {
  @apply coloring-tonal
  hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
}

@utility coloring-text {
  @apply text-[var(--coloring-text,var(--coloring-color))];
}

@utility coloring-text-hover {
  @apply coloring-text
  hover:bg-[var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)))]/20;
}

@utility coloring-outline {
  border-width: var(--coloring-outline-width, 0.125rem);
  @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
  @apply text-[var(--coloring-outline,var(--coloring-color))];
}

@utility coloring-outline-hover {
  @apply coloring-outline
  hover:border-[var(--coloring-border-hover,--coloring-hover)]
  hover:text-[var(--coloring-outline-hover,var(--coloring-hover))];
}

@utility coloring-reset-variables {
  --coloring-color: initial;
  --coloring-on-color: initial;
  --coloring-hover: initial;
  --coloring-text: initial;
  --coloring-text-hover: initial;
  --coloring-outline: initial;
  --coloring-outline-hover: initial;
  --coloring-tonal: initial;
  --coloring-tonal-background: initial;
  --coloring-tonal-text: initial;
  --coloring-tonal-hover: initial;
}