/* ==========================================================================
   jb-playbook — primitive tokens
   Raw scales only. No intent, no theme logic. Semantic tokens (the file
   loaded after this one) map these onto meaning; components never reference
   primitives directly.
   Regenerated 2026-07-05 from spec (philosophy.md, DESIGN_NOTES.md).
   ========================================================================== */

:root {

  /* ---- Color: warm neutrals (paper → ink) ------------------------------- */
  --jb-neutral-0:   #FCFBF8;
  --jb-neutral-50:  #FAF9F5;
  --jb-neutral-100: #F4F2EC;
  --jb-neutral-150: #ECE9E1;
  --jb-neutral-200: #E2DED4;
  --jb-neutral-300: #CCC7BA;
  --jb-neutral-400: #A8A296;
  --jb-neutral-500: #857F73;
  --jb-neutral-600: #6A6459;
  --jb-neutral-700: #4E4941;
  --jb-neutral-800: #35312B;
  --jb-neutral-850: #26231E;
  --jb-neutral-900: #1A1815;
  --jb-neutral-925: #141210;
  --jb-neutral-950: #0C0B09;

  /* ---- Color: brand red ramp -------------------------------------------- */
  --jb-red-50:  #FDECEE;
  --jb-red-100: #FAD5DA;
  --jb-red-200: #F5AAB4;
  --jb-red-300: #F0808F;
  --jb-red-400: #ED5468;   /* accent on dark surfaces */
  --jb-red-500: #E2233B;   /* the brand red */
  --jb-red-600: #C11830;
  --jb-red-700: #9C0F23;   /* danger red — deeper, never fights the brand red */
  --jb-red-800: #7A0C1C;
  --jb-red-900: #530813;

  /* ---- Color: support hues (callouts, syntax) --------------------------- */
  --jb-blue-100: #DCE8F5;
  --jb-blue-300: #7FB3E8;
  --jb-blue-500: #2F6DB5;
  --jb-blue-700: #1D4E86;

  --jb-green-100: #DCEEE2;
  --jb-green-300: #8FBF7F;
  --jb-green-500: #2E7D4F;
  --jb-green-700: #1F5737;

  --jb-amber-100: #F6EBD4;
  --jb-amber-300: #D9A45B;
  --jb-amber-500: #B7791F;
  --jb-amber-700: #9C6410;

  --jb-violet-100: #E6DFF5;
  --jb-violet-300: #B3A1E3;
  --jb-violet-500: #6B4FBB;

  /* ---- Typography -------------------------------------------------------- */
  /* Fraunces: editorial variable serif for display. Nunito: humanist,
     rounded sans for body + UI chrome. Mono stays a system stack per the
     100 KB bundle budget. */
  --jb-font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --jb-font-sans: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --jb-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Type scale. The HOST PAGE sets html { font-size: 118.75% } so 1rem = 19px
     (editorial body size). The library CSS deliberately does NOT set html
     font-size — inside Thinkific we must not restyle the host root. */
  --jb-text-xs:   0.68rem;  /* ~13px  eyebrows, fine print          */
  --jb-text-sm:   0.79rem;  /* ~15px  captions, UI chrome, code     */
  --jb-text-base: 1rem;     /* ~19px  body                          */
  --jb-text-md:   1.11rem;  /* ~21px  dek / lede                    */
  --jb-text-lg:   1.32rem;  /* ~25px  h3                            */
  --jb-text-xl:   1.63rem;  /* ~31px  h2                            */
  --jb-text-2xl:  2.05rem;  /* ~39px  h1 (compact)                  */
  --jb-text-3xl:  2.55rem;  /* ~48px  h1 (lesson title)             */

  --jb-leading-tight: 1.15;
  --jb-leading-snug:  1.35;
  --jb-leading-body:  1.7;
  --jb-leading-code:  1.65;

  --jb-tracking-wide:  0.12em;    /* uppercase eyebrows / labels */
  --jb-tracking-tight: -0.012em;  /* large serif display */

  /* ---- Space scale ------------------------------------------------------- */
  --jb-space-1:  0.25rem;
  --jb-space-2:  0.5rem;
  --jb-space-3:  0.75rem;
  --jb-space-4:  1rem;
  --jb-space-5:  1.25rem;
  --jb-space-6:  1.5rem;
  --jb-space-8:  2rem;
  --jb-space-10: 2.5rem;
  --jb-space-12: 3rem;
  --jb-space-16: 4rem;
  --jb-space-20: 5rem;
  --jb-space-24: 6rem;

  /* ---- Radii ------------------------------------------------------------- */
  --jb-radius-xs: 4px;
  --jb-radius-sm: 6px;
  --jb-radius-md: 10px;
  --jb-radius-lg: 14px;
  --jb-radius-pill: 999px;

  /* ---- Shadows (light-tuned; semantic layer swaps for dark) -------------- */
  --jb-shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.06), 0 1px 6px rgba(26, 24, 21, 0.05);
  --jb-shadow-md: 0 2px 6px rgba(26, 24, 21, 0.07), 0 6px 20px rgba(26, 24, 21, 0.08);
  --jb-shadow-lg: 0 4px 10px rgba(26, 24, 21, 0.09), 0 14px 40px rgba(26, 24, 21, 0.14);

  --jb-shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 6px rgba(0, 0, 0, 0.3);
  --jb-shadow-dark-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.4);
  --jb-shadow-dark-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 14px 40px rgba(0, 0, 0, 0.55);

  /* ---- Motion ------------------------------------------------------------ */
  --jb-dur-fast: 120ms;
  --jb-dur-base: 180ms;
  --jb-dur-slow: 320ms;
  --jb-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --jb-ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);

  /* ---- Z stack ----------------------------------------------------------- */
  --jb-z-pointer-svg: 3;
  --jb-z-bubble: 4;
  --jb-z-popup: 60;
  --jb-z-toggle: 80;
  --jb-z-debug: 100;
}