/* Utility Classes - Sir Types-A-Lot */

/* Layout Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing Utilities */
.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); }
.py-12 { padding-block: var(--space-12); }
.py-16 { padding-block: var(--space-16); }

.m-auto { margin: auto; }
.mx-auto { margin-inline: auto; }
.my-6 { margin-block: var(--space-6); }
.my-8 { margin-block: var(--space-8); }

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

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* Width Utilities */
.w-full { width: 100%; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-lg); }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-800 { max-width: 800px; }

/* Background Utilities */
.bg-secondary { background: var(--color-background-secondary); }
.bg-dark-gradient {
  background: linear-gradient(180deg, var(--color-surface-dark-1) 0%, var(--color-surface-dark-2) 100%);
}

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-white { color: white; }
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-300 { color: var(--color-gray-300); }

/* Font Utilities */
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }

/* Aspect Ratio */
.aspect-video { aspect-ratio: 16 / 9; }

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

/* Premium Badge */
.premium-badge {
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  display: inline-block;
}

/* Premium Card */
.premium-card {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-surface-dark-1), var(--color-surface-dark-2));
  border-radius: var(--radius-lg);
  color: white;
  text-align: center;
}

/* Negative Margins for Full-Bleed */
.full-bleed {
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
}