/* Tokenize Anything: the spec sheet. Paper, ink, one electric blue (the frame, the pair, every action, money paid to
   people), flame for burns only. Budget: paper 70, ink 20, blue 7, flame 2, states 1. DESIGN.md has the why. */
@font-face { font-family: 'Archivo'; src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  /* ground and surfaces: one paper, stepped */
  --paper: #F3F3EE;
  --bg: var(--paper);
  --surface: #FFFFFF;
  --surface-2: #EAEAE3;
  --surface-3: #DFDFD6;
  /* ink in three steps, and the text that sits on an ink-filled thing */
  --ink: #0C0D12;
  --ink-2: #3A3C46;
  --muted: #62646E;
  --on-ink: #F3F3EE;
  /* hairlines: ink at 8 / 14 / 24 % */
  --line: rgba(12, 13, 18, .08);
  --line-2: rgba(12, 13, 18, .14);
  --line-3: rgba(12, 13, 18, .24);
  /* the one accent: the frame, the pair, actions, money paid to people (fills and text alike on paper) */
  --blue: #2B2BF0;
  --blue-ink: #1E1EB8;
  --blue-text: #2B2BF0;
  --blue-soft: rgba(43, 43, 240, .08);
  --blue-line: rgba(43, 43, 240, .28);
  /* burns, and nothing else */
  --flame: #FF5A1F;
  --flame-ink: #C2410C;
  --flame-soft: rgba(255, 90, 31, .1);
  /* states, for meaning only */
  --up: #0A8A4E;
  --down: #C9302A;
  --warn: #7A5300;
  --warn-bg: #FFE16B;
  /* the night band: the board's head and the footer */
  --night: #0C0D12;
  --night-2: #17181F;
  --night-ink: #F3F3EE;
  --night-muted: #A2A4AE;
  --night-line: rgba(243, 243, 238, .12);

  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --text: 'Plex', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Plex Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 4px;
  --r-2: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: 64px;
  color-scheme: light;
}