/* =====================================================
   Utility Classes (extracted from style.css Batch 4)
   These depend on design tokens defined in style.css :root
   Keep this file loaded AFTER style.css
   ===================================================== */

/* Spacing Utilities */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-15 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-15 { padding: 1.5rem; }
.p-3 { padding: 3rem; }

/* Text Alignment & Size */
.text-center { text-align: center; }
.text-large { font-size: 1.2rem; line-height: 1.8; }
.text-medium { font-size: 1.1rem; line-height: 1.6; }
.text-sm { font-size: 0.9rem; }
.text-xl { font-size: 1.5rem; }
.text-2xl { font-size: 2rem; }
.text-3xl { font-size: 2.5rem; }
.leading-normal { line-height: 1.6; }
.leading-relaxed { line-height: 1.8; }
.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* Flex & Grid Helpers */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-lg { gap: var(--space-lg); }
.grid { display: grid; }
.block { display: block; }

/* Auto-fit Grids */
.grid-auto-fit-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.grid-auto-fit-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.grid-auto-fit-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; }
@media (max-width: 768px) {
  .grid-auto-fit-250,
  .grid-auto-fit-300,
  .grid-auto-fit-400 { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Background Utility Blocks */
.bg-light { background: #f8f9fa; padding: 2rem; border-radius: 10px; }
body.dark-mode .bg-light { background: #2d2d2d; }
.bg-white { background: white; padding: 2rem; border-radius: 10px; }
body.dark-mode .bg-white { background: #1a1a1a; }

/* Color Utilities */
.text-blue { color: #3498db; }
.text-green { color: #27ae60; }
.text-red { color: #e74c3c; }
.text-orange { color: #ff9800; }
.text-dark { color: #2c3e50; }
.text-gray { color: #666; }
body.dark-mode .text-blue { color: #64b5f6; }
body.dark-mode .text-green { color: #4ade80; }
body.dark-mode .text-red { color: #f87171; }
body.dark-mode .text-orange { color: #fbbf24; }
body.dark-mode .text-dark { color: #e2e8f0; }
body.dark-mode .text-gray { color: #a0a0a0; }

/* Radius & Shadow */
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 10px; }
.rounded-xl { border-radius: 15px; }
.shadow { box-shadow: 0 6px 12px rgba(0,0,0,0.1); }
body.dark-mode .shadow { box-shadow: 0 6px 12px rgba(0,0,0,0.3); }

/* Icon Size Helpers */
.icon-sm { font-size: var(--font-size-lg); }
.icon-md { font-size: var(--font-size-xl); }
.icon-lg { font-size: var(--font-size-2xl); }
.icon-xl { font-size: var(--font-size-3xl); }

/* Safe future extension placeholder */
/* Add new utilities below this line to keep file organized */