/* ============================================================
   Damask — Foundations
   Consumer pages import this AFTER tokens.css + fonts.css.
   Contains: base body typography, layout primitives (.wrap, .block,
   .block-head), shared chrome (.eyebrow, .topbar, .brandmark, .status,
   .intro, .pill, .fontnote, .display).

   Every component's CSS assumes these are loaded on the page. Pure
   components (no shared chrome) can skip foundations, but page-composed
   surfaces should always include it.
   ============================================================ */

@import 'tokens/tokens.css';

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---- Layout primitives ---- */
.wrap { max-width: var(--ds-maxw); margin: 0 auto; padding: 0 var(--ds-s5); }

.block { padding: var(--ds-s7) 0; border-top: 1px solid var(--ds-line); }
.block:first-of-type { border-top: 0; }

.block-head { margin-bottom: var(--ds-s6); }
.block-head h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-t-h2);
  font-weight: 600;
  margin: var(--ds-s2) 0 0;
  color: var(--ds-text);
}
.block-head p {
  color: var(--ds-text-dim);
  max-width: 60ch;
  margin: var(--ds-s2) 0 0;
  font-size: var(--ds-t-sm);
}

/* ---- Shared chrome ---- */
.display { font-family: var(--ds-font-display); }

.eyebrow {
  font-size: var(--ds-t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-text-dim);
  font-weight: 600;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ds-s4);
  padding: var(--ds-s6) 0;
  flex-wrap: wrap;
}
.brandmark {
  font-family: var(--ds-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--ds-text);
  font-weight: 600;
}
.status {
  font-size: var(--ds-t-sm);
  color: var(--ds-text-dim);
  font-variant-numeric: tabular-nums;
}

.intro {
  padding: 0 0 var(--ds-s7);
  border-bottom: 1px solid var(--ds-line-strong);
}
.intro p { max-width: 64ch; color: var(--ds-text-2); margin: var(--ds-s3) 0 0; }
.intro b { color: var(--ds-text); font-weight: 600; }

.pill {
  display: inline-block;
  font-size: var(--ds-t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-dim);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r1);
  padding: 4px 10px;
  margin-top: var(--ds-s5);
}

.fontnote {
  font-size: var(--ds-t-sm);
  color: var(--ds-text-dim);
  margin-top: var(--ds-s4);
  max-width: 64ch;
}
.fontnote code {
  color: var(--ds-text-2);
  background: var(--ds-surface-2);
  padding: 1px 6px;
  border-radius: var(--ds-r1);
  font-family: ui-monospace, SFMono-Regular, monospace;
}