/* ==========================================================================
   tokens — a grading suite: near-black, silver, one calibration cyan
   ==========================================================================

   The colour discipline is the whole point of the site. Everything in the
   interface is achromatic. The ONLY chroma the page is allowed to show comes
   from two places: the calibration cyan (a marker, never a surface) and the
   real RGB dispersion the WebGL prism produces. If you find yourself adding a
   third colour, you have broken the concept.
   ========================================================================== */

:root {
  /* ground */
  --void:      #08090b;
  --void-2:    #0e1013;
  --void-3:    #14171b;

  /* silver — the only type colour, stepped by opacity not by hue */
  --silver:    #d9dce1;
  --silver-2:  rgba(217, 220, 225, 0.66);
  --silver-3:  rgba(217, 220, 225, 0.42);
  --silver-4:  rgba(217, 220, 225, 0.22);
  --line:      rgba(217, 220, 225, 0.13);
  --line-2:    rgba(217, 220, 225, 0.26);

  /* the one marker colour: a monitor-calibration cyan */
  --cyan:      #4de3ff;
  --cyan-dim:  rgba(77, 227, 255, 0.5);

  /* inverted blocks */
  --paper:     #f1f1ef;

  /* type */
  --f-display: "Archivo", "Archivo Expanded", system-ui, sans-serif;
  --f-body:    "Archivo", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-hero:  clamp(2.9rem, 10.4vw, 11rem);
  --t-h2:    clamp(1.9rem, 5vw, 4.4rem);
  --t-h3:    clamp(1.3rem, 2.4vw, 2.1rem);
  --t-body:  clamp(1rem, 1.08vw, 1.19rem);
  --t-lead:  clamp(1.15rem, 1.7vw, 1.6rem);
  --t-meta:  clamp(0.63rem, 0.72vw, 0.73rem);

  /* rhythm */
  --gut:     clamp(1.1rem, 3.2vw, 3rem);
  --sec:     clamp(5rem, 14vh, 11rem);

  /* one curve, everywhere */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}