@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Fixed deck scaling ──
   The authored deck is a fixed 1920×1080 stage.
   The viewport scales that stage uniformly; rems stay deterministic. */
html {
  font-size: 30px;
  width: 100%;
  height: 100%;
}

:root {
  --deck-nav-height: 1.8rem;

  /* ── Colours ── */
  --bg: #ffffff;
  --surface: #f2f4fc;
  --surface2: #e4e8f5;
  --border: #5a6490;
  --text: #0c0e1c;
  --text-dim: #3a4268;
  --accent: #1a45c8;
  --accent-glow: rgba(26,69,200,0.20);
  --green: #15743c;
  --green-glow: rgba(21,116,60,0.18);
  --red: #b81818;
  --orange: #9e4a00;
  --purple: #5828b8;
  --yellow: #8c6c00;
  --cyan: #006880;
  --pink: #aa1868;

  /* ── Semantic colour backgrounds & borders ── */
  --accent-bg: rgba(26,69,200,0.07);
  --accent-border: rgba(26,69,200,0.32);
  --green-bg: rgba(21,116,60,0.07);
  --green-border: rgba(21,116,60,0.32);
  --red-bg: rgba(184,24,24,0.07);
  --red-border: rgba(184,24,24,0.32);
  --orange-bg: rgba(158,74,0,0.07);
  --orange-border: rgba(158,74,0,0.32);
  --purple-bg: rgba(88,40,184,0.07);
  --purple-border: rgba(88,40,184,0.32);
  --cyan-bg: rgba(0,104,128,0.07);
  --cyan-border: rgba(0,104,128,0.32);
  --yellow-bg: rgba(140,108,0,0.07);
  --yellow-border: rgba(140,108,0,0.32);

  /* ── Typography scale (7 stops) ── */
  --fs-2xl: 2.8rem;   /* h1, hero titles */
  --fs-xl:  1.8rem;   /* h2 */
  --fs-lg:  1.25rem;  /* h3, card titles, math blocks */
  --fs-base: 1.05rem; /* body text, callouts */
  --fs-sm:  0.92rem;  /* secondary text */
  --fs-xs:  0.82rem;  /* badges, nav, labels */
  --fs-2xs: 0.72rem;  /* absolute floor — dense diagram labels only */

  /* ── Spacing scale (6 stops) ── */
  --sp-1: 0.25rem;
  --sp-2: 0.2rem;
  --sp-3: 0.55rem;
  --sp-4: 1.25rem;
  --sp-5: 2rem;
  --sp-6: 3rem;

  /* ── Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
}