:root {
  /* Fonts. */
  --me-base-font-size: 1rem;
  --me-font-family-sans: 'IBM Plex Sans', Helvetica, "Helvetica Neue", Arial, sans-serif;
  --me-font-weight-medium: 500;
  --me-letter-spacing-loose: .1em;

  /* Colors */
  --me-color-text: #363136;
  --me-color-text-reversed: #fff;
  --me-color-button: #e1e0e1;
  --me-color-button-hover: #9d999d;
  --me-color-button-cancel: #e1e0e1;
  --me-color-button-cancel-hover: #9d999d;
  --me-color-button-save: #fdc400;
  --me-color-button-save-hover: #ff9000;
  --me-color-border: #c3c1c3;
  --me-color-border-focus: #777277;
  --me-color-draggable-focus: #fff;

  /* Spacing */
  --me-space-inset-x-xsmall: 8px;
  --me-space-inset-y-xsmall: 8px;
  --me-space-inset-x-small: 10px;
  --me-space-inset-y-small: 10px;
  --me-space-inset-x: 15px;
  --me-space-inset-y: 15px;
  --me-space-inset-x-large: 30px;
  --me-space-inset-y-large: 30px;
  --me-space-gap-x-minimal: 1px;
  --me-space-gap-y-minimal: 1px;
  --me-space-gap-x-small: 10px;
  --me-space-gap-y-small: 10px;
  --me-space-gap-x: 15px;
  --me-space-gap-y: 15px;
  --me-space-gap-x-large: 15px;
  --me-space-gap-y-large: 15px;
  --me-dialog-header-space-inset-y: 7px;

  /* Transitions */
  --me-transition: .15s ease-in-out;

  /**
   * Components
   */

  /* Dialog */
  --me-dialog-color-background: #ffffff;
  --me-dialog-space-inset-x: 30px;
  --me-dialog-space-inset-y: 30px;

  /* Header */
  --me-header-color-background: #f7f6f7;

  /* Options */
  --me-option-color-text: #363136;
  --me-option-color-text-hover: #222;
  --me-option-color-background: 36, 148, 219;
  --me-option-color-background-hover: 36, 148, 219;
  --me-option-color-border: 36, 148, 219;
  --me-option-color-border-hover: 36, 148, 219;
}