/* =========================================================================
   Atelier AI — Utilities
   Small atomic classes. Use sparingly; prefer semantic component classes.
   ========================================================================= */

/* Visibility */
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Flex primitives — used for composition */
.stack        { display: flex; flex-direction: column; }
.stack-xs     { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-sm     { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-md     { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg     { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-xl     { display: flex; flex-direction: column; gap: var(--space-6); }

.cluster      { display: flex; flex-wrap: wrap; align-items: center; }
.cluster-xs   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cluster-sm   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cluster-md   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster-lg   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

.row          { display: flex; align-items: center; gap: var(--space-2); }
.row-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.grow         { flex: 1 1 auto; min-width: 0; }
.shrink-0     { flex-shrink: 0; }

/* Text */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-brand     { color: var(--accent-primary); }
.text-accent    { color: var(--accent-secondary); }
.text-success   { color: var(--role-success); }
.text-warning   { color: var(--role-warning); }
.text-danger    { color: var(--role-danger); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

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

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Surfaces */
.surface-canvas   { background: var(--bg-canvas); }
.surface-elevated { background: var(--bg-elevated); }
.surface-subtle   { background: var(--bg-subtle); }
.surface-muted    { background: var(--bg-muted); }

/* Gradient fill — signature brand moment */
.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient {
  background: var(--accent-gradient);
}

/* Dividers */
.divider {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 0;
}
.divider-subtle {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

/* Gaps (when .stack/.cluster isn't enough) */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Margin helpers — keep sparing */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

/* Width helpers */
.w-full { width: 100%; }

/* Cursor */
.clickable { cursor: pointer; }

/* Focus ring utility — attach to custom interactive elements */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--ring-default);
}

/* Simple shimmer (skeleton helper) */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Screen-reader-friendly pulse for live regions */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.pulse-soft {
  animation: pulse-soft 1.6s var(--ease-in-out) infinite;
}