/* The look of the mockups (art/ui/web/watch/*.html): the dark #0a0a0b, the gold, Baloo 2 for display and the system face for body. The motion numbers are
   not here: the shell sets the three fades a stylesheet uses from CONFIG as custom properties on :root (--fade-ms, --picture-fade-ms, --hero-fade-ms), so the
   stylesheet and the page's script read the one value; the press, the hover and the springs are the script's, from `#config`. */
:root {
  --bg: #0a0a0b;
  --surface: #151518;
  --surface-2: #1e1e23;
  --text: #fff;
  --soft: #d4d4d8;          /* secondary text on the dark */
  --softer: #e4e4e7;        /* a logline */
  --muted: #a1a1aa;
  --faint: #8b8b93;
  --line: #2a2a30;
  --gold: #ffc53d;
  --gold-hi: #ffdc73;
  --gold-lo: #f2a516;
  --red: #e5412f;
  --ink: #111;              /* text on gold and on white */
  --display: "Baloo 2", system-ui, sans-serif;
  --body: -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --radius-btn: 8px;
  --radius-big: 14px;
  --radius-card: 8px;
  --radius-band: 16px;

  /* the two gradients every picture fades into the page with (hero art, game art): never a hard edge */
  --mask-left-full: linear-gradient(90deg, transparent 0%, #000 var(--fade-stop, 38%));
  --mask-left: var(--mask-left-full);
  --mask-bottom: linear-gradient(180deg, #000 48%, transparent 100%);
  --mask-all: linear-gradient(#000, #000);        /* no fade: a mask that is whole, to switch one of the two off where they compose */
}