:root {
  --mte-color-ink: #101416;
  --mte-color-signal: #c5fa00;
  --mte-color-paper: #f7f7f2;
  --mte-color-graphite: #4d5556;
  --mte-color-mist: #d9dedc;
  --mte-color-white: #ffffff;

  --mte-font-display: "Manrope", "Arial", sans-serif;
  --mte-font-text: "Inter", "Arial", sans-serif;

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

  --mte-radius-small: 8px;
  --mte-radius-medium: 16px;
  --mte-radius-icon: 24px;

  --mte-motion-fast: 180ms;
  --mte-motion-default: 240ms;
  --mte-ease-forward: cubic-bezier(0.22, 1, 0.36, 1);
}