/* ============================================================================
   foundation.css — shared utility layer (single source of truth)
   ----------------------------------------------------------------------------
   Linked by base.html AND the standalone/island layouts (layout_auth, portal,
   public, error) so utility classes stop dying on pages that bypass base.html.
   Values are token-based (tokens.css) → dark mode follows automatically; every
   var() carries a literal fallback that mirrors the legacy value in style.css,
   so utilities still resolve on any island page that doesn't load tokens.css.
   See docs/wip/WIP-css-remediation.md (Phase 0).
   ============================================================================ */

/* ── Text alignment ─────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Font size ──────────────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs, 0.75rem); }
.text-sm   { font-size: var(--text-sm, 0.8125rem); }
.text-base { font-size: var(--text-base, 0.8125rem); }
.text-md   { font-size: var(--text-md, 1rem); }
.text-lg   { font-size: var(--text-lg, 1.125rem); }

/* ── Font weight / family ───────────────────────────────────────────────── */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ── Text decoration / vertical align ───────────────────────────────────── */
.no-underline { text-decoration: none; }
.align-middle { vertical-align: middle; }

/* ── Color ──────────────────────────────────────────────────────────────── */
.muted    { color: var(--color-text-muted, #6b7280); }
.text-red { color: var(--color-danger, #ef4444); }

/* ── Display / flex ─────────────────────────────────────────────────────── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.flex-wrap   { flex-wrap: wrap; }
.flex-col    { display: flex; flex-direction: column; }
.flex-1      { flex: 1; }
.flex-2      { flex: 2; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-min-0  { flex: 1; min-width: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

/* ── Gap (off-token *-5 values mirror style.css) ────────────────────────── */
.gap-1   { gap: var(--space-1, 4px); }
.gap-1-5 { gap: 6px; }
.gap-2   { gap: var(--space-2, 8px); }
.gap-2-5 { gap: 10px; }
.gap-3   { gap: var(--space-3, 12px); }
.gap-3-5 { gap: 14px; }
.gap-4   { gap: var(--space-4, 16px); }

/* ── Margin top (off-token *-5 values mirror style.css) ─────────────────── */
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: var(--space-1, 4px); }
.mt-1-5 { margin-top: 6px; }
.mt-2   { margin-top: var(--space-2, 8px); }
.mt-2-5 { margin-top: 10px; }
.mt-3   { margin-top: var(--space-3, 12px); }
.mt-3-5 { margin-top: 14px; }
.mt-4   { margin-top: var(--space-4, 16px); }
.mt-6   { margin-top: var(--space-6, 24px); }

/* ── Margin bottom ──────────────────────────────────────────────────────── */
.mb-1   { margin-bottom: var(--space-1, 4px); }
.mb-2   { margin-bottom: var(--space-2, 8px); }
.mb-2-5 { margin-bottom: 10px; }
.mb-3   { margin-bottom: var(--space-3, 12px); }
.mb-4   { margin-bottom: var(--space-4, 16px); }
.mb-6   { margin-bottom: var(--space-6, 24px); }

/* ── Margin left/right ──────────────────────────────────────────────────── */
.mr-1 { margin-right: var(--space-1, 4px); }
.mr-2 { margin-right: var(--space-2, 8px); }
.ml-1 { margin-left: var(--space-1, 4px); }
.ml-2 { margin-left: var(--space-2, 8px); }

/* ── Padding ────────────────────────────────────────────────────────────── */
.p-2 { padding: var(--space-2, 8px); }
.p-3 { padding: var(--space-3, 12px); }
.p-4 { padding: var(--space-4, 16px); }

/* ── Width helpers ──────────────────────────────────────────────────────── */
.full-width { width: 100%; }
.w-10  { width: 10px; }
.w-36  { width: 36px; }
.w-160 { width: 160px; }
.max-w-150 { max-width: 150px; }
.max-w-240 { max-width: 240px; }
.max-w-280 { max-width: 280px; }
.max-w-300 { max-width: 300px; }

/* ── Text overflow ──────────────────────────────────────────────────────── */
/* Single-line ellipsis (the .truncate-NNN variants in style.css add a fixed
   max-width; this bare base clips to whatever width the element already has). */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Display state ──────────────────────────────────────────────────────── */
.hidden { display: none !important; }