/* Generated from brand/tokens.json by tools/build-tokens.php. Do not edit by hand. */

/* Light theme: the website. */
:root {
  --frame: #FFFFFF;
  --surface: #F2F1EE;
  --grid: #D9D4CC;
  --muted: #5E5850;
  --ink: #000000;
  --tangent: #EB6400;
  --tangent-text: #C2410C;
  --tangent-hover: #D95A0A;
  --curve-alt: #1D5FB8;

  --font-display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-math: KaTeX_Main, "CMU Serif", "Latin Modern Roman", "Times New Roman", serif;

  --text-display-size: 72px;
  --text-display-line: 68px;
  --text-display-weight: 700;
  --text-h1-size: 48px;
  --text-h1-line: 52px;
  --text-h1-weight: 700;
  --text-h2-size: 36px;
  --text-h2-line: 40px;
  --text-h2-weight: 600;
  --text-h3-size: 24px;
  --text-h3-line: 30px;
  --text-h3-weight: 600;
  --text-body-size: 18px;
  --text-body-line: 28px;
  --text-body-weight: 400;
  --text-small-size: 15px;
  --text-small-line: 22px;
  --text-small-weight: 400;
  --text-caption-size: 13px;
  --text-caption-line: 18px;
  --text-caption-weight: 500;
  --text-math-size: 20px;
  --text-math-line: 30px;
  --text-math-weight: 400;

  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --space-16: 64px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --stroke-grid: 1px;
  --stroke-axis: 2px;
  --stroke-curve: 4px;
  --stroke-tangent: 5px;
}

/* Dark theme: animation and social images only. Not used by the site. */
[data-theme="dark"] {
  --frame: #000000;
  --surface: #171411;
  --grid: #3A3631;
  --muted: #A39C92;
  --ink: #F2EDE4;
  --tangent: #FF7A1A;
  --tangent-text: #FF7A1A;
  --tangent-hover: #FF9A4D;
  --curve-alt: #8CC4FF;
}