/* ==========================================================================
   Design tokens
   Change colors, type, spacing and motion for the whole site from here.
   ========================================================================== */

:root {
  /* Colors: light sections */
  --bg: #ffffff;
  --ink: #181818;
  --mute: #18181899;
  --rule: #18181830;
  --paper: #eeeeee;

  /* Colors: dark sections */
  --dk: #181818;
  --dk-ink: #ffffff;
  --dk-mute: #ffffff99;
  --dk-rule: #ffffff33;

  /* Type */
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale */
  --xs: 8px;
  --sm: 16px;
  --md: 24px;
  --xl: 32px;
  --xl2: 40px;
  --xl3: 64px;
  --xl4: 80px;
  --xl5: 96px;
  --xl6: 128px;
  --gut: clamp(16px, 2.4vw, 32px);
  --hdr-h: 64px;

  /* Motion: easing curves */
  --ease: cubic-bezier(.3, 0, 0, 1);          /* default, strong ease-out */
  --ease-out: cubic-bezier(.16, 1, .3, 1);    /* expo-out, used for reveals */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* small overshoot for tiny UI */

  /* Motion: durations */
  --dur-fast: .2s;
  --dur-base: .4s;
  --dur-slow: .8s;
  --dur-reveal: 1.2s;

  /* Motion: scroll reveals */
  --reveal-distance: 40px;
  --reveal-blur: 8px;
  --word-stagger: 60ms;

  color-scheme: light;
}