/* Generated from design/tokens.json. Run npm run tokens. */
:root {
  --mb-font-family: Manrope, Arial, sans-serif;
  --mb-font-weight-regular: 400;
  --mb-font-weight-medium: 600;
  --mb-font-weight-strong: 800;
  --mb-color-canvas: #ffffff;
  --mb-color-surface: #f3f5f4;
  --mb-color-ink: #19231e;
  --mb-color-muted: #59635d;
  --mb-color-border: #d7ddd9;
  --mb-color-action: #19231e;
  --mb-color-on-action: #ffffff;
  --mb-color-brand: #d34929;
  --mb-color-focus: #175cd3;
  --mb-color-success: #246b3d;
  --mb-color-success-surface: #e0f0e4;
  --mb-color-error: #a82b2b;
  --mb-color-error-surface: #fbe7e7;
  --mb-color-bollywood: #f7ca46;
  --mb-color-cricket: #c9dfba;
  --mb-color-desi: #f0bea6;
  --mb-color-room: #c5d9f4;
  --mb-color-mix: #ded7ec;
  --mb-color-on-pack: #19231e;
  --mb-color-stage-border: #768077;
  --mb-color-disabled: #e4e8e5;
  --mb-color-disabled-ink: #68736c;
  --mb-space-1: 4px;
  --mb-space-2: 8px;
  --mb-space-3: 12px;
  --mb-space-4: 16px;
  --mb-space-5: 24px;
  --mb-space-6: 32px;
  --mb-space-7: 48px;
  --mb-space-8: 64px;
  --mb-space-9: 96px;
  --mb-radius-control: 8px;
  --mb-radius-panel: 16px;
  --mb-radius-dot: 50%;
  --mb-type-hero: 64px;
  --mb-type-section: 36px;
  --mb-type-question: 36px;
  --mb-type-title: 24px;
  --mb-type-body: 16px;
  --mb-type-small: 14px;
  --mb-type-caption: 12px;
  --mb-layout-max: 1200px;
  --mb-layout-gutter: 32px;
  --mb-layout-mobile-gutter: 20px;
  --mb-layout-control-height: 48px;
  --mb-layout-answer-height: 64px;
  --mb-motion-feedback: 140ms;
  --mb-motion-reveal: 220ms;
  --mb-motion-ease: cubic-bezier(.2,.8,.2,1);
}