/* ==========================================================================
   PaglaAI Utilities — Reference Implementation
   Single-purpose helpers. Layer 3 of CSS_ARCHITECTURE.md.
   Used deliberately, not everywhere. All values resolve from tokens.
   ========================================================================== */

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-content-padding);
}

@media (min-width: 48rem) {
  .container {
    padding-inline: var(--layout-content-padding-wide);
  }
}

/* ---- Spacing (token-driven rhythm) ---- */
.u-m-0 { margin: var(--space-0); }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-12 { margin-bottom: var(--space-12); }

/* ---- Typography utilities ---- */
.u-text-muted { color: var(--color-base-muted); }
.u-text-accent { color: var(--color-accent-primary); }

/* ---- Visibility ---- */
.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;
}

/* ---- Interactive surface ---- */
.u-interactive-surface {
  min-width: var(--interactive-min-target);
  min-height: var(--interactive-min-target);
}

/* ---- Motion ---- */
.u-motion-safe:only-child {
  transition-duration: var(--motion-duration-base);
}