/**
 * Utility Classes
 * Common utility classes for spacing, display, etc.
 */

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-40 { margin-top: var(--spacing-40); }

.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-32 { margin-bottom: var(--spacing-32); }
.mb-40 { margin-bottom: var(--spacing-40); }

/* Display utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Gap utilities */
.gap-8 { gap: var(--spacing-8); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }
.gap-24 { gap: var(--spacing-24); }

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

/* Colors */
.text-primary { color: var(--content-on-surface); }
.text-secondary { color: var(--content-on-white-secondary); }
.text-accent { color: var(--content-on-white-accent); }
.text-white { color: var(--content-on-primary); }

.bg-white { background-color: var(--background-white); }
.bg-surface { background-color: var(--background-surface); }
.bg-primary { background-color: var(--background-primary); }
.bg-accent { background-color: var(--background-accent); }

/* Border utilities */
.border { border: 1px solid var(--stroke-default); }
.border-top { border-top: 1px solid var(--stroke-default); }
.border-bottom { border-bottom: 1px solid var(--stroke-default); }

/* Border radius */
.rounded-8 { border-radius: var(--corner-radius-8); }
.rounded-12 { border-radius: var(--corner-radius-12); }
.rounded-full { border-radius: var(--corner-radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

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

/* Responsive utilities */
@media (max-width: 768px) {
  .mobile-hidden { display: none; }
}

@media (min-width: 769px) {
  .desktop-hidden { display: none; }
}