/* =========================================================
   Base — reset, typography, layout primitives
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-headings); font-weight: 600; line-height: 1.2; }

/* Lucide icons render as <svg class="lucide">; size via --icon */
.lucide { width: var(--icon, 16px); height: var(--icon, 16px); flex-shrink: 0; stroke-width: 2; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

.surface-dark { background: var(--color-dark); color: var(--color-background); }
.surface-clay { background: var(--color-clay); border-block: 1px solid var(--color-border); }

.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-sm { gap: 16px; }
.grid--gap-md { gap: 20px; }
.grid--gap-lg { gap: 48px; }
.grid--gap-xl { gap: 64px; }
.grid--center { align-items: center; }
.grid--start { align-items: start; }

@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--gap-xl, .grid--gap-lg { gap: 40px; }
}
@media (max-width: 480px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Small utilities ---------- */
.mt-lg { margin-top: 40px; }
.mt-xl { margin-top: 48px; }
.mt-2xl { margin-top: 64px; }
.mb-xl { margin-bottom: 48px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-prose { max-width: 768px; }
.maxw-narrow { max-width: 672px; }
.muted { color: var(--color-muted-foreground); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}