/* ==========================================================================
   SCHWAB Cargo Logistik — Utilities
   Atomic helper classes for the Industrial Premium system
   ========================================================================== */

/* === Screen Reader Only === */
.sr-only,
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Eyebrow Label === */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-block-end: var(--space-sm);
}

/* === Font Size Utilities === */
.fs-hero { font-size: var(--fs-hero); }
.fs-h1   { font-size: var(--fs-h1); }
.fs-h2   { font-size: var(--fs-h2); }
.fs-h3   { font-size: var(--fs-h3); }
.fs-h4   { font-size: var(--fs-h4); }
.fs-body { font-size: var(--fs-body); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-xs   { font-size: var(--fs-xs); }
.fs-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

/* === Color Utilities === */
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-error     { color: var(--color-error); }

/* === Text Alignment === */
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* === Skeleton Screen (Shimmer Animation) === */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 37%,
    var(--skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}

.skeleton-text {
  block-size: 1em;
  margin-block-end: var(--space-xs);
  border-radius: var(--radius-sm);
}

.skeleton-text:last-child {
  inline-size: 60%;
}

.skeleton-circle {
  border-radius: var(--radius-full);
}

.skeleton-rect {
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* === GPU Acceleration === */
.animate-gpu {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* === Phone Placeholder (Orange Highlight) === */
.phone-placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(230, 81, 0, 0.12);
  border: 1px solid var(--color-accent-dark);
  border-radius: var(--radius);
  color: var(--color-accent-light);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--transition-fast);
}

.phone-placeholder:hover {
  background: rgba(230, 81, 0, 0.2);
}

/* === Spacing Utilities === */
.mt-section { margin-block-start: var(--space-section); }
.mb-section { margin-block-end: var(--space-section); }
.mt-xl      { margin-block-start: var(--space-xl); }
.mb-xl      { margin-block-end: var(--space-xl); }
.mt-lg      { margin-block-start: var(--space-lg); }
.mb-lg      { margin-block-end: var(--space-lg); }
.mt-md      { margin-block-start: var(--space-md); }
.mb-md      { margin-block-end: var(--space-md); }

/* === Display Utilities === */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm       { gap: var(--space-sm); }
.gap-md       { gap: var(--space-md); }
.gap-lg       { gap: var(--space-lg); }

/* === Max Width === */
.max-w-prose { max-inline-size: 65ch; }
.max-w-narrow { max-inline-size: 45ch; }
.mx-auto     { margin-inline: auto; }