:root {
  /* Surfaces */
  --surface-page: var(--sand-25);
  --surface-card: var(--sand-0);
  --surface-sunken: var(--sand-50);
  --surface-muted: var(--sand-100);
  --surface-inverse: var(--sand-900);
  --surface-brand: var(--ziegel-600);
  --surface-brand-soft: var(--ziegel-50);
  --surface-accent-soft: var(--honig-50);
  --surface-nature-soft: var(--wald-50);

  /* Text */
  --text-strong: var(--sand-900);
  --text-body: var(--sand-800);
  --text-muted: var(--sand-600);
  --text-subtle: var(--sand-500);
  --text-on-brand: var(--sand-25);
  --text-on-inverse: var(--sand-50);
  --text-brand: var(--ziegel-600);
  --text-link: var(--ziegel-600);
  --text-link-hover: var(--ziegel-800);

  /* Borders */
  --border-subtle: var(--sand-100);
  --border-default: var(--sand-200);
  --border-strong: var(--sand-300);
  --border-brand: var(--ziegel-600);
  --border-inverse: rgba(250, 242, 233, 0.18);

  /* States */
  --state-success-fg: var(--wald-800);
  --state-success-bg: var(--wald-50);
  --state-success-solid: var(--wald-600);
  --state-warning-fg: var(--honig-800);
  --state-warning-bg: var(--honig-50);
  --state-warning-solid: var(--honig-500);
  --state-danger-fg: var(--ziegel-800);
  --state-danger-bg: var(--ziegel-50);
  --state-danger-solid: var(--ziegel-600);
  --state-info-fg: var(--elbe-800);
  --state-info-bg: var(--elbe-50);
  --state-info-solid: var(--elbe-600);

  /* Type roles */
  --type-display: var(--weight-bold) var(--text-5xl) / var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-bold) var(--text-4xl) / var(--leading-snug) var(--font-display);
  --type-h2: var(--weight-bold) var(--text-3xl) / var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-display);
  --type-body: var(--weight-regular) var(--text-md) / var(--leading-relaxed) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
  --type-label: var(--weight-semibold) var(--text-2xs) / 1.2 var(--font-sans);
  --type-price: var(--weight-bold) var(--text-md) / 1 var(--font-mono);
}