/* styles/utilities.css — small single-purpose helpers. No component logic here. */

/* Flex / grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.flex-none { flex: 0 0 auto; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* Spacing */
.mt-0 { margin-top: 0; }   .mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }  .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }  .mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }

/* Text */
.t-11 { font-size: var(--fs-11); }
.t-12 { font-size: var(--fs-12); }
.t-13 { font-size: var(--fs-13); }
.t-14 { font-size: var(--fs-14); }
.t-16 { font-size: var(--fs-16); }
.t-18 { font-size: var(--fs-18); }
.t-secondary { color: var(--text-secondary); }
.t-muted { color: var(--text-muted); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-danger  { color: var(--danger); }
.t-info    { color: var(--info); }
.t-brand   { color: var(--brand-green); }
.t-gold    { color: #8A6912; }
[data-theme="dark"] .t-gold { color: var(--brand-gold); }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-medium { font-weight: var(--fw-medium); }
.t-semibold { font-weight: var(--fw-semibold); }
.t-bold { font-weight: var(--fw-bold); }
.t-upper { text-transform: uppercase; letter-spacing: 0.06em; }
.t-nowrap { white-space: nowrap; }
.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.label-cap {
  font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: var(--fw-semibold);
}

/* Borders & surfaces */
.bordered { border: 1px solid var(--border); border-radius: var(--radius); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.surface { background: var(--bg-surface); }
.surface-alt { background: var(--bg-surface-alt); }

/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.max-560 { max-width: 560px; }
.max-720 { max-width: 720px; }

/* Visibility */
.hidden { display: none !important; }
@media (max-width: 900px) { .hide-sm { display: none !important; } }
@media (max-width: 1180px) { .hide-md { display: none !important; } }

/* Icon sizing helper — heroicons render at currentColor */
.icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 40px; height: 40px; }