:root {
  /* Subset of https://material.io/design/color/the-color-system.html */
  --chops-red-50: #ffebee;
  --chops-red-700: #d32f2f;
  --chops-purple-50: #f3e5f5;
  --chops-purple-700: #7b1fa2;
  --chops-blue-50: #e3f2fd;
  --chops-blue-100: #bbdefb;
  --chops-blue-300: #64b5f6;
  --chops-blue-700: #1976d2;
  --chops-blue-900: #01579b;
  --chops-green-50: #e8f5e9;
  --chops-green-800: #2e7d32;
  --chops-light-green-50: #f1f8e9;
  --chops-yellow-50: #fffde7;
  --chops-orange-50: #fff3e0;
  --chops-orange-200: #ffcc80;
  --chops-gray-50: #fafafa;
  --chops-gray-200: #eee;
  --chops-gray-300: #e0e0e0;
  --chops-gray-400: #bdbdbd;
  --chops-gray-500: #9e9e9e;
  --chops-gray-600: #757575;
  --chops-gray-700: #616161;
  --chops-gray-800: #424242;
  --chops-blue-gray-50: #eceff1;  /* Similar to grimoire. */

  --chops-primary-header-bg: white;
  --chops-secondary-header-bg: var(--chops-blue-gray-50);
  --chops-sidebar-bg: var(--chops-blue-gray-50);
  --chops-page-bg: white;
  --chops-footer-bg: white;
  --chops-primary-icon-color: var(--chops-gray-800);
  --chops-text-color: #222;

  --chops-normal-border: 1px solid hsl(0, 0%, 83%);
  /* Border color for situations when contrast is important. */
  --chops-accessible-border: 1px solid var(--chops-gray-400);
  --chops-radius: 6px;
  --chops-shadow: none;

  /* TODO(zhangtiff): Replace this with Material Design blue once all
   * instances of links styled with #00c have been replaced. */
  --chops-link-color: #00c;
  --chops-light-accent-color: var(--chops-blue-300);
  --chops-primary-accent-color: var(--chops-blue-700);
  --chops-primary-accent-bg: var(--chops-blue-50);
  --chops-primary-button-bg: var(--chops-primary-accent-color);
  --chops-primary-button-color: white;
  --chops-button-bg: var(--chops-gray-200);
  --chops-button-color: black;
  --chops-button-disabled-bg: var(--chops-gray-300);
  --chops-button-disabled-color: var(--chops-gray-600);
  --chops-button-border: none;
  --chops-button-radius: 4px;
  --chops-choice-bg: var(--chops-blue-gray-50);
  --chops-choice-color: var(--chops-gray-600);
  --chops-active-choice-bg: var(--chops-blue-50);
  --chops-active-choice-color: var(--chops-primary-accent-color);

  --chops-error-bubble-bg: var(--chops-red-50);
  --chops-notice-bubble-bg: var(--chops-orange-50);
  --chops-notice-border: 1px solid var(--chops-orange-200);
  --chops-help-bubble-bg: var(--chops-blue-50);
  --chops-field-error-color: var(--chops-red-700);
  --chops-selected-bg: var(--chops-yellow-50);

  --chops-card-heading-bg: var(--chops-secondary-header-bg);
  --chops-card-details-bg: var(--chops-gray-50);
  --chops-card-border: var(--chops-normal-border);
  --chops-card-content-bg: white;

  --chops-table-header-bg: var(--chops-secondary-header-bg);
  --chops-table-row-bg: white;
  --chops-table-divider: var(--chops-normal-border);

  --chops-main-font-size: 13px;
  --chops-large-font-size: 15px;
  --chops-icon-font-size: 20px;
}


body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Noto', sans-serif;
  line-height: 1.4;
  font-size: var(--chops-main-font-size);
  min-width: 300px;
  background: var(--chops-page-bg);
}