/**
 * Improved Utilities
 * ==================
 *
 * Comprehensive utility classes that work with the improved theme system.
 * Includes all the theme generator utilities plus framework compatibility.
 */

@layer utilities {
  /* ============================================ */
  /* BACKGROUND COLORS                           */
  /* ============================================ */

  .bg-base { background-color: var(--base); --bg: var(--base); }
  .bg-bedrock { background-color: var(--bedrock); --bg: var(--bedrock); }
  .bg-surface-muted { background-color: var(--surface-muted); --bg: var(--surface-muted); }
  .bg-surface-subtle { background-color: var(--surface-subtle); --bg: var(--surface-subtle); }
  .bg-surface { background-color: var(--surface); --bg: var(--surface); }
  .bg-surface-overt { background-color: var(--surface-overt); --bg: var(--surface-overt); }

  /* Legacy framework compatibility */
  .surface-bg { background-color: var(--surface); }
  .surface-bg-subtle { background-color: var(--surface-subtle); }
  .surface-bg-muted { background-color: var(--surface-muted); }

  /* ============================================ */
  /* TEXT COLORS                                 */
  /* ============================================ */

  .text-muted { color: var(--text-muted); }
  .text-subtle { color: var(--text-subtle); }
  /* `.text` is the class host for core/text.css. Its default color is
     derived from the inherited --bg value rather than duplicated here. */
  .text-overt { color: var(--text-overt); }
  .text-link { color: var(--text-link); }
  .text-link:hover { color: var(--text-link-hover); }
  .text-link:visited { color: var(--text-link-visited); }
  .text-highlight-subtle { color: var(--text-highlight-subtle); }
  .text-highlight-overt { color: var(--text-highlight-overt); }

  /* Text on surfaces */
  .text-on-base { color: var(--text-on-base); }
  .text-on-bedrock { color: var(--text-on-bedrock); }
  .text-on-surface-muted { color: var(--text-on-surface-muted); }
  .text-on-surface-subtle { color: var(--text-on-surface-subtle); }
  .text-on-surface { color: var(--text-on-surface); }
  .text-on-surface-overt { color: var(--text-on-surface-overt); }

   /* Legacy framework compatibility */
   .text-color-muted { color: var(--text-muted); }
   .text-color-subtle { color: var(--text-subtle); }
   .text-color { color: var(--text); }
   .text-color-overt { color: var(--text-overt); }

   /* ============================================ */
   /* AUTOMATIC TEXT COLOR ADJUSTMENTS            */
   /* ============================================ */

   /* On dark bedrock background, use light text */
   .bg-bedrock .text-muted,
   .bg-bedrock .text-subtle,
   .bg-bedrock .text-overt,
   .bg-bedrock .text-link,
   .bg-bedrock .text-link:hover,
   .bg-bedrock .text-link:visited {
     color: var(--text-on-bedrock);
   }

   /* On dark bedrock background, buttons need light text */
   .bg-bedrock .button {
     color: var(--text-on-bedrock);
     border-color: var(--outline-overt);
   }
   .bg-bedrock .button-primary {
     color: var(--text-on-bedrock);
   }

   /* On accent background, use appropriate text */
   .bg-accent .text-muted,
   .bg-accent .text-subtle,
   .bg-accent .text-overt {
     color: var(--accent-on-base);
   }

   /* On accent background, buttons need appropriate colors */
   .bg-accent .button {
     color: var(--accent-on-base);
     border-color: var(--accent-overt);
   }
   .bg-accent .button-primary {
     color: var(--accent-on-base);
   }

    /* On secondary background, use appropriate text */
    .bg-secondary .text-muted,
    .bg-secondary .text-subtle,
    .bg-secondary .text-overt {
      color: var(--text-on-secondary);
    }

    .bg-secondary .button {
      color: var(--text-on-secondary);
      border-color: var(--secondary-overt);
    }
    .bg-secondary .button-secondary {
      color: var(--text-on-secondary);
    }

    /* On tertiary background, use appropriate text */
    .bg-tertiary .text-muted,
    .bg-tertiary .text-subtle,
    .bg-tertiary .text-overt {
      color: var(--text-on-tertiary);
    }

    .bg-tertiary .button {
      color: var(--text-on-tertiary);
      border-color: var(--tertiary-overt);
    }
    .bg-tertiary .button-secondary {
      color: var(--text-on-tertiary);
    }

    /* ============================================ */
    /* OUTLINE/BORDER COLORS                       */
   /* ============================================ */

  .border-muted { border-color: var(--outline-muted); }
  .border-subtle { border-color: var(--outline-subtle); }
  .border { border-color: var(--outline); }
  .border-overt { border-color: var(--outline-overt); }
  .border-focus { border-color: var(--outline-focus); }
  .border-active { border-color: var(--outline-active); }
  .border-error { border-color: var(--outline-error); }
  .border-warning { border-color: var(--outline-warning); }
  .border-success { border-color: var(--outline-success); }
  .border-info { border-color: var(--outline-info); }

  /* ============================================ */
  /* HIGHLIGHT BACKGROUNDS                       */
  /* ============================================ */

  .bg-highlight-muted { background-color: var(--highlight-muted); }
  .bg-highlight-subtle { background-color: var(--highlight-subtle); }
  .bg-highlight-overt { background-color: var(--highlight-overt); }
  .bg-text-highlight { background-color: var(--text-highlight-bg); }

  /* ============================================ */
  /* ACCENT COLORS                               */
  /* ============================================ */

  .bg-accent { background-color: var(--accent); --bg: var(--accent); }
  .bg-accent-muted { background-color: var(--accent-muted); --bg: var(--accent-muted); }
  .bg-accent-subtle { background-color: var(--accent-subtle); --bg: var(--accent-subtle); }
  .bg-accent-surface { background-color: var(--accent-surface); --bg: var(--accent-surface); }
  .bg-accent-overt { background-color: var(--accent-overt); --bg: var(--accent-overt); }
  .bg-accent-highlight { background-color: var(--accent-highlight); --bg: var(--accent-highlight); }

  .text-accent { color: var(--accent); }
  .text-accent-muted { color: var(--accent-muted); }
  .text-accent-subtle { color: var(--accent-subtle); }
  .text-accent-overt { color: var(--accent-overt); }

  .text-accent-on-base { color: var(--accent-on-base); }
  .text-accent-on-bedrock { color: var(--accent-on-bedrock); }
  .text-accent-on-surface { color: var(--accent-on-surface); }

  /* ============================================ */
  /* SECONDARY COLORS                            */
  /* ============================================ */

  .bg-secondary { background-color: var(--secondary); --bg: var(--secondary); }
  .bg-secondary-muted { background-color: var(--secondary-muted); --bg: var(--secondary-muted); }
  .bg-secondary-subtle { background-color: var(--secondary-subtle); --bg: var(--secondary-subtle); }
  .bg-secondary-overt { background-color: var(--secondary-overt); --bg: var(--secondary-overt); }
  .bg-secondary-highlight { background-color: var(--secondary-highlight); --bg: var(--secondary-highlight); }

  .text-secondary { color: var(--secondary); }
  .text-secondary-muted { color: var(--secondary-muted); }
  .text-secondary-subtle { color: var(--secondary-subtle); }
  .text-secondary-overt { color: var(--secondary-overt); }
  .text-on-secondary { color: var(--text-on-secondary); }

  /* ============================================ */
  /* TERTIARY COLORS                             */
  /* ============================================ */

  .bg-tertiary { background-color: var(--tertiary); --bg: var(--tertiary); }
  .bg-tertiary-muted { background-color: var(--tertiary-muted); --bg: var(--tertiary-muted); }
  .bg-tertiary-subtle { background-color: var(--tertiary-subtle); --bg: var(--tertiary-subtle); }
  .bg-tertiary-overt { background-color: var(--tertiary-overt); --bg: var(--tertiary-overt); }
  .bg-tertiary-highlight { background-color: var(--tertiary-highlight); --bg: var(--tertiary-highlight); }

  .text-tertiary { color: var(--tertiary); }
  .text-tertiary-muted { color: var(--tertiary-muted); }
  .text-tertiary-subtle { color: var(--tertiary-subtle); }
  .text-tertiary-overt { color: var(--tertiary-overt); }
  .text-on-tertiary { color: var(--text-on-tertiary); }

  /* ============================================ */
  /* SEMANTIC COLORS                             */
  /* ============================================ */

  .bg-success { background-color: var(--surface-success); --bg: var(--surface-success); }
  .bg-warning { background-color: var(--surface-warning); --bg: var(--surface-warning); }
  .bg-error { background-color: var(--surface-error); --bg: var(--surface-error); }
  .bg-info { background-color: var(--surface-info); --bg: var(--surface-info); }

  .text-success { color: var(--text-success); }
  .text-warning { color: var(--text-warning); }
  .text-error { color: var(--text-error); }
  .text-info { color: var(--text-info); }

  .border-success { border-color: var(--outline-success); }
  .border-warning { border-color: var(--outline-warning); }
  .border-error { border-color: var(--outline-error); }
  .border-info { border-color: var(--outline-info); }

  /* ============================================ */
  /* IMPROVED BUTTON SYSTEM                      */
  /* ============================================ */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    border: var(--border-width) solid var(--outline);
    border-radius: var(--border-radius-md);
    background-color: var(--surface);
    color: var(--text-on-surface);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
  }

  .button:hover { background-color: var(--highlight-subtle); }
  .button:active { background-color: var(--highlight-overt); }
  .button:disabled {
    background-color: var(--surface-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  .button-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
  }
  .button-primary:hover { background-color: var(--accent-overt); color: var(--text-on-accent); }
  .button-primary:active { background-color: var(--accent-highlight); color: var(--text-on-accent); }
  .button-primary:disabled { background-color: var(--accent-muted); color: var(--text-on-accent); }

  .button-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--text-on-secondary);
  }
  .button-secondary:hover { background-color: var(--secondary-overt); color: var(--text-on-secondary); }
  .button-secondary:active { background-color: var(--secondary-highlight); color: var(--text-on-secondary); }
  .button-secondary:disabled { background-color: var(--secondary-muted); color: var(--text-on-secondary); }

  .button-outline {
    background-color: transparent;
    border-color: var(--outline);
    color: var(--text);
  }
  .button-outline:hover { background-color: var(--highlight-subtle); }
  .button-outline:active { background-color: var(--highlight-overt); }
  .button-outline:disabled { background-color: transparent; }

  .button-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text);
  }
  .button-ghost:hover { background-color: var(--highlight-subtle); }
  .button-ghost:active { background-color: var(--highlight-overt); }
  .button-ghost:disabled { background-color: transparent; }

  .button-text {
    background-color: transparent;
    border-color: transparent;
    color: var(--accent);
    padding: 0.5rem 1rem;
  }
  .button-text:hover { color: var(--accent-overt); }
  .button-text:active { color: var(--accent-highlight); }
  .button-text:disabled { color: var(--text-muted); }

  /* ============================================ */
  /* IMPROVED FORM ELEMENTS                      */
  /* ============================================ */

  .input, .textarea, .select {
    padding: 0.5rem;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    border: var(--border-width) solid var(--outline);
    border-radius: var(--border-radius-md);
    background-color: var(--surface);
    color: var(--text-on-surface);
    transition: border-color 0.15s ease;
  }

  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--outline-focus);
    box-shadow: 0 0 0 2px var(--outline-focus);
  }

  .input:hover, .textarea:hover, .select:hover {
    border-color: var(--outline-overt);
  }

  .input:disabled, .textarea:disabled, .select:disabled {
    background-color: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
  }

  /* ============================================ */
  /* IMPROVED FOCUS STATES                       */
  /* ============================================ */

  .focus-ring:focus {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .focus-ring-inset:focus {
    outline: none;
    box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }

  /* ============================================ */
  /* IMPROVED TYPOGRAPHY UTILITIES               */
  /* ============================================ */

  .text-xs { font-size: var(--font-size-xs, 0.75rem); }
  .text-sm { font-size: var(--font-size-sm, 0.875rem); }
  .text-base { font-size: var(--font-size-base, 1rem); }
  .text-lg { font-size: var(--font-size-lg, 1.125rem); }
  .text-xl { font-size: var(--font-size-xl, 1.25rem); }
  .text-2xl { font-size: var(--font-size-2xl, 1.5rem); }
  .text-3xl { font-size: var(--font-size-3xl, 1.875rem); }
  .text-4xl { font-size: var(--font-size-4xl, 2.25rem); }
  .text-5xl { font-size: var(--font-size-5xl, 3rem); }
  .text-6xl { font-size: var(--font-size-6xl, 3.75rem); }

  .font-normal { font-weight: var(--font-weight-normal); }
  .font-medium { font-weight: var(--font-weight-medium); }
  .font-semibold { font-weight: var(--font-weight-semibold); }
  .font-bold { font-weight: var(--font-weight-bold); }

  /* ============================================ */
  /* IMPROVED SPACING UTILITIES                  */
  /* ============================================ */

  .p-xs { padding: var(--spacing-xs, 0.25rem); }
  .p-sm { padding: var(--spacing-sm, 0.5rem); }
  .p-md { padding: var(--spacing-md, 1rem); }
  .p-lg { padding: var(--spacing-lg, 1.5rem); }
  .p-xl { padding: var(--spacing-xl, 2rem); }

  .m-xs { margin: var(--spacing-xs, 0.25rem); }
  .m-sm { margin: var(--spacing-sm, 0.5rem); }
  .m-md { margin: var(--spacing-md, 1rem); }
  .m-lg { margin: var(--spacing-lg, 1.5rem); }
  .m-xl { margin: var(--spacing-xl, 2rem); }

  /* ============================================ */
  /* IMPROVED BORDER RADIUS                      */
  /* ============================================ */

  .rounded-sm { border-radius: var(--border-radius-sm); }
  .rounded { border-radius: var(--border-radius-md); }
  .rounded-md { border-radius: var(--border-radius-md); }
  .rounded-lg { border-radius: var(--border-radius-lg); }
  .rounded-xl { border-radius: var(--border-radius-xl); }
  .rounded-full { border-radius: var(--border-radius-full); }

  /* ============================================ */
  /* IMPROVED SHADOWS                            */
  /* ============================================ */

  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow { box-shadow: var(--shadow-md); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-xl { box-shadow: var(--shadow-xl); }
  .shadow-inner { box-shadow: var(--shadow-inner); }

  /* ============================================ */
  /* IMPROVED DISPLAY UTILITIES                  */
  /* ============================================ */

  .d-block { display: block; }
  .d-inline { display: inline; }
  .d-inline-block { display: inline-block; }
  .d-flex { display: flex; }
  .d-grid { display: grid; }
  .d-none { display: none; }

  /* ============================================ */
  /* IMPROVED FLEX UTILITIES                     */
  /* ============================================ */

  .flex-row { flex-direction: row; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  .justify-end { justify-content: flex-end; }

  /* ============================================ */
  /* IMPROVED POSITION UTILITIES                 */
  /* ============================================ */

  .pos-static { position: static; }
  .pos-relative { position: relative; }
  .pos-absolute { position: absolute; }
  .pos-fixed { position: fixed; }
  .pos-sticky { position: sticky; }

  /* ============================================ */
  /* IMPROVED OVERFLOW UTILITIES                 */
  /* ============================================ */

  .overflow-auto { overflow: auto; }
  .overflow-hidden { overflow: hidden; }
  .overflow-scroll { overflow: scroll; }
  .overflow-visible { overflow: visible; }

   /* ============================================ */
   /* IMPROVED INTERACTIVE STATE UTILITIES        */
   /* ============================================ */

   .hover-highlight:hover { background-color: var(--highlight-bg-subtle); }
   .active-press:active { transform: scale(0.98); }
   .focus-ring:focus { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

   /* ============================================ */
   /* IMPROVED ANCHOR POSITIONING UTILITIES       */
   /* ============================================ */
   /*
    * CSS Anchor Positioning utilities for creating positioned elements
    * that tether to other elements (anchors) with automatic collision detection.
    *
    * Usage:
    * 1. Add .anchor-name-* to the element you want to anchor to
    * 2. Add .position-anchor-* to the positioned element
    * 3. Add .position-area-* to control the positioning relative to the anchor
    * 4. Optionally add .position-try-fallback for automatic repositioning
    *
    * Example:
    * <button class="anchor-name-tooltip">Hover me</button>
    * <div class="position-anchor-tooltip position-area-bottom position-try-fallback">
    *   Tooltip content
    * </div>
    */

   /* Anchor name utilities for creating anchor references */
   .anchor-name-top { anchor-name: --anchor-top; }
   .anchor-name-bottom { anchor-name: --anchor-bottom; }
   .anchor-name-left { anchor-name: --anchor-left; }
   .anchor-name-right { anchor-name: --anchor-right; }
   .anchor-name-center { anchor-name: --anchor-center; }

   /* Position anchor utilities for referencing anchors */
   .position-anchor-top { position-anchor: --anchor-top; }
   .position-anchor-bottom { position-anchor: --anchor-bottom; }
   .position-anchor-left { position-anchor: --anchor-left; }
   .position-anchor-right { position-anchor: --anchor-right; }
   .position-anchor-center { position-anchor: --anchor-center; }

   /* Position area utilities for common anchor positions */
   @supports (position-area: top center) {
     .position-area-top { position-area: top center; }
     .position-area-bottom { position-area: bottom center; }
     .position-area-left { position-area: left center; }
     .position-area-right { position-area: right center; }
     .position-area-top-left { position-area: top left; }
     .position-area-top-right { position-area: top right; }
     .position-area-bottom-left { position-area: bottom left; }
     .position-area-bottom-right { position-area: bottom right; }
     .position-area-center { position-area: center; }
   }

   /* Position try utilities for fallback positioning */
   .position-try-fallback { position-try: --fallback-positions; }

   @position-try --fallback-positions {
     @try not media(viewport-right: 0px) { position-area: bottom center; }
     @try { position-area: top center; }
     @try not media(viewport-bottom: 0px) { position-area: right center; }
     @try { position-area: left center; }
   }

   /* ============================================ */
   /* IMPROVED SCRIM UTILITIES                    */
   /* ============================================ */

   .scrim { background-color: var(--scrim); }
   .scrim-light { background-color: var(--scrim-light); }

  /* ============================================ */
  /* OUTLINE AND RING UTILITIES                  */
  /* ============================================ */

  .outline-thin { outline-width: 1px; outline-style: solid; }
  .outline { outline-width: 2px; outline-style: solid; }
  .outline-thick { outline-width: 3px; outline-style: solid; }
  .ring-1 { box-shadow: 0 0 0 1px var(--outline-focus); }
  .ring-2 { box-shadow: 0 0 0 2px var(--outline-focus); }
  .ring-3 { box-shadow: 0 0 0 3px var(--outline-focus); }

  /* ============================================ */
  /* GAP UTILITIES                               */
  /* ============================================ */

  .gap-x-xs { column-gap: var(--spacing-xs); }
  .gap-x-sm { column-gap: var(--spacing-sm); }
  .gap-x-md { column-gap: var(--spacing-md); }
  .gap-x-lg { column-gap: var(--spacing-lg); }
  .gap-x-xl { column-gap: var(--spacing-xl); }
  .gap-y-xs { row-gap: var(--spacing-xs); }
  .gap-y-sm { row-gap: var(--spacing-sm); }
  .gap-y-md { row-gap: var(--spacing-md); }
  .gap-y-lg { row-gap: var(--spacing-lg); }
  .gap-y-xl { row-gap: var(--spacing-xl); }

  /* ============================================ */
  /* GRID SHORTHANDS                             */
  /* ============================================ */

  .grid-cols-1 { grid-template-columns: var(--grid-cols-1); }
  .grid-cols-2 { grid-template-columns: var(--grid-cols-2); }
  .grid-cols-3 { grid-template-columns: var(--grid-cols-3); }
  .grid-cols-4 { grid-template-columns: var(--grid-cols-4); }
  .grid-cols-6 { grid-template-columns: var(--grid-cols-6); }
  .grid-cols-12 { grid-template-columns: var(--grid-cols-12); }

  /* ============================================ */
  /* LEGACY FRAMEWORK COMPATIBILITY              */
  /* ============================================ */

  /* Map to original framework class names */
  .btn { @extend .button; }
  .btn-primary { @extend .button-primary; }
  .btn-secondary { @extend .button-secondary; }
  .btn-outline { @extend .button-outline; }
  .btn-ghost { @extend .button-ghost; }
  .btn-text { @extend .button-text; }

  .form-control { @extend .input; }
}