/* Messenger tokens: colors, type stacks, radii, shadows and sizes only. */
:root {
  /* Type */
  --font: Tahoma, Verdana, "DejaVu Sans", "Segoe UI", sans-serif;
  --font-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --text-xs: 12px;
  --text-s: 13px;
  --text-m: 14px;
  --text-l: 16px;
  --text-xl: 19px;

  /* Window chrome */
  --title-top: #3a8bf0;
  --title: #0a5fd8;
  --title-deep: #0842a8;
  --title-ink: #ffffff;
  --wizz: #f2a000;
  --wizz-deep: #c96f00;
  --window: #ece9d8;
  --window-light: #f7f5ec;
  --window-shade: #d4d0c0;
  --groove: #aca899;
  --pane: #ffffff;
  --pane-border: #7f9db9;
  --menu-hover: #316ac5;
  --select: #dce8fa;
  --select-edge: #7da2ce;

  /* Ink */
  --ink: #1b1b1b;
  --muted: #5b5b5b;
  --link: #0842a8;
  --heading: #0842a8;

  /* Conversation */
  --host-bubble: #eaf2ff;
  --host-edge: #b9cff0;
  --you-bubble: #fff6d8;
  --you-edge: #e5cf85;
  --system-ink: #8a4b00;

  /* Presence and state */
  --online: #3fae2a;
  --away: #f2a000;
  --ready: #2a7a1c;
  --progress: #0842a8;

  /* Buttons */
  --button-edge: #003c74;
  --button-top: #ffffff;
  --button-bottom: #e3e0d3;
  --button-hover: #f8b347;
  --go-top: #52b441;
  --go: #2f8a22;
  --go-deep: #1f6315;
  --focus: #0a5fd8;

  /* Rarity */
  --common: #c8c6df;
  --rare: #9acff0;
  --legendary: #ffd166;
  --legendary-deep: #b37a00;

  /* Backdrop: a generic sky with a rolling hill */
  --sky-top: #2a73d6;
  --sky-mid: #6aa9ec;
  --sky-low: #cfe5f9;
  --hill: #4a9a2b;
  --hill-light: #74bf3f;
  --hill-far: #3d8424;

  /* Shape */
  --radius-s: 3px;
  --radius-m: 5px;
  --radius-l: 8px;
  --shadow-window: 0 18px 50px rgba(8, 40, 110, .38), 0 2px 6px rgba(8, 40, 110, .25);
  --shadow-sheet: 0 -8px 30px rgba(8, 40, 110, .3);
  --shadow-card: 2px 3px 0 rgba(27, 27, 27, .18);

  /* Sizes */
  --hit: 44px;
  --window-max: 1100px;
  --window-height: 860px;
  --threads-w: 244px;
  --room-w: 232px;
  --avatar: 30px;
  --card-w: 248px;
  --slot-w: 84px;
  --pack-w: 144px;
}