/**
 * Shared - Base Styles & Utilities
 *
 * @package AskCollab Seller Fulfillment
 * @version 1.0.0
 */

/* ========================================
BASE STYLES
======================================== */
.asf-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Reset for plugin scope */
.asf-seller-dashboard *,
.asf-seller-dashboard *::before,
.asf-seller-dashboard *::after {
  box-sizing: border-box;
}

/* ========================================
GLOBAL TYPOGRAPHY & SPACING
======================================== */
.asf-mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: -0.02em; }
.asf-human { font-family: 'Plus Jakarta Sans', sans-serif; }

.asf-text-sm { font-size: 0.875rem; }
.asf-text-xs { font-size: 0.75rem; }
.asf-text-muted { color: var(--m3-secondary); }

/* ========================================
DESKTOP STYLES (Large screens)
======================================== */
@media (min-width: 1025px) {
  .asf-container { padding: 0 var(--space-lg); }
}

/* ========================================
TABLET STYLES (Medium screens)
======================================== */
@media (max-width: 1024px) and (min-width: 641px) {
  .asf-container { padding: 0 var(--space-md); }
}

/* ========================================
MOBILE STYLES (Small screens)
======================================== */
@media (max-width: 640px) {
  .asf-container { padding: 0 var(--space-sm); }
  .asf-text-sm { font-size: 0.8125rem; }
}

/* ========================================
ANIMATIONS
======================================== */
@keyframes asf-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes asf-slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ========================================
UTILITY CLASSES
======================================== */
.asf-hidden { display: none !important; }
.asf-visible { display: block !important; }
.asf-loading { opacity: 0.6; pointer-events: none; }
.asf-text-center { text-align: center; }
.asf-mb-sm { margin-bottom: var(--space-sm); }
.asf-mb-md { margin-bottom: var(--space-md); }
.asf-mt-md { margin-top: var(--space-md); }