/* ============================================================
   Blurt — tokens.css
   Design tokens and @font-face. Loaded before every other sheet.

   FONTS: all three faces are served from this folder. Nothing is
   fetched from fonts.googleapis.com or fonts.gstatic.com — those
   hosts are unreliable to unreachable in China, and a blocking
   stylesheet request to a dead host stalls first paint.
     Bespoke Slab  — Indian Type Foundry / Fontshare (display)
     Barlow        — self-hosted copy, never the Google CDN (body)
     JetBrains Mono— numbers only: timer, scores
   ============================================================ */

@font-face {
  font-family: 'Bespoke Slab';
  src: url('../fonts/BespokeSlab-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bespoke Slab';
  src: url('../fonts/BespokeSlab-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bl-display: 'Bespoke Slab', Georgia, serif;
  --bl-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --bl-num:     'JetBrains Mono', ui-monospace, monospace;

  /* Dark table, cream cards. */
  --bl-bg:      #16151d;
  --bl-bg-2:    #201e2a;
  --bl-bg-3:    #2b2837;
  --bl-line:    #383447;
  --bl-paper:   #faf6ec;
  --bl-paper-2: #efe9da;
  --bl-ink:     #1b1a22;
  --bl-ink-2:   #56525f;
  --bl-muted:   #8a8798;
  --bl-text:    #ece9f2;

  --bl-accent:   #ff5c3a;
  --bl-accent-2: #ffc23a;
  --bl-good:     #2f9e6b;
  --bl-bad:      #d94b3a;

  --bl-r:    10px;
  --bl-r-lg: 18px;
  --bl-s1: 0.25rem;
  --bl-s2: 0.5rem;
  --bl-s3: 0.75rem;
  --bl-s4: 1rem;
  --bl-s5: 1.5rem;
  --bl-s6: 2.25rem;

  --bl-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* z-index scale — always use the var, never a raw number */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 400;
  --z-toast:   900;
}