/**
 * ShipSort Utilities — small, composable helpers for layout, spacing, and type.
 * Load AFTER components.css. Use sparingly — reach for semantic classes first.
 */

/* ── Layout: stacks / rows ────────────────────────────────────────────────── */

.stack       { display: flex; flex-direction: column; }
.stack-xs    { display: flex; flex-direction: column; gap: var(--space-xs); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--space-sm); }
.stack-md    { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--space-lg); }
.stack-xl    { display: flex; flex-direction: column; gap: var(--space-xl); }
.stack-2xl   { display: flex; flex-direction: column; gap: var(--space-2xl); }

.row           { display: flex; align-items: center; gap: var(--space-sm); }
.row-md        { display: flex; align-items: center; gap: var(--space-md); }
.row-lg        { display: flex; align-items: center; gap: var(--space-lg); }
.row-between   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.row-end       { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
.row-start     { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-sm); }
.row-center    { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.row-wrap      { flex-wrap: wrap; }
.row-top       { align-items: flex-start; }
.row-baseline  { align-items: baseline; }

.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-auto-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex-1 { flex: 1 1 auto; min-width: 0; }
.flex-0 { flex: 0 0 auto; }
.self-start { align-self: flex-start; }
.self-end   { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* ── Gaps ─────────────────────────────────────────────────────────────────── */

.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* ── Margin / padding ─────────────────────────────────────────────────────── */

.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-0  { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* ── Typography ───────────────────────────────────────────────────────────── */

.text-display  { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); }
.text-h1       { font-size: var(--fs-h1);      line-height: var(--lh-h1);      letter-spacing: var(--tracking-h1);      font-weight: var(--fw-semibold); }
.text-h2       { font-size: var(--fs-h2);      line-height: var(--lh-h2);      letter-spacing: var(--tracking-h2);      font-weight: var(--fw-semibold); }
.text-h3       { font-size: var(--fs-h3);      line-height: var(--lh-h3);      letter-spacing: var(--tracking-h3);      font-weight: var(--fw-semibold); }
.text-h4       { font-size: var(--fs-h4);      line-height: var(--lh-h4);      letter-spacing: var(--tracking-h4);      font-weight: var(--fw-semibold); }
.text-body     { font-size: var(--fs-body);    line-height: var(--lh-body);    font-weight: var(--fw-regular); }
.text-body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-body);    font-weight: var(--fw-regular); }
.text-caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tracking-caption); font-weight: var(--fw-medium); text-transform: uppercase; }
.text-mono     { font-family: var(--font-mono); font-size: var(--fs-mono); }

.text-ink     { color: var(--color-ink); }
.text-slate   { color: var(--color-slate); }
.text-stone   { color: var(--color-stone); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-surface { color: var(--color-surface); }
.text-success { color: var(--color-success-ink); }
.text-danger  { color: var(--color-danger-ink); }
.text-warning { color: var(--color-warning-ink); }
.text-info    { color: var(--color-info-ink); }

.fw-regular   { font-weight: var(--fw-regular); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.italic      { font-style: italic; }
.tabular     { font-variant-numeric: tabular-nums; }
.mono        { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-caption); }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }

/* ── Visibility / layout modifiers ────────────────────────────────────────── */

.hidden      { display: none !important; }
.block       { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 901px) {
  .hide-desktop { display: none !important; }
}

/* ── Surfaces / misc ──────────────────────────────────────────────────────── */

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

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: var(--radius-full); }

.border    { border: 1px solid var(--color-border); }
.border-t  { border-top: 1px solid var(--color-border); }
.border-b  { border-bottom: 1px solid var(--color-border); }

.shadow-none  { box-shadow: none; }
.shadow-xs    { box-shadow: var(--shadow-xs); }
.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }
.shadow-modal { box-shadow: var(--shadow-modal); }
.shadow-cta   { box-shadow: var(--shadow-cta); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }

/* ── Page layout helpers ──────────────────────────────────────────────────── */

.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.page-title  { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-h1); line-height: var(--lh-h1); color: var(--color-ink); margin: 0; }
.page-subtitle { font-size: var(--fs-body); color: var(--color-slate); margin: 0; }

.section-title   { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-h3); color: var(--color-ink); margin: 0 0 var(--space-sm); }
.section-caption { font-size: var(--fs-caption); letter-spacing: var(--tracking-caption); font-weight: var(--fw-medium); text-transform: uppercase; color: var(--color-accent); margin: 0 0 4px; }