@layer base {

  /* ── Typography foundation ─────────────────────────────────────── */

  body {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-surface-primary);
  }

  /* ── Headings — serif, tight leading ───────────────────────────── */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: var(--leading-tight);
    color: var(--color-neutral-900);
    font-weight: 700;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  h4 { font-size: var(--text-md); }
  h5 { font-size: var(--text-base); }
  h6 { font-size: var(--text-base); }

  /* ── Body text — serif, relaxed leading, constrained measure ──── */

  p {
    line-height: var(--leading-relaxed);
    max-width: 68ch;
  }

  /* ── Secondary text — sans ─────────────────────────────────────── */

  small,
  figcaption,
  caption {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
  }

  /* ── Links ─────────────────────────────────────────────────────── */

  a {
    color: var(--color-accent-text, var(--color-text-primary));
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-normal) ease-out;
  }

  a:hover {
    color: var(--color-accent-hover, var(--color-text-secondary));
  }

  a:focus-visible {
    outline: 2px solid var(--color-accent-base, var(--color-text-primary));
    outline-offset: 2px;
  }

  /* ── Code — mono ───────────────────────────────────────────────── */

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  pre {
    padding: var(--space-4);
    background-color: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-default);
    overflow-x: auto;
    line-height: var(--leading-normal);
  }

  code {
    padding: 0.125em 0.25em;
    background-color: var(--color-surface-tertiary);
  }

  pre code {
    padding: 0;
    background-color: transparent;
  }

  /* ── Tables — serif values, sans headers ───────────────────────── */

  table {
    width: 100%;
    font-size: var(--text-base);
  }

  th {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-emphasis);
    line-height: var(--leading-normal);
  }

  td {
    font-family: var(--font-serif);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-default);
    line-height: var(--leading-normal);
  }

  /* ── Forms — sans for labels, serif for inputs ─────────────────── */

  label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    display: block;
  }

  input,
  textarea,
  select {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-default);
    padding: var(--space-2) var(--space-3);
    line-height: var(--leading-normal);
    transition: border-color var(--duration-normal) ease-out;
    width: 100%;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--color-accent-base, var(--color-border-emphasis));
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-text-tertiary);
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    margin-right: var(--space-2);
  }

  textarea {
    resize: vertical;
    min-height: calc(var(--text-base) * 3 * var(--leading-relaxed));
  }

  select {
    cursor: pointer;
  }

  /* ── Buttons — sans ────────────────────────────────────────────── */

  button {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-default);
    background-color: var(--color-surface-primary);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    transition:
      background-color var(--duration-normal) ease-out,
      border-color var(--duration-normal) ease-out;
    min-height: 32px;
  }

  button:hover {
    background-color: var(--color-surface-secondary);
  }

  button:active {
    background-color: var(--color-surface-tertiary);
  }

  button:focus-visible {
    outline: 2px solid var(--color-accent-base, var(--color-text-primary));
    outline-offset: 2px;
  }

  button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ── Prose container ───────────────────────────────────────────── */

  .prose {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    max-width: 68ch;
  }

  .prose > * + * {
    margin-top: var(--space-4);
  }

  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4 {
    margin-top: var(--space-8);
  }

  .prose h1 + *,
  .prose h2 + *,
  .prose h3 + *,
  .prose h4 + * {
    margin-top: var(--space-4);
  }

  .prose ul,
  .prose ol {
    padding-left: var(--space-6);
  }

  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }

  .prose li + li {
    margin-top: var(--space-2);
  }

  .prose blockquote {
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-border-emphasis);
    color: var(--color-text-secondary);
    font-style: italic;
  }

  .prose hr {
    border: none;
    border-top: 1px solid var(--color-border-default);
    margin: var(--space-8) 0;
  }

  .prose img {
    margin: var(--space-4) 0;
  }

  .prose strong { font-weight: 700; }
  .prose em { font-style: italic; }

  /* ── Reduced motion ────────────────────────────────────────────── */

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