/*
 * Utilities
 * Minimal helper classes. Add only when needed twice.
 */

@layer utilities {
  /* ═══════════════════════════════════════════════════════════════════════════
     TEXT
     ═══════════════════════════════════════════════════════════════════════════ */
  .txt-x-small { font-size: var(--text-x-small); }
  .txt-small { font-size: var(--text-small); }
  .txt-normal { font-size: var(--text-normal); }
  .txt-medium { font-size: var(--text-medium); }
  .txt-large { font-size: var(--text-large); }

  .txt-center { text-align: center; }
  .txt-start { text-align: start; }
  .txt-end { text-align: end; }

  .txt-muted { color: var(--color-ink-muted); }
  .txt-faint { color: var(--color-ink-faint); }

  .txt-bold { font-weight: var(--weight-bold); }
  .txt-nowrap { white-space: nowrap; }

  /* ═══════════════════════════════════════════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════════════════════════════════════════ */
  .flex { display: flex; }
  .flex-inline { display: inline-flex; }
  .flex-column { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1; }

  .items-center { align-items: center; }
  .items-start { align-items: start; }
  .items-end { align-items: end; }

  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .justify-end { justify-content: end; }

  .gap { gap: var(--block-space) var(--inline-space); }
  .gap-half { gap: var(--block-space-half) var(--inline-space-half); }
  .gap-double { gap: var(--block-space-double) var(--inline-space-double); }

  /* ═══════════════════════════════════════════════════════════════════════════
     SIZING
     ═══════════════════════════════════════════════════════════════════════════ */
  .full-width { inline-size: 100%; }
  .max-width { max-inline-size: 100%; }

  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════════════════ */
  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-block { padding-block: var(--block-space); }
  .pad-inline { padding-inline: var(--inline-space); }

  .margin-block { margin-block: var(--block-space); }
  .margin-block-half { margin-block: var(--block-space-half); }

  .center { margin-inline: auto; }

  /* ═══════════════════════════════════════════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════════════════════════════════════════ */
  .border { border: var(--border); }
  .border-bottom { border-block-end: var(--border); }
  .border-top { border-block-start: var(--border); }
  .border-radius { border-radius: var(--radius-md); }

  /* ═══════════════════════════════════════════════════════════════════════════
     VISIBILITY
     ═══════════════════════════════════════════════════════════════════════════ */
  [hidden] { display: none !important; }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}