/* Reset + typography + structural base. Imports tokens. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-canvas-parchment);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

button { font-family: var(--font-text); cursor: pointer; }

/* ── Type scale ──────────────────────────── */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-line);
  letter-spacing: var(--type-hero-track);
  font-weight: 600;
  margin: 0;
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  font-weight: 600;
  margin: 0;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-track);
  font-weight: 600;
  margin: 0;
}
.t-lead {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  letter-spacing: var(--type-lead-track);
  font-weight: 400;
  margin: 0;
  color: var(--color-ink-muted-80);
}
.t-tagline {
  font-size: var(--type-tagline-size);
  line-height: var(--type-tagline-line);
  letter-spacing: var(--type-tagline-track);
  font-weight: 600;
  margin: 0;
}
.t-body { font-size: var(--type-body-size); line-height: var(--type-body-line); letter-spacing: var(--type-body-track); }
.t-body-strong { font-weight: 600; }
.t-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-line); letter-spacing: var(--type-caption-track); }
.t-caption-strong { font-weight: 600; }
.t-fine { font-size: var(--type-fine-size); line-height: var(--type-fine-line); letter-spacing: var(--type-fine-track); color: var(--color-ink-muted-48); }

.muted     { color: var(--color-ink-muted-80); }
.muted-soft{ color: var(--color-ink-muted-48); }
.on-dark   { color: var(--color-body-on-dark); }

/* ── Layout helpers ──────────────────────── */
.container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--sp-lg); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-lg); }

.section { padding: var(--sp-section) 0; }
.section-light    { background: var(--color-canvas); }
.section-parchment{ background: var(--color-canvas-parchment); }
.section-dark     { background: var(--color-tile-1); color: var(--color-body-on-dark); }

.stack-xs > * + * { margin-top: var(--sp-xs); }
.stack-sm > * + * { margin-top: var(--sp-sm); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }
.stack-xl > * + * { margin-top: var(--sp-xl); }

.row { display: flex; gap: var(--sp-sm); align-items: center; }
.row-between { display: flex; gap: var(--sp-sm); align-items: center; justify-content: space-between; }

/* Hide everything that's just structural fluff */
[hidden] { display: none !important; }