/* Tokens mirror the Figma variables in "00 · Brand & Foundations". */
:root {
  /* brand */
  --brand-ink: #15181a;
  --brand-charcoal: #1b1f1d;
  --brand-creme: #ede6d3;
  --brand-creme-muted: #beb39a;
  --brand-ember: #d9553f;

  /* site */
  --site-canvas: #faeeda;
  --site-surface: #fffaf3;
  --site-raised: #ffffff;
  --site-muted: #f1efe8;
  --site-text-primary: #412402;
  --site-text-secondary: #68503b;
  --site-text-muted: #755e48;
  --site-border-subtle: #d5c7b5;
  --site-border-control: #86715b;
  --site-primary: #a73230;
  --site-on-primary: #faeeda;
  --site-accent: #ef9f27;
  --site-on-accent: #412402;
  --site-accent-text: #89500d;

  /* cards */
  --card-face: #fffdf8;
  --card-main: #2f7d4f;
  --card-plus: #2d5f9e;
  --card-minus: #b8312f;
  --card-special: #b07a1c;

  /* type: Nunito scale (size / line-height / tracking) */
  --font-sans: "Nunito", system-ui, sans-serif;
  --text-display: 700 64px/68px var(--font-sans);
  --text-h1: 700 52px/56px var(--font-sans);
  --text-h2: 700 36px/42px var(--font-sans);
  --text-h3: 700 24px/30px var(--font-sans);
  --text-lead: 400 20px/30px var(--font-sans);
  --text-body: 400 17px/26px var(--font-sans);
  --text-small: 400 14px/20px var(--font-sans);
  --text-caption: 400 12px/16px var(--font-sans);
  --text-eyebrow: 700 13px/16px var(--font-sans);
  --text-button: 600 17px/22px var(--font-sans);
  --text-nav: 600 15px/20px var(--font-sans);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--site-canvas); color: var(--site-text-primary); font: var(--text-body); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1rem; }
main { display:flex; flex-direction:column; align-items:center; gap:1.5rem; max-width:48rem; }

.lockup { display:inline-flex; align-items:center; gap:10px; }
.lockup__mark { flex-shrink:0; }
.lockup__name { font-weight:900; font-size:36px; letter-spacing:-0.72px; color:var(--site-text-primary); }

h1 { margin: 0; font: var(--text-display); letter-spacing: -1px; }
.lead { margin: 0; font: var(--text-lead); color: var(--site-text-secondary); }

@media (max-width: 600px) {
  h1 { font: var(--text-h1); letter-spacing: -0.5px; }
}