/* NX Tech November — tokens. See DESIGN.md for why each value is what it is. */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground */
  --canvas: #F8FAFC;
  --paper: #FFFFFF;

  /* Ink */
  --ink: #0A1826;
  /* Darker than they were. At .62 and .32 the body copy read as grey on a
     white page rather than as text. --ink-faint now sets form labels only:
     the headline and body fades it used to carry are gone, because a line
     holds one colour. */
  --ink-soft: rgba(10, 24, 38, .78);
  --ink-faint: rgba(10, 24, 38, .46);
  --ink-hair: rgba(10, 24, 38, .12);

  /* Nx Blue */
  --nx: #42B5F7;
  --nx-mid: #2E9BE0;
  --nx-deep: #1A6FAE;
  /* Headings. Deeper than --nx-deep and still unmistakably blue: the
     statement sphere runs behind the headline the way the reference's does,
     and #1A6FAE measured 1.9:1 against its core. This holds 8.7:1 on white
     and better than 3:1 on the densest part of the sphere. */
  --heading: #124E7C;

  /* On dark */
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, .62);
  --on-dark-hair: rgba(255, 255, 255, .14);

  /* Type */
  --font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: clamp(2.6rem, 6.4vw, 5.6rem);
  --head: clamp(1.9rem, 3.4vw, 3.1rem);
  --sub: clamp(1.25rem, 2vw, 1.75rem);
  --body: 1.0625rem;
  --small: .875rem;
  --label: .6875rem;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 1480px;
  --section: clamp(5.5rem, 12vw, 11rem);

  /* Shape */
  --radius: 22px;
  --radius-lg: 34px;
  --pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --travel: 620ms;
}