/* ── Reset & Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Utility – Display ─────────────────────────────────────────────── */
.hidden       { display: none; }
.flex-row     { display: flex; align-items: center; }
.flex-wrap    { display: flex; flex-wrap: wrap; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.inline-flex  { display: inline-flex; align-items: center; }

/* ── Utility – Text color ──────────────────────────────────────────── */
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-error     { color: var(--color-error); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-accent    { color: var(--color-accent); }

/* ── Utility – Text size ───────────────────────────────────────────── */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md); }

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

/* ── Utility – Spacing margin ──────────────────────────────────────── */
.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); }
.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); }

/* ── Utility – Gap ─────────────────────────────────────────────────── */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ── Utility – Common ──────────────────────────────────────────────── */
.w-full        { width: 100%; }
.overflow-auto { overflow: auto; }
.cursor-pointer { cursor: pointer; }