[data-theme="light"] {
  --mp-color-primary-light: #c7e7fc;
  --mp-color-primary-default: #1299f2;
  --mp-color-primary-dark: #118dde;
  --mp-color-primary-highlighted: #118dde;
  --mp-color-secondary-light: #c7e7fc;
  --mp-color-secondary-default: #1299f2;
  --mp-color-secondary-dark: #118dde;
  --mp-color-secondary-highlighted: #118dde;
  --mp-color-system-a-light: #fffcf1;
  --mp-color-system-a: #ffcb3b;
  --mp-color-system-a-dark: #ffbb00;
  --mp-color-system-b-light: #def3b4;
  --mp-color-system-b: #90c91f;
  --mp-color-system-b-dark: #689216;
  --mp-color-system-c-light: #fdf0f9;
  --mp-color-system-c: #f272c4;
  --mp-color-system-c-dark: #d757a9;
  --mp-color-system-d-light: #fff1eb;
  --mp-color-system-d: #fd7e40;
  --mp-color-system-d-dark: #ca6533;
  --mp-color-system-e-light: #dbf7f2;
  --mp-color-system-e: #4dd7be;
  --mp-color-system-e-dark: #3eac98;
  --mp-color-neutral-light: #e6e6e6;
  --mp-color-neutral-default: #666666;
  --mp-color-neutral-dark: #1d1d1f;
  --mp-color-grey-50: #ffffff00;
  --mp-color-grey-100: #f8f8f8;
  --mp-color-grey-200: #e6e6e6;
  --mp-color-grey-300: #cccccc;
  --mp-color-grey-400: #b3b3b3;
  --mp-color-grey-500: #999999;
  --mp-color-grey-600: #808080;
  --mp-color-grey-700: #666666;
  --mp-color-grey-800: #4d4d4d;
  --mp-color-grey-900: #333333;
  --mp-color-grey-950: #33333300;
  --mp-color-grey-white: #ffffff;
  --mp-color-grey-black: #1d1d1f;
  --mp-color-border-a-default: #cccccc;
  --mp-color-border-a-error: #de2829;
  --mp-color-border-a-hover: #cccccc;
  --mp-color-border-a-disabled: #b3b3b3;
  --mp-color-border-a-focus: #118dde;
  --mp-color-border-a-selected: #118dde;
  --mp-color-border-b-default: #cccccc;
  --mp-color-border-b-error: #cccccc;
  --mp-color-border-b-hover: #ffbb00;
  --mp-color-border-b-selected: #ffbb00;
  --mp-color-border-b-disabled: #b3b3b3;
  --mp-color-border-b-focus: #118dde;
  --mp-color-border-c-10: #e6e6e6;
  --mp-color-border-c-20: #1299f2;
  --mp-color-border-c-30: rgba(255, 255, 255, 0);
  --mp-color-border-c-40: #b3b3b3;
  --mp-color-border-c-50: #e6e6e6;
  --mp-color-surface-10: #ffffff;
  --mp-color-surface-20: #f8f8f8;
  --mp-color-surface-30: #f8f8f8;
  --mp-color-surface-40: #fffcf1;
  --mp-color-surface-50: #ffffff;
  --mp-color-surface-60: #ffffff;
  --mp-color-surface-70: rgba(255, 255, 255, 0);
  --mp-color-text-10: #333333;
  --mp-color-text-20: #666666;
  --mp-color-text-30: #808080;
  --mp-color-text-40: #b3b3b3;
  --mp-color-text-45: #cccccc;
  --mp-color-text-50: #e6e6e6;
  --mp-color-text-05: #1d1d1f;
  --mp-color-status-warning: #ff4a40;
  --mp-color-status-error: #de2829;
  --mp-color-status-success: #ffbb00;
  --mp-color-status-info: #333333;
  --mp-color-disabled-background: #e6e6e6;
  --mp-color-disabled-foreground: #cccccc;
  --mp-color-disabled-content: #b3b3b3;
  --mp-color-disabled-border: #b3b3b3;
  --mp-focus: #118dde;
  --mp-space-10: 2px;
  --mp-space-20: 4px;
  --mp-space-30: 8px;
  --mp-space-40: 12px;
  --mp-space-50: 16px;
  --mp-space-55: 20px;
  --mp-space-60: 24px;
  --mp-space-70: 32px;
  --mp-space-80: 40px;
  --mp-space-90: 48px;
  --mp-space-100: 64px;
  --mp-space-110: 80px;
  --mp-space-120: 96px;
  --mp-space-130: 160px;
  --mp-radius-10: 3px;
  --mp-radius-20: 5px;
  --mp-radius-30: 10px;
  --mp-radius-40: 15px;
  --mp-radius-full: 9999px;
  --mp-shadow-shallow: 0 8px 24px 0 rgba(29, 29, 31, 0.05);
  --mp-shadow-medium: 0 8px 24px 0 rgba(29, 29, 31, 0.1);
  --mp-shadow-deep: 0 8px 24px 0 rgba(29, 29, 31, 0.2);
  --mp-h1-bold: 700 28px/34px "source sans pro";
  --mp-h2-bold: 700 24px / normal "source sans pro";
  --mp-h3-bold: 700 20px / normal "source sans pro";
  --mp-h4-bold: 700 20px / normal "source sans pro";
  --mp-h5-bold: 700 18px / normal "source sans pro";
  --mp-h6-bold: 700 16px / normal "source sans pro";
  --mp-h1-semibold: 600 28px/34px "source sans pro";
  --mp-h2-semibold: 600 24px / normal "source sans pro";
  --mp-h3-semibold: 600 20px / normal "source sans pro";
  --mp-h4-semibold: 600 20px / normal "source sans pro";
  --mp-h5-semibold: 600 18px / normal "source sans pro";
  --mp-h6-semibold: 600 16px / normal "source sans pro";
  --mp-h1-regular: 400 28px/34px "source sans pro";
  --mp-h2-regular: 400 24px / normal "source sans pro";
  --mp-h3-regular: 400 20px / normal "source sans pro";
  --mp-h4-regular: 400 20px / normal "source sans pro";
  --mp-h5-regular: 400 18px / normal "source sans pro";
  --mp-h6-regular: 400 16px / normal "source sans pro";
  --mp-body1-bold: 700 16px / normal "source sans pro";
  --mp-body2-bold: 700 14px / normal "source sans pro";
  --mp-body3-bold: 700 12px / normal "source sans pro";
  --mp-body1-semibold: 600 16px / normal "source sans pro";
  --mp-body2-semibold: 600 14px / normal "source sans pro";
  --mp-body3-semibold: 600 12px / normal "source sans pro";
  --mp-body1-regular: 400 16px / normal "source sans pro";
  --mp-body2-regular: 400 14px / normal "source sans pro";
  --mp-body3-regular: 400 12px / normal "source sans pro";
  --mp-margin-body1: 8px;
  --mp-margin-body2: 8px;
  --mp-margin-body3: 4px;
  --mp-margin-h1: 16px;
  --mp-margin-h2: 12px;
  --mp-margin-h3: 8px;
  --mp-margin-h4: 8px;
  --mp-margin-h5: 8px;
  --mp-margin-h6: 8px;
  --mp-font-primary: "source sans pro";
  --mp-button-square-radius: 5px;
  --mp-button-oval-radius: 9999px;
  --mp-floating-border-radius: 5px;
}
@media only screen and (min-width: 672px) {
  [data-theme="light"] {
    --mp-h1-bold: 700 36px/42px "source sans pro";
    --mp-h2-bold: 700 28px / normal "source sans pro";
    --mp-h3-bold: 700 24px / normal "source sans pro";
    --mp-h4-bold: 700 20px / normal "source sans pro";
    --mp-h5-bold: 700 18px / normal "source sans pro";
    --mp-h6-bold: 700 16px / normal "source sans pro";
    --mp-h1-semibold: 600 36px/42px "source sans pro";
    --mp-h2-semibold: 600 28px / normal "source sans pro";
    --mp-h3-semibold: 600 24px / normal "source sans pro";
    --mp-h4-semibold: 600 20px / normal "source sans pro";
    --mp-h5-semibold: 600 18px / normal "source sans pro";
    --mp-h6-semibold: 600 16px / normal "source sans pro";
    --mp-h1-regular: 400 36px/42px "source sans pro";
    --mp-h2-regular: 400 28px / normal "source sans pro";
    --mp-h3-regular: 400 24px / normal "source sans pro";
    --mp-h4-regular: 400 20px / normal "source sans pro";
    --mp-h5-regular: 400 18px / normal "source sans pro";
    --mp-h6-regular: 400 16px / normal "source sans pro";
    --mp-body1-bold: 700 16px / normal "source sans pro";
    --mp-body2-bold: 700 14px / normal "source sans pro";
    --mp-body3-bold: 700 12px / normal "source sans pro";
    --mp-body1-semibold: 600 16px / normal "source sans pro";
    --mp-body2-semibold: 600 14px / normal "source sans pro";
    --mp-body3-semibold: 600 12px / normal "source sans pro";
    --mp-body1-regular: 400 16px / normal "source sans pro";
    --mp-body2-regular: 400 14px / normal "source sans pro";
    --mp-body3-regular: 400 12px / normal "source sans pro";
  }
}
@media only screen and (min-width: 1280px) {
  [data-theme="light"] {
    --mp-h1-bold: 700 40px/48px "source sans pro";
    --mp-h2-bold: 700 28px / normal "source sans pro";
    --mp-h3-bold: 700 24px / normal "source sans pro";
    --mp-h4-bold: 700 24px / normal "source sans pro";
    --mp-h5-bold: 700 20px / normal "source sans pro";
    --mp-h6-bold: 700 18px / normal "source sans pro";
    --mp-h1-semibold: 600 40px/50px "source sans pro";
    --mp-h2-semibold: 600 28px / normal "source sans pro";
    --mp-h3-semibold: 600 24px / normal "source sans pro";
    --mp-h4-semibold: 600 24px / normal "source sans pro";
    --mp-h5-semibold: 600 20px / normal "source sans pro";
    --mp-h6-semibold: 600 18px / normal "source sans pro";
    --mp-h1-regular: 400 40px/48px "source sans pro";
    --mp-h2-regular: 400 28px / normal "source sans pro";
    --mp-h3-regular: 400 24px / normal "source sans pro";
    --mp-h4-regular: 400 24px / normal "source sans pro";
    --mp-h5-regular: 400 20px / normal "source sans pro";
    --mp-h6-regular: 400 18px / normal "source sans pro";
    --mp-body1-bold: 700 16px / normal "source sans pro";
    --mp-body2-bold: 700 14px / normal "source sans pro";
    --mp-body3-bold: 700 12px / normal "source sans pro";
    --mp-body1-semibold: 600 16px / normal "source sans pro";
    --mp-body2-semibold: 600 14px / normal "source sans pro";
    --mp-body3-semibold: 600 12px / normal "source sans pro";
    --mp-body1-regular: 400 16px / normal "source sans pro";
    --mp-body2-regular: 400 14px / normal "source sans pro";
    --mp-body3-regular: 400 12px / normal "source sans pro";
    --mp-margin-body1: 16px;
    --mp-margin-body2: 16px;
    --mp-margin-body3: 8px;
  }
}
@media only screen and (min-width: 1312px) {
  [data-theme="light"] {
    --mp-h1-bold: 700 42px/50px "source sans pro";
    --mp-h2-bold: 700 32px / normal "source sans pro";
    --mp-h3-bold: 700 28px / normal "source sans pro";
    --mp-h4-bold: 700 24px / normal "source sans pro";
    --mp-h5-bold: 700 20px / normal "source sans pro";
    --mp-h6-bold: 700 18px / normal "source sans pro";
    --mp-h1-semibold: 600 42px/50px "source sans pro";
    --mp-h2-semibold: 600 32px / normal "source sans pro";
    --mp-h3-semibold: 600 28px / normal "source sans pro";
    --mp-h4-semibold: 600 24px / normal "source sans pro";
    --mp-h5-semibold: 600 20px / normal "source sans pro";
    --mp-h6-semibold: 600 18px / normal "source sans pro";
    --mp-h1-regular: 400 42px/48px "source sans pro";
    --mp-h2-regular: 400 32px / normal "source sans pro";
    --mp-h3-regular: 400 28px / normal "source sans pro";
    --mp-h4-regular: 400 24px / normal "source sans pro";
    --mp-h5-regular: 400 20px / normal "source sans pro";
    --mp-h6-regular: 400 18px / normal "source sans pro";
    --mp-body1-bold: 700 16px / normal "source sans pro";
    --mp-body2-bold: 700 14px / normal "source sans pro";
    --mp-body3-bold: 700 12px / normal "source sans pro";
    --mp-body1-semibold: 600 16px / normal "source sans pro";
    --mp-body2-semibold: 600 14px / normal "source sans pro";
    --mp-body3-semibold: 600 12px / normal "source sans pro";
    --mp-body1-regular: 400 16px / normal "source sans pro";
    --mp-body2-regular: 400 14px / normal "source sans pro";
    --mp-body3-regular: 400 12px / normal "source sans pro";
  }
}