/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.5;
  font-size: var(--text-base);
}

/* ── Display ── */
.block  { display: block; }
.flex   { display: flex; }
.grid   { display: grid; }
.hidden { display: none; }

/* ── Flex ── */
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

/* ── Gap ── */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ── Spacing ── */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.m-0 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

/* ── Width ── */
.w-full { width: 100%; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 36rem; }
.max-w-xl  { max-width: 48rem; }
.max-w-screen { max-width: 1320px; }

/* ── Typography ── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-mono   { font-family: var(--font-mono); }
.uppercase   { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.4px; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  white-space: nowrap;
}

/* ── Colors ── */
.text-ink    { color: var(--color-ink); }
.text-muted  { color: var(--color-muted); }
.text-ok     { color: var(--color-ok); }
.text-warn   { color: var(--color-warn); }
.text-err    { color: var(--color-err); }
.text-blue   { color: var(--color-blue); }
.text-accent { color: var(--color-accent); }
.text-white  { color: #fff; }
.bg-card   { background: var(--color-card); }
.bg-zebra  { background: var(--color-zebra); }
.bg-ink    { background: var(--color-ink); }
.bg-ok     { background: var(--color-ok-bg); }
.bg-warn   { background: var(--color-warn-bg); }
.bg-err    { background: var(--color-err-bg); }

/* ── Border ── */
.border     { border: 1px solid var(--color-line); }
.border-t   { border-top: 1px solid var(--color-line); }
.border-b   { border-bottom: 1px solid var(--color-line); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadow ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow-md); }

/* ── Overflow ── */
.overflow-auto   { overflow: auto; }
.overflow-hidden { overflow: hidden; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }

/* ── Transitions ── */
.transition { transition: all 0.15s ease; }