/* Josh Faggart Creative design tokens. Style everything from these. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* Color: the logo is black and white, so the site is too. The work brings the color. */
  --ink: #000;
  --paper: #fff;
  --mute: #666;        /* 5.7:1 on white */
  --rule: #000;
  --hairline: #d9d9d9;
  --wash: #f2f2f2;     /* placeholders, input backgrounds */
  --error: #b00020;

  /* Type */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 14px;
  --step-0: 17px;
  --step-1: clamp(19px, 1.6vw, 22px);
  --step-2: clamp(22px, 2.6vw, 38px);
  --step-3: clamp(32px, 4vw, 56px);
  --step-4: clamp(40px, 6.2vw, 104px);

  /* Space */
  --pad: clamp(16px, 3vw, 40px);
  --gap: clamp(12px, 1.4vw, 20px);
  --section: clamp(56px, 8vw, 120px);
  --max: 1600px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
}