@layer utilities {

/* ── Text-Farb-Utilities ── */
.text-base-font  { color: var(--font-base); }
.text-grey-font  { color: var(--font-grey); }
.text-light-font { color: var(--font-light); }
.text-highlight  { color: var(--font-highlight); }
.text-accent     { color: var(--font-accent); }

/* ── Hintergrund-Utilities ── */
.bg-surface      { background-color: var(--surface-color); }
.bg-surface-bg   { background-color: var(--bg-color); }
.bg-surface-dark { background-color: var(--dark-surface-color); }

/* ── Schatten & Border-Radius ── */
.rounded-widget { border-radius: 12px; }
.shadow-card    { box-shadow: var(--shadow-raise); }

/* ── Animationen ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in  { animation: fadeIn  0.3s ease-out; }
.animate-slide-up { animation: slideUp 0.4s ease-out; }

/* ── Formular-Utilities ── */
.checkbox-drag { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--data-blue-2); cursor: pointer; }

} /* @layer utilities */