/* Utility Classes
 * ~60 utilities max. Core styling lives in semantic component classes.
 * These are additive sprinkles, not a design system.
 */

@layer utilities {
  /* --- Layout --- */
  .flex { display: flex; }
  .flex-col { display: flex; flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-1 { flex: 1; }
  .grid { display: grid; }
  .inline-flex { display: inline-flex; }
  .items-center { align-items: center; }
  .items-start { align-items: start; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .gap { gap: var(--inline-space); }
  .gap-s { gap: var(--inline-space-s); }
  .gap-l { gap: var(--inline-space-l); }

  /* --- Spacing --- */
  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-s { padding: var(--block-space-s) var(--inline-space-s); }
  .pad-l { padding: var(--block-space-l) var(--inline-space-l); }
  .margin-block { margin-block: var(--block-space); }
  .margin-block-l { margin-block: var(--block-space-l); }

  /* --- Typography --- */
  .text-sm { font-size: 0.875rem; }
  .text-lg { font-size: 1.125rem; }
  .text-muted { color: var(--color-ink-muted); }
  .text-positive { color: var(--color-positive); }
  .text-negative { color: var(--color-negative); }
  .text-center { text-align: center; }
  .font-bold { font-weight: 600; }
  .font-normal { font-weight: 400; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .text-wrap-balance { text-wrap: balance; }

  /* --- Visibility --- */
  .hide { display: none; }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* --- Borders & Surfaces --- */
  .border { border: 1px solid var(--color-border); }
  .rounded { border-radius: var(--radius); }
  .rounded-full { border-radius: 9999px; }
  .surface { background: var(--color-surface); }

  /* --- Width --- */
  .w-full { width: 100%; }
  .max-w-prose { max-width: 65ch; }
  .max-w-screen { max-width: clamp(320px, 90vw, 1200px); }
  .mx-auto { margin-inline: auto; }

  /* --- Interactive --- */
  .cursor-pointer { cursor: pointer; }
  .no-pointer-events { pointer-events: none; }
}