/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  /* Fonts */
  --font-default: 'SuisseIntl';
  --font-fallback: 'Tahoma', sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family: var(--font-default), var(--font-fallback), var(--font-emoji);
  --code-font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
    'Fira Mono', 'Droid Sans Mono', 'Consolas', 'Roboto Mono', 'Source Code Pro',
    monospace;

  /* Sizes  */
  --font-size-small: 13px;
  --font-size: 14px;
  --font-size-large: 18px;

  /* Line Height */
  --text-line-height: 18px;
  --text-line-height-small: 18px;
  --text-line-height-large: 26px;

  /* Spacing */
  --space-small: 12px;
  --space: 16px;
  --space-large: 22px;

  /* Borders */
  --border-radius-small: 2px;
  --border-radius: 3px;
  --border-radius-large: 4px;
  --border-color: #f3efeb;
  --border-color-dark: #c0bebc;

  /* Overlays */
  --z-index-base: 100;
  --z-index-content: 500;
  --z-index-overlay: 1000;

  /* Colors */
  --ui-white: #fff;
  --ui-white-10: #fafafa;
  --ui-white-20: rgba(255, 255, 255, 0.08);

  --ui-grey-0: #f5f5f5;
  --ui-grey-5: #efefef;
  --ui-grey-10: #f0f0f0;
  --ui-grey-30: #bdbdbd;
  --ui-grey-40: #adacac;
  --ui-grey-50: #a8abb5;
  --ui-grey-50: #b2b2b2;
  --ui-grey-80: #565656;
  --ui-grey-90: rgba(37, 37, 37, 0.88);

  --ui-black: #000;
  --ui-black-10: #101010;
  --ui-black-30: rgba(0, 0, 0, 0.1);
  --ui-black-40: rgba(0, 0, 0, 0.06);

  --color-default: #454545;
  --color-primary: #847bac;
  --color-info: #1887fe;
  --color-success: #3bbf51;
  --color-warning: #ffae00;
  --color-danger: #ff4f45;

  --ui-text-color: #212121;
  --ui-text-color-light: #adacac;
  --ui-text-color-white: var(--ui-white);

  --ui-border-color-primary: var(--ui-grey-10);

  --color-heading: #000;
  --color-link: var(--color-primary);

  --color-dark-text: #fff;
  --color-dark-text-light: #000;
  --color-dark-heading: #fff;
  --color-dark-link: var(--color-info);

  --ui-background-color-primary: var(--ui-white);
  --ui-bubble-incoming-backgorund-color: var(var(--ui-grey-0));

  --ui-pink-10: rgba(255, 79, 69, 0.08);

  --color-online: #1aab3a;

  /* Transition */
  --transition-duration: 125ms;
}