/* BetterWoot design tokens for the website. Generated by build.mjs from src/brand.js. Do not edit.
   The fonts are in fonts/ (SIL Open Font License). Google Fonts serves the same
   families (Archivo Black; IBM Plex Mono 400 and 700) if you'd rather link them. */

@font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bw-paper: #F4EDE0; /* Paper */
  --bw-ink: #1E1B18; /* Ink */
  --bw-red: #E2492F; /* Prop Red */
  --bw-yellow: #F2B33D; /* Beanie Yellow */
  --bw-blue: #2B5DA8; /* Cap Blue */
  --bw-paper-dark: #E8DEC9; /* Paper Dark */
  --bw-gray: #5A5550; /* Rotor Gray */
  --bw-red-text: #B23A22; /* Red Text */
  --bw-yellow-hover: #F5C15E;
  --bw-muted-on-paper: #5A5550; /* secondary text on Paper */
  --bw-muted-on-ink: #CFC6B6; /* secondary text on Ink */
  --bw-muted-on-yellow: #4A3A1A; /* secondary text on Yellow */
  --bw-muted-on-blue: #DCE4F2; /* secondary text on Blue */

  --bw-font-display: "Archivo Black", "Arial Black", sans-serif;
  --bw-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bw-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --bw-text-hero: clamp(40px, 7vw, 64px); --bw-leading-hero: 1.02;
  --bw-text-h2: clamp(30px, 4.5vw, 40px); --bw-leading-h2: 1.05;
  --bw-text-h3: 24px; --bw-leading-h3: 1.15;
  --bw-text-lede: 21px; --bw-leading-lede: 1.5;
  --bw-text-body: 17px; --bw-leading-body: 1.6;
  --bw-text-small: 15px; --bw-leading-small: 1.5;
  --bw-text-eyebrow: 13px; --bw-leading-eyebrow: 1;
  --bw-text-data: 15px; --bw-leading-data: 1.4;

  --bw-space-1: 4px; --bw-space-2: 8px; --bw-space-3: 12px; --bw-space-4: 16px; --bw-space-5: 24px; --bw-space-6: 32px; --bw-space-7: 48px; --bw-space-8: 64px; --bw-space-9: 96px;

  --bw-page: 960px;
  --bw-radius: 2px;
  --bw-border: 2px solid var(--bw-ink);
  --bw-shadow: 4px 4px 0 var(--bw-ink);
  --bw-shadow-pressed: 1px 1px 0 var(--bw-ink);
}