:root {
  --base: #020104;
  --blue: #0051C3;
  --blue-mid: #0070ff;
  --cyan: #00e0ff;
  --cyan-bright: #8fe9ff;
  --text: #fff;
  --text-soft: #a6b6cc;
  --danger: #ff6b5a;

  /* neumorphism: only on a solid #0b1220 surface, light from the top left, never white */
  --neu: #0b1220;
  --neu-dark: rgba(0, 0, 0, .75);
  --neu-light: rgba(46, 86, 150, .22);

  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;

  --curve: cubic-bezier(.2, .8, .2, 1);

  /* rem, so buttons grow with the visitor's browser font size (58 / 48 / 44 px at the default 16px) */
  --btn-l: 3.625rem;
  --btn-m: 3rem;
  --btn-s: 2.75rem; /* drawn size is 44px so the hit area is never below 44x44 */
  --btn-radius: 20px;
}

@media (max-width: 640px) {
  :root { --btn-l: 3.125rem; }
}