/* =============================================================
   AMYTEA — Utilities
   Single-purpose helper classes
   ============================================================= */

/* ── Display ───────────────────────────────────────────────── */
.hidden { display: none !important; }
.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;
}
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }

@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

/* ── Text ──────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-primary  { color: var(--color-primary) !important; }
.text-accent   { color: var(--color-accent) !important; }
.text-muted    { color: var(--color-text-muted) !important; }
.text-inverse  { color: var(--color-text-inverse) !important; }
.text-success  { color: var(--color-success) !important; }
.text-error    { color: var(--color-error) !important; }

/* ── Spacing: Margin ───────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.mx-auto { margin-inline: auto; }

/* ── Spacing: Padding ──────────────────────────────────────── */
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12{ padding-block: var(--space-12); }
.py-20{ padding-block: var(--space-20); }

/* ── Width ─────────────────────────────────────────────────── */
.w-full { width: 100%; }
.max-w-narrow { max-width: var(--max-width-narrow); }
.max-w-content { max-width: var(--max-width); }

/* ── Border Radius ─────────────────────────────────────────── */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Overflow ──────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ── Position ──────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }

/* ── Gradient Text ─────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Decorative divider ────────────────────────────────────── */
.divider-ornament {
  text-align: center;
  margin-block: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}