body {
  /* Core surface roles. */
  --fm-canvas: var(--fm-color-canvas);
  --fm-surface: var(--fm-color-white);
  --fm-surface-soft: var(--fm-color-surface-soft);
  --fm-surface-warm: var(--fm-color-surface-warm);
  --fm-ink: var(--fm-color-ink-950);
  --fm-muted: var(--fm-color-ink-600);
  --fm-line: var(--fm-color-line);
  --fm-line-strong: var(--fm-color-line-strong);
  --fm-accent: var(--fm-color-ink-800);
  --fm-accent-strong: var(--fm-color-ink-900);
  --fm-accent-soft: var(--fm-color-surface-soft);
  --fm-accent-line: var(--fm-color-line-strong);

  /* Typography roles shared by every surface. */
  --fm-text-caption-size: var(--fm-font-size-xs);
  --fm-text-small-size: var(--fm-font-size-sm);
  --fm-text-body-size: var(--fm-font-size-md);
  --fm-text-lead-size: var(--fm-font-size-lg);
  --fm-title-card-size: var(--fm-font-size-lg);
  --fm-title-section-size: var(--fm-font-size-xl);
  --fm-title-page-size: var(--fm-font-size-2xl);
  --fm-text-line-height: var(--fm-line-height-body);
  --fm-text-compact-line-height: var(--fm-line-height-compact);
  --fm-title-line-height: var(--fm-line-height-tight);
  --fm-label-weight: var(--fm-font-weight-semibold);
  --fm-title-weight: var(--fm-font-weight-bold);

  /* Rhythm and layout roles. */
  --fm-gap-control: var(--fm-space-2);
  --fm-gap-field: var(--fm-space-3);
  --fm-gap-content: var(--fm-space-4);
  --fm-gap-section: var(--fm-space-6);
  --fm-padding-control-inline: var(--fm-space-4);
  --fm-padding-card: var(--fm-space-4);
  --fm-padding-panel: var(--fm-space-5);
  --fm-page-gutter: clamp(var(--fm-space-4), 2.4vw, var(--fm-space-8));
  --fm-layout-content-max: var(--fm-content-max);
  --fm-layout-readable-max: 760px;
  --fm-layout-form-max: 620px;
  --fm-layout-sidebar-width: 272px;

  /* Shape, elevation and controls. */
  --fm-control-radius: var(--fm-radius-sm);
  --fm-card-radius: var(--fm-radius-md);
  --fm-panel-radius: var(--fm-radius-lg);
  --fm-dialog-radius: var(--fm-radius-xl);
  --fm-control-height-compact: var(--fm-control-height-sm);
  --fm-control-height: var(--fm-control-height-md);
  --fm-control-height-prominent: var(--fm-control-height-lg);
  --fm-panel-shadow: var(--fm-shadow-card);
  --fm-overlay-shadow: var(--fm-shadow-raised);
  --fm-interactive-focus-ring: var(--fm-focus-ring);
  --fm-interactive-duration: var(--fm-motion-default);
  --fm-interactive-easing: var(--fm-ease-standard);

  /* Reusable component roles. */
  --fm-control-line: var(--fm-line-strong);
  --fm-control-surface: var(--fm-surface);
  --fm-control-hover-surface: var(--fm-surface-warm);
  --fm-control-active-surface: var(--fm-surface-soft);
  --fm-disabled-ink: var(--fm-color-ink-500);
  --fm-disabled-surface: var(--fm-color-surface-soft);
  --fm-disabled-line: var(--fm-color-line);
  --fm-placeholder-ink: var(--fm-color-ink-500);
  --fm-empty-surface: var(--fm-surface-warm);
  --fm-empty-line: var(--fm-line-strong);
  --fm-backdrop: rgba(21, 19, 15, 0.42);
  --fm-skeleton-base: #ebe7df;
  --fm-skeleton-highlight: #f8f6f1;

  /* Status roles: ink, surface and line always travel together. */
  --fm-success: var(--fm-color-success);
  --fm-success-soft: var(--fm-color-success-soft);
  --fm-success-line: var(--fm-color-success-line);
  --fm-warning: var(--fm-color-warning);
  --fm-warning-soft: var(--fm-color-warning-soft);
  --fm-warning-line: var(--fm-color-warning-line);
  --fm-danger: var(--fm-color-danger);
  --fm-danger-soft: var(--fm-color-danger-soft);
  --fm-danger-line: var(--fm-color-danger-line);
  --fm-info: var(--fm-accent);
  --fm-info-soft: var(--fm-accent-soft);
  --fm-info-line: var(--fm-accent-line);
}