/* ============================================================
   Vestinit — Utilities  (ITP-03B Visual Refresh)
   Reusable helpers + brand-device primitives.
   Requires design-tokens.css. Load LAST so utility overrides win.
   ============================================================ */

/* ── Brand-device primitives ── */
.ground { background-color: var(--ground); background-image: var(--pinstripe); color: #fff; }
.ground-deep { background-color: var(--ground-deep); background-image: var(--pinstripe); color: #fff; }
.pinstripe { background-image: var(--pinstripe); }
.on-ground-muted { color: rgba(255,255,255,0.6); }
.rose { color: var(--rose); }

/* ── Type helpers ── */
.font-display { font-family: var(--font-display); }
.font-serif-alt { font-family: var(--font-serif-alt); }
.font-body { font-family: var(--font-body); }
.italic-accent { font-family: var(--font-display); font-style: italic; color: var(--accent); }
.eyebrow, .label-caps {
  font-size: 0.656rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.tabular { font-variant-numeric: tabular-nums; }

/* ── Text colours ── */
.text-accent  { color: var(--accent); }
.text-green   { color: var(--ok); }
.text-gold    { color: var(--gold); }
.text-gray    { color: var(--text-secondary); }
.text-red     { color: var(--red); }
.text-primary { color: var(--text-primary); }
.text-rose    { color: var(--rose); }
.gain { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.loss { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.text-sm { font-size: 0.813rem; }
.text-xs { font-size: 0.688rem; }
.font-mono { font-family: 'Courier New', monospace; }
.font-bold { font-weight: 700; }

/* ── Layout helpers ── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-22 { gap: 22px; }
.w-full { width: 100%; }
.separator { height: 1px; background: var(--border-subtle); margin: 18px 0; }

/* ── Empty state (dashed rose well) ── */
.empty-state { border: 1px dashed var(--border-default); border-radius: var(--radius); padding: 22px; text-align: center; }
.empty-state .empty-glyph { color: var(--rose); font-size: 0.875rem; margin-bottom: 8px; }
.empty-state p { font-size: 0.813rem; color: var(--text-secondary); margin: 0; line-height: 1.55; }

/* ── Verification / "needs eng confirmation" chip ── */
.verify-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.656rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-bg); padding: 4px 10px; border-radius: 6px;
}

/* ── Diamond glyph (◆) accent used across brand devices ── */
.diamond { color: var(--accent); }
.diamond-rose { color: var(--rose); }

/* ── Margin scale ── */
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }