@layer theme, base, components, utilities;

/* HeroUI v3 Styles - Layered Theme Architecture */

/* Base layer - Tailwind CSS v4 */



/* Base styles */



/* Base component structures (unstyled) */


/* Default theme (variables + component customizations) */


/* Utilities */
/* === Focus Ring === */
@utility focus-ring {
  @apply ring-2 ring-focus ring-offset-0 ring-offset-background outline-none;
  /* Overrides the ring offset from the theme variables */
  --tw-ring-offset-width: var(--ring-offset-width);
}

@utility focus-field-ring {
  @apply ring-2 ring-focus ring-offset-0 outline-none;
  /* No separation - ring sits directly against the element */
  --tw-ring-offset-width: 0px;
}

@utility invalid-field-ring {
  /* Unfocused: show 1px outline */
  @apply outline-1 outline-danger outline-solid;
  --tw-ring-offset-width: 3px;

  /* Focused: show 2px ring in danger color, remove outline */
  &:focus,
  &:focus-visible,
  &[data-focused="true"],
  &[data-focus-visible="true"],
  &:focus-within,
  &[data-focus-within="true"] {
    @apply ring-2 ring-danger ring-offset-0;
    --tw-ring-offset-width: 0px;
  }
}

@utility no-highlight {
  -webkit-tap-highlight-color: transparent;
}

/**
 * Widens the pressable area of a control smaller than the 24px minimum target size
 * (WCAG 2.5.8) with a transparent centred overlay, leaving its size, its visible content
 * and the surrounding layout untouched. The host must establish a containing block
 * (`relative` or `absolute`), otherwise the overlay escapes to the nearest one.
 */
@utility touch-target {
  &::after {
    content: "";
    @apply absolute top-1/2 left-1/2 size-6 -translate-x-1/2 -translate-y-1/2;
  }
}

/* === Statuses === */
@utility status-focused {
  @apply focus-ring;
}

@utility status-focused-field {
  @apply focus-field-ring;
}

@utility status-invalid-field {
  @apply invalid-field-ring;
}

@utility status-disabled {
  opacity: var(--disabled-opacity);
  cursor: var(--cursor-disabled);
  pointer-events: none;
}

@utility status-pending {
  @apply pointer-events-none;
}

/* === Scrollbars (standards-only; apply per scroll slot in component CSS) === */
@utility scrollbar {
  scrollbar-width: var(--scrollbar-width);
  scrollbar-color: var(--scrollbar-color);
  scrollbar-gutter: var(--scrollbar-gutter);
}

@utility scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-gutter: auto;
}

@utility scrollbar-default {
  scrollbar-width: auto;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
}

/* Direct properties only — does not inherit none to nested scroll slots */
@utility scrollbar-none {
  scrollbar-width: none;
  scrollbar-color: auto;
  scrollbar-gutter: auto;
  -ms-overflow-style: none;
}


/* Variants */
/**
 * ================================================================================================
 * HeroUI Custom Tailwind CSS Variants
 * ================================================================================================
 *
 * Custom variants with intelligent fallback: explicit controls override system preferences.
 *
 * Usage:
 *   motion-reduce:opacity-0      - Reduced motion accessibility
 *   motion-safe:animate-spin     - Full motion effects
 *   dark:bg-gray-900             - Dark mode styles
 *
 * Priority: Explicit data attributes/classes → System preferences (fallback)
 * ================================================================================================
 */

/* -------------------------------------------------------------------------------------------------
 * motion-reduce — Minimize animations for accessibility
 * Priority: data-reduce-motion="true" → prefers-reduced-motion: reduce
 * ------------------------------------------------------------------------------------------------- */
@custom-variant motion-reduce {
  /* Explicit: data-reduce-motion="true" on element or ancestor */
  &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
    @slot;

    &::before,
    &::after {
      @slot;
    }
  }

  /* Fallback: system prefers-reduced-motion setting */
  @media (prefers-reduced-motion: reduce) {
    &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
      @slot;

      &::before,
      &::after {
        @slot;
      }
    }
  }
}

/* -------------------------------------------------------------------------------------------------
 * motion-safe — Enable full animations and transitions
 * Priority: data-reduce-motion="false" → prefers-reduced-motion: no-preference
 * ------------------------------------------------------------------------------------------------- */
@custom-variant motion-safe {
  /* Explicit: data-reduce-motion="false" on element or ancestor */
  &:is([data-reduce-motion="false"], [data-reduce-motion="false"] *) {
    @slot;

    &::before,
    &::after {
      @slot;
    }
  }

  /* Fallback: system has no motion preference set */
  @media (prefers-reduced-motion: no-preference) {
    &:not(
      :is(
        [data-reduce-motion="true"],
        [data-reduce-motion="true"] *,
        [data-reduce-motion="false"],
        [data-reduce-motion="false"] *
      )
    ) {
      @slot;

      &::before,
      &::after {
        @slot;
      }
    }
  }
}

/* -------------------------------------------------------------------------------------------------
 * dark — Dark mode styles
 * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
 * ------------------------------------------------------------------------------------------------- */
@custom-variant dark {
  /* Explicit: .dark class or data-theme="dark" on element or ancestor */
  &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    @slot;

    &::before,
    &::after {
      @slot;
    }
  }

  /* Fallback: system prefers dark color scheme */
  @media (prefers-color-scheme: dark) {
    &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
      @slot;

      &::before,
      &::after {
        @slot;
      }
    }
  }
}