:root {
  /* Color */
  --mc-color-ink: #2a1b1e;
  --mc-color-muted: #6f6265;
  --mc-color-brand: #e94b35;
  --mc-color-action: #b93627;
  --mc-color-action-hover: #982c21;
  --mc-color-wine: #651525;
  --mc-color-ivory: #fff9f4;
  --mc-color-white: #ffffff;
  --mc-color-blush: #f8e8e0;
  --mc-color-peach: #f4c5b5;
  --mc-color-sage: #a5b497;
  --mc-color-sage-dark: #46563f;
  --mc-color-champagne: #d3a65a;
  --mc-color-border: #e6dad5;
  --mc-color-success: #287a55;
  --mc-color-warning: #a85d12;
  --mc-color-error: #b42318;
  --mc-color-info: #245b9e;

  /* Typography */
  --mc-font-display: "Cormorant Garamond", Georgia, serif;
  --mc-font-ui: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mc-text-display-xl: clamp(2.75rem, 5vw, 4.5rem);
  --mc-text-display-lg: clamp(2.375rem, 4vw, 3.5rem);
  --mc-text-heading-xl: clamp(2rem, 3.2vw, 2.75rem);
  --mc-text-heading-lg: clamp(1.75rem, 2.5vw, 2.125rem);
  --mc-text-heading-md: clamp(1.375rem, 2vw, 1.5rem);
  --mc-text-body-lg: 1.125rem;
  --mc-text-body-md: 1rem;
  --mc-text-body-sm: 0.875rem;
  --mc-text-label: 0.8125rem;

  /* Spacing */
  --mc-space-1: 0.25rem;
  --mc-space-2: 0.5rem;
  --mc-space-3: 0.75rem;
  --mc-space-4: 1rem;
  --mc-space-5: 1.5rem;
  --mc-space-6: 2rem;
  --mc-space-7: 3rem;
  --mc-space-8: 4rem;
  --mc-space-9: 6rem;
  --mc-space-10: 7.5rem;
  --mc-space-11: 9rem;

  /* Shape */
  --mc-radius-sm: 0.625rem;
  --mc-radius-md: 0.875rem;
  --mc-radius-lg: 1.25rem;
  --mc-radius-xl: 1.75rem;
  --mc-radius-pill: 999px;
  --mc-border-subtle: 1px solid var(--mc-color-border);
  --mc-shadow-sm: 0 4px 14px rgb(42 27 30 / 8%);
  --mc-shadow-md: 0 12px 30px rgb(42 27 30 / 12%);
  --mc-shadow-lg: 0 22px 60px rgb(42 27 30 / 16%);

  /* Layout */
  --mc-container: 82.5rem;
  --mc-gutter: clamp(1.25rem, 4vw, 3.75rem);
  --mc-section-space: clamp(3.5rem, 8vw, 9rem);

  /* Motion */
  --mc-duration-fast: 160ms;
  --mc-duration-base: 240ms;
  --mc-duration-slow: 420ms;
  --mc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mc-focus: 0 0 0 3px rgb(185 54 39 / 30%);
}

@media (min-width: 75rem) and (max-width: 89.999rem) {
  :root { --mc-container: 70rem; --mc-gutter: 2.5rem; }
}
@media (min-width: 48rem) and (max-width: 74.999rem) {
  :root { --mc-gutter: 2rem; --mc-section-space: clamp(4.5rem, 8vw, 6rem); }
}
@media (max-width: 47.999rem) {
  :root { --mc-gutter: 1.25rem; --mc-section-space: clamp(3.5rem, 14vw, 4.5rem); --mc-text-body-lg: 1.0625rem; }
}