/* ==========================================================================
   NOUN — design tokens
   Palette taken from the reference screenshots: deep navy, warm cream,
   indigo accent, coral secondary. Change a value here, it changes everywhere.
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* colour */
  --navy: #101232;
  --navy-2: #171a45;
  --navy-3: #22265a;
  --cream: #faf8f4;
  --cream-2: #f3f0ea;
  --stone: #e6e4dd;
  --indigo: #5350dc;
  --indigo-deep: #3f3cc4;
  --indigo-soft: #e6e5fa;
  --coral: #ff7f66;
  --coral-deep: #e5533b;
  --ink: #101232;
  --ink-soft: #565b7a;
  --ink-faint: #8a8ea8;
  --on-dark: #f2f1fb;
  --on-dark-soft: #a9acd0;
  --line: rgba(16, 18, 50, 0.14);
  --line-dark: rgba(242, 241, 251, 0.16);
  --ok: #4fd1a0;
  --warn: #f5c451;
  --grad: linear-gradient(90deg, #00b0ff, #8a00ff); /* logo gradient, used very sparingly */

  /* type */
  --font: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-h2: clamp(1.8rem, 1.1rem + 2.1vw, 2.9rem);
  --fs-h3: clamp(1.05rem, 1rem + 0.25vw, 1.22rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.18vw, 1.1rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.7rem;

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 44px);
  --section-y: clamp(56px, 6.4vw, 96px);
  --nav-h: 68px;
  --radius: 3px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}