/* DATA — base element styles (DATA Design System css/ layer).
   Consumes the --ui-* semantic layer (design/theme.css) over the --data-*
   palette (design/tokens.css). Tokens only; no hex literals (CI guardrail). */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--ui-text);
  background: var(--ui-bg);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-3); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--ui-text);
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.5px; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
p { margin: 0; }
a { color: var(--ui-brand); }

.display { font-size: var(--fs-display); line-height: var(--lh-h1); letter-spacing: -0.5px; }

.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--ui-brand);
}

.icon { display: inline-flex; width: 24px; height: 24px; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; fill: currentColor; }

:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; }

/* ---- Skip link (a11y — first focusable element on every page) ---------- */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ui-brand); color: var(--ui-on-brand);
  padding: 10px 18px; border-radius: 0 0 var(--radius-card) var(--radius-card);
  font-weight: var(--fw-semibold); text-decoration: none; transition: top .15s ease;
}
.skip-link:focus-visible { top: 0; }

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