:root {
  /**
   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
   */

  /* Light theme */
  --light-color-attribute-name: #ef6632;
  --light-color-attribute-value: #1a1aa6;
  --light-color-attribute-editable-value: #1a1aa6;
  --light-color-background: #ffffff;
  --light-color-button-background: #ffffff;
  --light-color-button-background-focus: #ebf1fb;
  --light-color-button-background-hover: #ffffff;
  --light-color-button: #0088fa;
  --light-color-button-disabled: #cfd1d5;
  --light-color-button-focus: #3578e5;
  --light-color-button-hover: #3578e5;
  --light-color-border: #eeeeee;
  --light-color-component-name: #8155cb;
  --light-color-component-name-inverted: #ffffff;
  --light-color-dim: #777d88;
  --light-color-dimmer: #cfd1d5;
  --light-color-dimmest: #eff0f1;
  --light-color-jsx-arrow-brackets: #333333;
  --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
  --light-color-search-match: yellow;
  --light-color-search-match-current: #f7923b;
  --light-color-text-color: #000000;
  --light-color-tree-node-selected: #0088fa;
  --light-color-tree-node-hover: #ebf1fb;

  /* Dark theme */
  --dark-color-attribute-name: #9d87d2;
  --dark-color-attribute-value: #cedae0;
  --dark-color-attribute-editable-value: yellow;
  --dark-color-background: #282c34;
  --dark-color-button-background: #282c34;
  --dark-color-button-background-focus: #3d424a;
  --dark-color-button-background-hover: #282c34;
  --dark-color-button: #61dafb;
  --dark-color-button-disabled: #777d88;
  --dark-color-button-focus: #a2e9fc;
  --dark-color-button-hover: #a2e9fc;
  --dark-color-border: #3d424a;
  --dark-color-component-name: #61dafb;
  --dark-color-component-name-inverted: ##282828;
  --dark-color-dim: #8f949d;
  --dark-color-dimmer: #777d88;
  --dark-color-dimmest: #4f5766;
  --dark-color-jsx-arrow-brackets: #777d88;
  --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
  --dark-color-search-match: yellow;
  --dark-color-search-match-current: #f7923b;
  --dark-color-text-color: #ffffff;
  --dark-color-tree-node-selected: #178fb9;
  --dark-color-tree-node-hover: #3d424a;

  /* Compact density */
  --compact-font-size-monospace-normal: 11px;
  --compact-font-size-monospace-large: 15px;
  --compact-font-size-sans-normal: 12px;
  --compact-font-size-sans-large: 14px;
  --compact-line-height-data: 18px;

  /* Comfortable density */
  --comfortable-font-size-monospace-normal: 13px;
  --comfortable-font-size-monospace-large: 17px;
  --comfortable-font-size-sans-normal: 14px;
  --comfortable-font-size-sans-large: 16px;
  --comfortable-line-height-data: 22px;

  /* GitHub.com system fonts */
  --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
    Courier, monospace;
  --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
    Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

* {
  box-sizing: border-box;

  -webkit-font-smoothing: antialiased;
}
