/*
 * Design tokens. DESIGN.md is the source of truth: change a value there first, then here.
 * Views and component CSS use these variables, never raw hex.
 */
:root {
  --mx-color-navy: #071640;
  --mx-color-ink: #1F2A44;
  --mx-color-muted: #5B6478;
  --mx-color-gold: #E5B03E;
  --mx-color-gold-deep: #B0802A;
  --mx-color-gold-tint: #F0E6C9;
  --mx-color-cream: #FBF9F4;
  --mx-color-cream-alt: #F5F2EA;
  --mx-color-surface: #FFFFFF;
  --mx-color-line: #E3DED2;
  --mx-color-on-navy: #FFFFFF;
  --mx-color-on-gold: #071640;
  --mx-color-success: #1F7A4D;
  --mx-color-warning: #A15C07;
  --mx-color-danger: #B42318;
  --mx-color-info: #2A4A8F;
  --mx-color-whatsapp: #25D366;

  --mx-font-display: "Libre Baskerville", Baskerville, Georgia, serif;
  --mx-font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --mx-rounded-none: 0;
  --mx-rounded-sm: 4px;
  --mx-rounded-md: 8px;
  --mx-rounded-lg: 12px;
  --mx-rounded-pill: 9999px;

  --mx-space-xs: 4px;
  --mx-space-sm: 8px;
  --mx-space-md: 16px;
  --mx-space-lg: 24px;
  --mx-space-xl: 32px;
  --mx-space-xxl: 48px;

  --mx-shadow-sm: 0 1px 2px rgba(7, 22, 64, 0.08);
  --mx-shadow-md: 0 8px 24px rgba(7, 22, 64, 0.12);
}