/* Blisscord design tokens: the one palette, type and shape scale every web
   surface draws from (the apex site, the developer portal, the public docs,
   the admin panel and the global bar). Served at /assets/tokens.css on every
   host; the faces themselves come from /assets/fonts.css (web.go), which
   points at the hosted web client's mirror of Discord's own font files.

   The colours are Discord's client palette (dark theme) and its marketing
   site's indigo; names follow what they are for, not where they came from. */
:root {
  /* Type */
  --font: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "ABC Ginto Nord", "gg sans", "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "gg mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Brand */
  --blurple: #5865f2;
  --blurple-hover: #4752c4;
  --blurple-active: #3c45a5;
  --blurple-soft: rgba(88, 101, 242, .16);
  --blurple-light: #949cf7;
  --fuchsia: #eb459e;
  --green: #23a559;
  --green-btn: #248046;
  --green-btn-hover: #1a6334;
  --yellow: #f0b232;
  --red: #da373c;
  --red-hover: #a12828;
  --red-text: #fa777c;
  --green-text: #57f287;
  --link: #00a8fc;

  /* Client surfaces, darkest to lightest */
  --bg-floating: #111214;
  --bg-0: #1e1f22;
  --bg-sidebar-foot: #232428;
  --bg-1: #2b2d31;
  --bg-2: #313338;
  --bg-3: #383a40;
  --bg-hover: #404249;
  --bg-mod-hover: rgba(78, 80, 88, .3);
  --bg-mod-active: rgba(78, 80, 88, .48);
  --bg-mod-selected: rgba(78, 80, 88, .6);
  --btn-secondary: #4e5058;
  --btn-secondary-hover: #6d6f78;
  --border: #3f4147;
  --border-subtle: rgba(255, 255, 255, .06);
  --border-strong: rgba(255, 255, 255, .12);

  /* Text */
  --text: #dbdee1;
  --text-strong: #f2f3f5;
  --text-label: #b5bac1;
  --muted: #949ba4;
  --text-faint: #6d6f78;

  /* Marketing indigo */
  --indigo-0: #04041b;
  --indigo-1: #0b0b3f;
  --indigo-2: #161675;
  --indigo-3: #23239c;
  --indigo-glass: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .07));
  --indigo-glass-edge: rgba(255, 255, 255, .14);

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-low: 0 1px 0 rgba(4, 4, 5, .2), 0 1.5px 0 rgba(6, 6, 7, .05), 0 2px 0 rgba(4, 4, 5, .05);
  --shadow-mid: 0 4px 12px rgba(0, 0, 0, .28);
  --shadow-high: 0 8px 24px rgba(0, 0, 0, .4);
  --ease: cubic-bezier(.2, .8, .2, 1);
}