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

/* --- 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: 6px; }
.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; }

/* --- Turbo/Stimulus helpers --- */
.turbo-loading { opacity: 0.6; pointer-events: none; }