/* Utility Classes */

/* Minimal, exception-based utilities - keep additive, not foundational */

@layer utilities {
  /* ============================================
     VISIBILITY
     ============================================ */
  .u-hidden {
    display: none !important;
  }

  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ============================================
     LAYOUT HELPERS
     ============================================ */
  .u-block {
    display: block;
  }

  .u-flex {
    display: flex;
  }

  .u-flex-col {
    display: flex;
    flex-direction: column;
  }

  .u-items-center {
    align-items: center;
  }

  .u-items-start {
    align-items: flex-start;
  }

  .u-justify-between {
    justify-content: space-between;
  }

  .u-justify-center {
    justify-content: center;
  }

  .u-justify-end {
    justify-content: flex-end;
  }

  .u-flex-1 {
    flex: 1;
  }

  .u-flex-wrap {
    flex-wrap: wrap;
  }

  .u-gap-xs {
    gap: var(--space-2);
  }

  .u-gap-sm {
    gap: var(--space-3);
  }

  .u-gap-md {
    gap: var(--space-4);
  }

  .u-gap-lg {
    gap: var(--space-5);
  }

  .u-grid {
    display: grid;
  }

  .u-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .u-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .u-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .u-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .u-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  /* ============================================
     SPACING (exception-based, use sparingly)
     ============================================ */
  .u-mt-0 {
    margin-top: 0 !important;
  }

  .u-mt-xs {
    margin-top: var(--space-2);
  }

  .u-mt-sm {
    margin-top: var(--space-3);
  }

  .u-mt-md {
    margin-top: var(--space-4);
  }

  .u-mt-lg {
    margin-top: var(--space-5);
  }

  .u-mt-xl {
    margin-top: var(--space-6);
  }

  .u-mt-xxl {
    margin-top: var(--space-7);
  }

  .u-mb-0 {
    margin-bottom: 0 !important;
  }

  .u-mb-xs {
    margin-bottom: var(--space-2);
  }

  .u-mb-sm {
    margin-bottom: var(--space-3);
  }

  .u-mb-md {
    margin-bottom: var(--space-4);
  }

  .u-mb-lg {
    margin-bottom: var(--space-5);
  }

  .u-mb-xl {
    margin-bottom: var(--space-6);
  }

  .u-mb-xxl {
    margin-bottom: var(--space-7);
  }

  .u-ml-sm {
    margin-left: var(--space-3);
  }

  .u-ml-lg {
    margin-left: var(--space-5);
  }

  .u-my-md {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .u-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .u-m-0 {
    margin: 0 !important;
  }

  .u-p-0 {
    padding: 0 !important;
  }

  .u-p-md {
    padding: var(--space-4);
  }

  .u-p-lg {
    padding: var(--space-5);
  }

  .u-p-xl {
    padding: var(--space-6);
  }

  .u-pt-lg {
    padding-top: var(--space-5);
  }

  .u-pt-xl {
    padding-top: var(--space-6);
  }

  .u-pb-md {
    padding-bottom: var(--space-4);
  }

  .u-px-lg {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .u-py-xxl {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  /* ============================================
     TEXT
     ============================================ */
  .u-text-center {
    text-align: center;
  }

  .u-text-right {
    text-align: right;
  }

  .u-text-left {
    text-align: left;
  }

  /* Font sizes */
  .u-text-xs {
    font-size: var(--text-2xs);
  }

  .u-text-sm {
    font-size: var(--text-xs);
  }

  .u-text-md {
    font-size: var(--text-md);
  }

  .u-text-lg {
    font-size: var(--text-lg);
  }

  .u-text-xl {
    font-size: var(--text-xl);
  }

  .u-text-2xl {
    font-size: var(--text-2xl);
  }

  /* Font weights */
  .u-text-normal {
    font-weight: var(--weight-regular);
  }

  .u-text-medium {
    font-weight: var(--weight-medium);
  }

  .u-text-semibold {
    font-weight: var(--weight-semi);
  }

  .u-text-bold {
    font-weight: var(--weight-bold);
  }

  /* Text colors */
  .u-text-muted {
    color: var(--neutral-400);
  }

  .u-text-dark {
    color: var(--fg);
  }

  .u-text-brand {
    color: var(--brand);
  }

  .u-text-success {
    color: var(--brand);
  }

  .u-text-error {
    color: var(--danger);
  }

  .u-text-warning {
    color: var(--caution-strong);
  }

  .u-text-gray-4 {
    color: var(--neutral-600);
  }

  .u-text-gray-5 {
    color: var(--neutral-500);
  }

  /* Text styles */
  .u-text-italic {
    font-style: italic;
  }

  .u-text-underline {
    text-decoration: underline;
  }

  .u-text-no-underline {
    text-decoration: none;
  }

  .u-text-uppercase {
    text-transform: uppercase;
  }

  .u-text-lowercase {
    text-transform: lowercase;
  }

  .u-text-capitalize {
    text-transform: capitalize;
  }

  /* Line heights */
  .u-leading-tight {
    line-height: var(--leading-tight);
  }

  .u-leading-normal {
    line-height: var(--leading-normal);
  }

  .u-leading-relaxed {
    line-height: var(--leading-relaxed);
  }

  /* ============================================
     WIDTH
     ============================================ */
  .u-w-full {
    width: 100%;
  }

  .u-min-width-150 {
    min-width: 150px;
  }

  /* ============================================
     DIVIDER
     ============================================ */
  .u-divider {
    height: 1px;
    background: var(--neutral-200);
    margin: var(--space-6) 0;
    border: none;
  }

  /* ============================================
     CONTAINERS
     ============================================ */
  .container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .container--narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .container--form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .container--full {
    max-width: none;
  }

  .container--wide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  /* ============================================
     BACKGROUNDS & BORDERS
     ============================================ */
  .u-bg-secondary {
    background-color: var(--surface-sunken);
  }

  .u-bg-warning {
    background-color: var(--caution-strong);
  }

  .u-bg-error {
    background-color: var(--danger);
  }

  .u-rounded-md {
    border-radius: var(--radius-2);
  }

  .u-rounded {
    border-radius: var(--radius-2);
  }

  .u-border {
    border: 1px solid var(--neutral-200);
  }

  .u-border-bottom {
    border-bottom: 1px solid var(--neutral-200);
  }

  .u-border-top {
    border-top: 1px solid var(--neutral-200);
  }

  /* ============================================
     TYPOGRAPHY EXTRAS
     ============================================ */
  .u-font-mono {
    font-family: var(--font-mono);
  }

  .u-list-disc {
    list-style: disc;
  }

  /* ============================================
     TRUNCATION
     ============================================ */
  .u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .u-break-all {
    word-break: break-all;
    min-width: 0;
  }

  /* ============================================
     LOADING OVERLAY (HTMX indicator)
     ============================================ */
  .loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    z-index: 10;
  }

  .loading-overlay.htmx-request {
    display: flex;
  }
}