/* Copied from iwanalabs/hq-docs brand/tokens.css. Update it there first. */
/* Iwana Labs design tokens · v1.0 · September 2026
   Source of truth: brand/BRAND.md. Names match the live site's CSS variables. */

:root {
  /* Colour */
  --paper: #f6f7f4;        /* default ground */
  --white: #ffffff;        /* inputs, occasional card on paper */
  --ink: #111512;          /* headings, body, primary buttons */
  --ink-soft: #4a5148;     /* secondary body, lead paragraphs */
  --ink-muted: #676e66;    /* eyebrows, captions, footers (min text on paper) */
  --line: #d7dbd3;         /* hairlines, tick scales, borders; never text */
  --signal: #00a86b;       /* the accent: metrics, ticks, step numerals; not body text */
  --signal-text: #0a7f52;  /* signal for readable text; AA on paper */
  --forest: #14453a;       /* dark surface: closing blocks, section slides */

  /* Type */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, "Courier New", monospace;

  --text-display: clamp(2.75rem, 7vw, 5.25rem);      /* 44–84px, lh 1.1, -0.035em, 500 */
  --text-h1: clamp(2rem, 4.5vw, 3.25rem);            /* 32–52px, lh 1.1, -0.03em, 500 */
  --text-h2: clamp(1.5rem, 2.6vw, 2rem);             /* 24–32px, lh 1.25, -0.025em, 500 */
  --text-h3: 1.375rem;                               /* 22px, lh 1.375, -0.011em, 500/600 */
  --text-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);   /* 17–21px, lh 1.5, ink-soft */
  --text-body: 1.0625rem;                            /* 17px, lh 1.65 */
  --text-small: 0.9375rem;                           /* 15px, lh 1.6 */
  --text-eyebrow: 0.6875rem;                         /* 11px mono, lh 1.45, +0.14em, uppercase */
  --text-button: 0.8125rem;                          /* 13px mono, +0.12em, uppercase */

  --track-display: -0.035em;
  --track-h1: -0.03em;
  --track-h2: -0.025em;
  --track-h3: -0.011em;
  --track-eyebrow: 0.14em;
  --track-button: 0.12em;

  --leading-tight: 1.1;
  --leading-heading: 1.25;
  --leading-body: 1.65;
  --measure: 63ch;

  /* Shape and layout */
  --radius: 2px;           /* buttons only; blocks are square; avatars are round */
  --hairline: 1px solid var(--line);
  --content-max: 72rem;    /* 1152px */
  --gutter: 2rem;
  --section-gap: clamp(6rem, 10vw, 8rem);
}

/* Devices */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  line-height: 1.45;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--marked::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--signal);
  margin-right: 8px;
  vertical-align: middle;
}
.rule { border-top: var(--hairline); }
.tick-scale {
  height: 7px;
  border-top: 1px solid var(--ink);
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 11px);
  background-size: 11px 5px;
  background-repeat: repeat-x;
}
.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.button {
  font-family: var(--font-mono);
  font-size: var(--text-button);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
}
.button--primary { background: var(--ink); color: var(--paper); }
.forest { background: var(--forest); color: var(--paper); }
.forest .button { border-color: var(--paper); color: var(--paper); }