/* ===========================================================================
   Penjester — design tokens
   genre: editorial · macrostructure: marquee hero + board · accent: finding red

   The palette is the product's palette, converted. #E5484D is oklch(63% 0.193
   23) and it means one thing in the extension — a finding — so it means one
   thing here too, and it is kept under 5% of any viewport. Everything else is
   a cool near-black; the hue stays at 258 because that is what Burp's own dark
   theme sits at, and a site that looks nothing like the tool is a different
   kind of lie.

   Three typefaces, self-hosted. Bricolage Grotesque carries display, because
   it has the optical-size axis a 7rem headline needs and does not look like
   every other sans. Newsreader carries running prose, because this site argues
   rather than sells. JetBrains Mono carries evidence, because evidence is
   columns and columns need a monospace. None of them is fetched from a CDN —
   see assets/fonts and the CSP in _headers.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* ---- paper: cool near-black, four steps ------------------------------- */
  --color-paper:        oklch(14% 0.008 258);
  --color-paper-2:      oklch(18% 0.011 258);
  --color-paper-3:      oklch(22% 0.013 258);
  --color-paper-4:      oklch(27% 0.017 258);

  /* ---- ink -------------------------------------------------------------- */
  --color-ink:          oklch(94% 0.006 255);
  --color-ink-2:        oklch(78% 0.014 258);
  --color-ink-mute:     oklch(62% 0.019 258);
  --color-ink-faint:    oklch(50% 0.021 258);

  --color-rule:         oklch(31% 0.018 258);
  --color-hairline:     oklch(24% 0.014 258);

  /* ---- the one red ------------------------------------------------------ */
  --color-accent:       oklch(63% 0.193 23);
  --color-accent-hot:   oklch(69% 0.200 25);
  --color-accent-mute:  oklch(36% 0.095 24);
  --color-accent-wash:  oklch(22% 0.045 24);

  /* ---- verdict colours, the board's whole vocabulary -------------------- */
  --color-held:         oklch(75% 0.015 255);   /* the control held; neutral, no green */
  --color-review:       oklch(82% 0.014 258);   /* a human has to look; the brightest neutral, no amber — one red is the only hue */
  --color-skipped:      oklch(55% 0.015 258);   /* never reached. not clean */

  --color-focus:        oklch(80% 0.150 78);

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-body:    "Newsreader", "Source Serif 4", Georgia, serif;
  --font-ui:      "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs:   0.6875rem;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   clamp(2rem, 3.4vw, 2.75rem);
  --text-4xl:   clamp(2.6rem, 6vw, 4.6rem);
  --text-mark:  clamp(2.9rem, 8.4vw, 7rem);

  --leading-display: 0.96;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-body:    1.62;

  /* ---- 4pt space -------------------------------------------------------- */
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6.5rem;
  --space-4xl:  9.5rem;

  /* ---- rules and radii — tight, ticket-like ----------------------------- */
  --rule-hair:  1px solid var(--color-hairline);
  --rule-mid:   1px solid var(--color-rule);
  --rule-bold:  2px solid var(--color-ink);
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-pill: 999px;

  /* ---- motion ----------------------------------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   460ms;
  --dur-ticker: 72s;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- layout ----------------------------------------------------------- */
  --page:    1280px;
  --measure: 62ch;
  --gutter:  clamp(1.125rem, 4vw, 3.25rem);
}

/* ---- the three faces, self-hosted ---------------------------------------
   woff2 only. Every browser that can run this site has supported it since
   2016, and a .ttf fallback would double the weight to serve nobody.
   `font-display: swap` because a blocking webfont on a docs page is worse
   than one frame of the fallback.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}