/* Hugo Blox Custom Color Utilities for Tailwind v4 */
/* 
 * Standard color utilities (bg-*, text-*, border-*, hover:*, dark:*, from-*, to-*, etc.) 
 * are automatically generated by Tailwind v4 from colors defined in @theme block.
 * 
 * This file only contains custom utilities not auto-generated by Tailwind.
 */

@layer utilities {
  /* Custom Hugo Blox Dark Color */
  .bg-hb-dark {
    background-color: var(--color-hb-dark, rgb(23 24 28));
  }
  .text-hb-dark {
    color: var(--color-hb-dark, rgb(23 24 28));
  }
  .border-hb-dark {
    border-color: var(--color-hb-dark, rgb(23 24 28));
  }

  /* Dark mode variants */
  .dark\:bg-hb-dark:where(.dark, .dark *) {
    background-color: var(--color-hb-dark, rgb(23 24 28));
  }
  .dark\:text-hb-dark:where(.dark, .dark *) {
    color: var(--color-hb-dark, rgb(23 24 28));
  }
}

/* 
 * Available Auto-Generated Utilities (from @theme colors):
 * 
 * Standard Colors: gray, slate, zinc, neutral, stone
 * Theme Colors: primary, secondary (overridden by theme files)
 * 
 * Auto-generated utilities include:
 * - Background: .bg-{color}-{shade}
 * - Text: .text-{color}-{shade}  
 * - Border: .border-{color}-{shade}
 * - Hover: .hover:bg-{color}-{shade}, .hover:text-{color}-{shade}
 * - Dark: .dark:bg-{color}-{shade}, .dark:text-{color}-{shade}
 * - Gradients: .from-{color}-{shade}, .to-{color}-{shade}
 * - Focus: .focus:ring-{color}-{shade}
 * - And all other Tailwind color variants
 * 
 * Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
 */
