/* Score Ring Components
 * Circular progress rings for nutrition scores
 * Using Tailwind v4 @utility with @layer components
 */

@utility score-ring {
  @layer components {
    @apply flex flex-col items-center text-center;
  }
}

@utility score-ring__svg-wrapper {
  @layer components {
    @apply relative w-24 h-24;
  }
}

@utility score-ring__svg {
  @layer components {
    @apply w-24 h-24;
  }
}

@utility score-ring__center {
  @layer components {
    @apply absolute inset-0 flex flex-col items-center justify-center;
  }
}

@utility score-ring__value {
  @layer components {
    @apply text-sm font-bold text-gray-800 leading-tight;
  }
}

@utility score-ring__unit {
  @layer components {
    @apply text-xs text-gray-400 leading-none;
  }
}

@utility score-ring__value2 {
  @layer components {
    @apply text-xs font-medium leading-none mt-0.5;
  }
}

@utility score-ring__label {
  @layer components {
    @apply text-xs font-semibold text-gray-700 mt-2;
  }
}

@utility score-ring__subtitle {
  @layer components {
    @apply text-xs text-gray-400 mt-0.5;
  }
}