body {
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  color: var(--color-on-surface);
  background: var(--color-surface);
  min-height: 100vh;
  transition: background-color var(--duration-medium) var(--easing-standard),
              color var(--duration-medium) var(--easing-standard);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

.display-lg { font-family: var(--font-display); font-size: var(--type-display-lg); font-weight: 500; letter-spacing: -0.02em; line-height: 1.0; }
.display-md { font-family: var(--font-display); font-size: var(--type-display-md); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; }
.display-sm { font-family: var(--font-display); font-size: var(--type-display-sm); font-weight: 500; line-height: 1.1; }
.headline-md { font-family: var(--font-display); font-size: var(--type-headline-md); font-weight: 500; line-height: 1.2; }
.title-lg { font-family: var(--font-display); font-size: var(--type-title-lg); font-weight: 500; line-height: 1.3; }
.title-md { font-family: var(--font-body); font-size: var(--type-title-md); font-weight: 500; line-height: 1.4; }
.body-md { font-family: var(--font-body); font-size: var(--type-body-md); font-weight: 400; }
.label-md { font-family: var(--font-body); font-size: var(--type-label-md); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.numeric { font-variant-numeric: tabular-nums; }

/* Focus ring — M3 tone, WF accent */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}