/*
 * Every value the site's look uses: colours, fonts, radii, type sizes and spacing. Nothing else
 * in the stylesheets or views writes a colour or size of its own (a CI check enforces it).
 * Chosen design: "Server console", docs/design/design-system.html.
 */
:root {
  --bg: #0b0f17;
  --surface-0: #070a10;   /* inputs and wells, sunk below the page */
  --surface-2: #0f1520;   /* cards, menus, table headers */
  --surface-3: #161e2c;   /* secondary buttons, neutral pills, hover */
  --line: #1c2534;        /* dividers, card borders */
  --line-2: #2a3547;      /* input and secondary-button borders */
  --ink: #e6edf5;         /* headings and body */
  --ink-2: #a3afc0;       /* secondary text, nav, labels */
  --ink-3: #7a8699;       /* hints, timestamps, captions (4.5:1 on cards and the page) */
  --brand: #7c83ff;       /* the primary button, focus, the active tab */
  --brand-hover: #969cff;
  --link: #a5b4fc;
  --go: #22c55e;          /* Connect, and only Connect */
  --go-hover: #34d46c;
  --go-ink: #04140a;
  --live: #4ade80;        /* online, players now, confirmations */
  --danger: #ff6b6b;      /* fake, errors, destructive actions */
  --danger-soft: #fca5a5; /* text on danger tints */
  --info: #7dd3fc;        /* new entries (a rank that's new today) */
  --warn: #fbbf24;
  --discord: #5865f2;
  --mode: #7c83ff;        /* the game or map mode's colour; pages set it */
  --violet: #a855f7;      /* the logo gradient's second stop */
  --white: #fff;          /* text and marks on photos and coloured fills */
  --black: #000;          /* behind images still loading */

  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "Press Start 2P", ui-monospace, monospace; /* the logo, error codes */
  --r-ctl: 4px;
  --r-card: 6px;
  --r-round: 999px;       /* avatars, dots, game-switcher pills */

  /* Type scale: seven sizes */
  --text-xs: 12px;        /* captions, timestamps */
  --text-sm: 13px;        /* labels, hints, buttons */
  --text-ui: 14px;        /* UI text, table cells */
  --text-md: 16px;        /* body */
  --text-lg: 20px;        /* section headings */
  --text-xl: 28px;        /* card numbers, small page headings */
  --text-2xl: 40px;       /* page headings */
  --text-3xl: 64px;       /* display: a game's or map's name */

  /* Spacing steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --page-max: 1280px;
  --shadow-pop: 0 16px 40px rgba(0,0,0,.5);    /* menus */
  --shadow-panel: 0 24px 60px rgba(0,0,0,.55); /* the search filter panel */
  --shadow-card: 0 20px 50px rgba(0,0,0,.5);   /* map cards over a banner */
  --edge: rgba(255,255,255,.14);               /* a light rim on images and filled buttons */
  --edge-faint: rgba(255,255,255,.06);
}