/* ── Design Tokens ──
   Single source of truth for typography, spacing, radius, and semantic colors.
   Import this file BEFORE base.css so all tokens are available everywhere. */

:root {
  /* ── Typography scale ── */
  --fs-2xl:  2.8rem;    /* h1, title slides */
  --fs-xl:   1.8rem;    /* h2, section headings */
  --fs-lg:   1.25rem;   /* h3, card titles, display math */
  --fs-base: 1.10rem;   /* body text, callouts, flow-boxes */
  --fs-sm:   0.98rem;   /* secondary text, captions */
  --fs-xs:   0.88rem;   /* badges, section-tags, nav buttons */
  --fs-2xs:  0.80rem;   /* absolute floor — dense diagram labels only */

  /* ── Spacing scale ── */
  --sp-1: 0.25rem;      /* tight inner gaps (vector cells) */
  --sp-2: 0.5rem;       /* small gaps within components */
  --sp-3: 0.70rem;      /* standard inner padding */
  --sp-4: 1.20rem;      /* card padding, grid gaps */
  --sp-5: 2rem;         /* major section breaks */
  --sp-6: 3rem;         /* hero spacing */

  /* ── Border-radius scale ── */
  --radius-sm:   0.375rem;  /* small chips, pills, inner elements */
  --radius-md:   0.625rem;  /* cards, callouts, flow-boxes, panels */
  --radius-lg:   1rem;      /* stage containers, overlay panels */
  --radius-full: 999px;     /* badges, circular elements */

  /* ── Semantic color backgrounds ── */
  --accent-bg:    rgba(42,79,214,0.08);
  --accent-border: rgba(42,79,214,0.40);
  --green-bg:     rgba(15,110,47,0.08);
  --green-border:  rgba(15,110,47,0.40);
  --red-bg:       rgba(192,28,28,0.08);
  --red-border:    rgba(192,28,28,0.40);
  --orange-bg:    rgba(160,80,0,0.08);
  --orange-border: rgba(160,80,0,0.40);
  --purple-bg:    rgba(90,48,200,0.08);
  --purple-border: rgba(90,48,200,0.40);
  --cyan-bg:      rgba(0,120,144,0.08);
  --cyan-border:   rgba(0,120,144,0.40);
  --yellow-bg:    rgba(106,79,0,0.08);
  --yellow-border: rgba(106,79,0,0.40);
}