/*
 * GENERATED FROM mesainc/mesa-site-v2/design-system/tokens.json.
 * Run: npm run sync:design-system
 */
:root {
  --surface-000: #ffffff;
  --surface-100: #f7f5f0;
  --surface-200: #e8dbca;
  --surface-drama: #70122f;
  --surface-deep: #2b0014;
  --ink: #303d47;
  --ink-muted: #6c777e;
  --ink-display: #70122f;
  --on-drama: #ffffff;
  --brand: #ed423a;
  --brand-hover: #be352f;
  --brand-active: #bf2725;
  --on-brand: #ffffff;
  --border: #dbd4c8;
  --border-strong: #bfb3a0;
  --focus: #85bde0;
  --link: #be352f;
  --pending: #be352f;
  --graphic-red: #ed423a;
  --graphic-wine: #70122f;
  --graphic-sand: #e8dbca;
  --graphic-slate: #303d47;

  /* Named dark-surface aliases, derived from the same token file. */
  --surface-night: #202926;
  --surface-slate: #303d47;
  --surface-slate-2: #3b4852;
  --border-dark: #3b4852;
  --on-dark: #f7f5f0;
  --on-dark-muted: #c9b6a7;
  --on-dark-accent: #f7a29c;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 2px 8px rgba(112, 18, 47, 0.08);
  --shadow-card: 0 12px 32px rgba(112, 18, 47, 0.12);
  --shadow-focus: 0 0 0 3px #85bde0;

  --rule-hair: 1px;
  --rule-heading: 2px;
  --rule-accent: 3px;

  --font-display: "Fraunces Soft", "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}