/* ═══════════════════════════════════════════════════════════════════════════
   utilities.css – Fotokreis Südliche Weinstraße
   Utility-Klassen (sparsam; Design-Tokens bevorzugen)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Text-Farben ─────────────────────────────────────────────────────────── */
.text-paper       { color: var(--paper); }
.text-ink         { color: var(--ink); }
.text-ink-soft    { color: var(--ink-soft); }
.text-amber       { color: var(--amber); }
.text-amber-deep  { color: var(--amber-deep); }
.text-line        { color: var(--line); }

/* ── Hintergrundfarben ───────────────────────────────────────────────────── */
.bg-paper       { background-color: var(--paper); }
.bg-paper-deep  { background-color: var(--paper-deep); }
.bg-film        { background-color: var(--film); }
.bg-film-soft   { background-color: var(--film-soft); }
.bg-amber       { background-color: var(--amber); }

/* ── Schriftfamilien ─────────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.font-body    { font-family: var(--font-body); }

/* ── Schriftgrößen ───────────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs); }
.text-s    { font-size: var(--text-s); }
.text-base { font-size: var(--text-base); }
.text-l    { font-size: var(--text-l); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

/* ── Schriftgewichte ─────────────────────────────────────────────────────── */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

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

/* ── Abstände ────────────────────────────────────────────────────────────── */
.mt-xs  { margin-top: var(--space-xs); }
.mt-s   { margin-top: var(--space-s); }
.mt-m   { margin-top: var(--space-m); }
.mt-l   { margin-top: var(--space-l); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-s   { margin-bottom: var(--space-s); }
.mb-m   { margin-bottom: var(--space-m); }
.mb-l   { margin-bottom: var(--space-l); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* ── Flexbox-Helfer ──────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-xs  { gap: var(--space-xs); }
.gap-s   { gap: var(--space-s); }
.gap-m   { gap: var(--space-m); }
.gap-l   { gap: var(--space-l); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* ── Sichtbarkeit ────────────────────────────────────────────────────────── */
.hidden { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Trennlinien ─────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--line);
}

.divider-dark {
  border: none;
  border-top: 1px solid var(--line-dark);
}

/* ── Mono-Label (z.B. Filmstreifen-Beschriftung) ─────────────────────────── */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Overflow ────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}