/* Global baseline — reset + editorial type discipline */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* Editorial serif utility */
.serif      { font-family: var(--font-serif); font-feature-settings: "lnum","onum" off; letter-spacing: -0.005em; }
.rounded    { font-family: var(--font-round); }
.mono       { font-family: var(--font-mono); }
.tabular    { font-variant-numeric: tabular-nums; }

/* Heading rhythm */
.eyebrow {
  font: 600 var(--t-caption) / 1.2 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.display {
  font: 600 var(--t-display) / 1.02 var(--font-serif);
  letter-spacing: -0.022em;
  color: var(--ink);
}
.title    { font: 600 var(--t-title) / 1.15 var(--font-ui);    letter-spacing: -0.015em; }
.title2   { font: 600 var(--t-title2) / 1.2 var(--font-ui);   letter-spacing: -0.012em; }
.headline { font: 600 var(--t-headline) / 1.3 var(--font-ui); letter-spacing: -0.008em; }
.body     { font: 400 var(--t-body) / 1.45 var(--font-ui);    letter-spacing: -0.003em; }
.callout  { font: 500 var(--t-callout) / 1.35 var(--font-ui); }
.subhead  { font: 500 var(--t-subhead) / 1.35 var(--font-ui); color: var(--ink-2); }
.footnote { font: 500 var(--t-footnote) / 1.3 var(--font-ui); color: var(--ink-2); }
.caption  { font: 500 var(--t-caption) / 1.2 var(--font-ui);  color: var(--ink-3); }
.caption2 { font: 600 var(--t-caption2) / 1.2 var(--font-ui); color: var(--ink-3); letter-spacing: 0.02em; }

/* Scrollbar discipline — invisible by default in mockups */
*::-webkit-scrollbar { width: 0; height: 0; }

/* iOS-style focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Utility */
.row    { display: flex; align-items: center; }
.col    { display: flex; flex-direction: column; }
.gap-1  { gap: var(--s-1); }
.gap-2  { gap: var(--s-2); }
.gap-3  { gap: var(--s-3); }
.gap-4  { gap: var(--s-4); }
.gap-6  { gap: var(--s-6); }
.gap-8  { gap: var(--s-8); }
.center { display: flex; align-items: center; justify-content: center; }
.between{ display: flex; align-items: center; justify-content: space-between; }