/* styles/layout.css */

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background:
    radial-gradient(1200px 700px at 30% 20%, var(--blob-1), transparent 55%),
    radial-gradient(1000px 600px at 70% 60%, var(--blob-2), transparent 55%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: var(--s-6);
}

/* Layout primitives */
.container {
  width: min(720px, 100%);
  text-align: center;
}

.stack > * + * { margin-top: var(--s-4); }  /* simple vertical rhythm */

.h1 {
  font-size: clamp(var(--fs-40), 6vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: var(--s-0);
}

/* Text helpers */
.text-muted { color: var(--muted); }
.text-xs { font-size: var(--fs-12); }
.text-sm { font-size: var(--fs-14); }
.text-md { font-size: var(--fs-16); }

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}