/* ==================================================================
   HashDucks design tokens

   The page is a pond at two in the morning lit by an arcade cabinet.
   Water is cold and desaturated. The duck is the only warm thing on
   the screen, so amber is reserved for the one element that matters
   on any given view and never used as decoration.
   ================================================================== */

:root {
  /* ---- water ---------------------------------------------------- */
  --abyss: #050d11; /* bottom of the gauge, page behind everything  */
  --water: #0a181e; /* page ground                                  */
  --silt: #0f242c; /* panel                                         */
  --silt-hi: #16323c; /* panel raised / hover                       */
  --reed: #1e434f; /* hairline, borders                             */
  --reed-hi: #2d6070; /* border on focus or hover                   */

  /* ---- light ---------------------------------------------------- */
  --foam: #d8efe9; /* primary text, foam white with green in it     */
  --drift: #7ba0a4; /* secondary text                               */
  --silt-text: #4d7078; /* tertiary, disabled                       */

  /* ---- the duck ------------------------------------------------- */
  --bill: #ff9e1b; /* the accent. bills and feet.                   */
  --bill-hi: #ffc04f;
  --bill-deep: #c26c00;
  --on-bill: #1a0e00; /* text on an amber fill                      */

  /* ---- signals -------------------------------------------------- */
  --depth: #45e0c4; /* hash data, chain data, "you went deep"       */
  --depth-hi: #9bf5e2;
  --rare: #ff5f9e; /* one of ones only. almost never used.          */
  --rare-hi: #ffa3c8;
  --kill: #ff6b5a; /* something failed                              */
  --on-depth: #041513;

  /* ---- the grid -------------------------------------------------
     Every length on this site is a whole number of --px. Nothing
     lands on a half pixel, which is what keeps the bitmap type and
     the 1px rules crisp at any zoom.                               */
  --px: 4px;
  --rule: 1px;

  /* ---- type ----------------------------------------------------- */
  --display: 'Pixelify Sans', 'Trebuchet MS', sans-serif;
  --label: 'Silkscreen', 'Courier New', monospace;
  --body: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Numbers are the whole point of this site, so they get their own
     face rather than borrowing the display one. A bitmap face is
     charming in a headline and unreadable in a hashrate: 3, 8 and 9
     stop being distinguishable at a glance. Plex Mono keeps tabular
     figures, real weight, and stays legible at 11px and at 54px. */
  --numeric: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --numeric-w: 600;

  --t-hero: clamp(38px, 7vw, 76px);
  --t-h1: clamp(28px, 4.4vw, 46px);
  --t-h2: clamp(21px, 2.6vw, 28px);
  --t-h3: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-label: 10px;
  --t-num: clamp(24px, 3.4vw, 38px);

  --lead-read: 1.62;
  --lead-flat: 1.15;
  --track-label: 0.16em;

  /* ---- layout --------------------------------------------------- */
  --page: 1240px;
  --gutter: calc(var(--px) * 6);
  --bar-h: calc(var(--px) * 16);

  /* ---- motion ---------------------------------------------------
     Pixel things move in pixels. Nothing on this site eases on a
     smooth curve; everything lands on a step. This one rule does
     more for the feel of the page than any single effect.          */
  --step-fast: 90ms;
  --step: 160ms;
  --step-slow: 280ms;
  --steps-3: steps(3, end);
  --steps-4: steps(4, end);
  --steps-6: steps(6, end);

  color-scheme: dark;
}

@media (max-width: 640px) {
  :root {
    --px: 3px;
    --t-body: 14px;
    --gutter: calc(var(--px) * 5);
  }
}

/* The gauge and the hash rain are the load-bearing motion on this
   site. When someone asks for less of it we do not just slow things
   down, we swap to a readout that updates a few times a second and
   holds still between updates. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --step-fast: 1ms;
    --step: 1ms;
    --step-slow: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}