/* WEBLAB design tokens. Brand colours are exact; everything else is a semantic role. */
:root {
  /* Brand palette */
  --wl-ink: #141414;
  --wl-accent: #DC3522;
  --wl-accent-hover: #B92C1B;
  --wl-ink-hover: #2B2B2B;
  --wl-white: #FFFFFF;
  --wl-soft: #F7F8F8;
  --wl-hero-bg: linear-gradient(90deg, #FFFFFF 0%, #FAF9F7 100%);
  --wl-body: #465150;
  --wl-text: #1B1D22;
  --wl-line: #DDE1E1;
  --wl-dark: #141414;

  /* Derived roles */
  --wl-line-strong: #B4BCBB;
  --wl-line-soft: #EBEEEE;
  --wl-input-border: #7A8483;
  --wl-error: #A32618;
  --wl-dark-text: #F7F8F8;
  --wl-dark-muted: #B3BBBA;
  --wl-dark-line: rgba(255, 255, 255, .14);

  /* Typography. Nothing else in the stylesheet names a family. Files are self-hosted via fonts.css. */
  --font-heading: "Urbanist", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wl-weight-heading: 800;
  --wl-weight-subheading: 700;
  --wl-tracking-heading: -0.035em;

  --wl-text-h1: clamp(46px, 5.9vw, 84px);
  --wl-text-h2: clamp(36px, 4.6vw, 68px);
  --wl-text-h3: clamp(22px, 2vw, 28px);
  --wl-text-lead: clamp(18px, 1.45vw, 21px);
  --wl-text-body: 17px;
  --wl-text-small: 15px;
  --wl-text-micro: 13px;
  --wl-text-mono: 12px;

  /* Layout */
  --wl-width: 1280px;
  --wl-gutter: clamp(20px, 5vw, 72px);
  --wl-section: clamp(88px, 10vw, 168px);
  --wl-section-tight: clamp(64px, 7vw, 112px);
  --wl-radius: 2px;

  /* Motion */
  --wl-ease: cubic-bezier(.2, .7, .2, 1);
  --wl-fast: 180ms;
}