/* Kaboom: chalk on a dark crate. Every colour, font, radius, line and easing is a token; base.css and site.css only
   read them. The palette and its budget are in DESIGN.md: coal and rock 75, chalk 18, red 3, spark 3, states 1.
   Red means one thing: the blast (the coin that blew up, the burning fuse). Spark yellow means one thing: $KABOOM. */
@font-face { font-family: 'Fredoka'; src: url(/fonts/fredoka.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/fonts/jetbrains-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* the crate */
  --coal: #141114;
  --bg: #141114;
  --bg-2: #181418;
  --surface: #1E1A1E;
  --surface-2: #2A242A;
  --rock-3: #3A333A;

  /* chalk lines: drawn, not glowing */
  --line: rgba(244, 237, 225, 0.10);
  --line-2: rgba(244, 237, 225, 0.22);
  --line-3: rgba(244, 237, 225, 0.5);

  --chalk: #F4EDE1;
  --ink: #F4EDE1;
  --ink-2: #C9C0B3;
  --muted: #9A9087;

  /* the blast */
  --accent: #FF4127;
  --accent-ink: #FF6A52;
  --on-accent: #141114;
  /* $KABOOM */
  --spark: #FFCC33;
  --on-spark: #141114;

  --good: #5BD49A;
  --bad: #FF8A7A;
  --warn: #F2B640;

  --font-display: 'Fredoka', ui-rounded, ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --stroke: 1.5px;
  --border: var(--stroke) solid var(--line-2);
  --border-ink: var(--stroke) solid var(--line-3);
  /* the one shadow: a hard black offset, a crate on a crate */
  --shadow: 3px 3px 0 #000;
  --shadow-ink: 0 3px 0 #000;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.3, 1.6, 0.5, 1);
  --t-fast: 120ms;
  --t: 260ms;

  --wrap: 1220px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 66px;
}