/* ─────────────────────────────────────────────
   WonderBear Spacing, Radius & Shadow Tokens
   ───────────────────────────────────────────── */

:root {

  /* ── Spacing scale (shared, px-based) ── */
  --wb-sp-1:   4px;
  --wb-sp-2:   8px;
  --wb-sp-3:  16px;
  --wb-sp-4:  24px;
  --wb-sp-5:  32px;
  --wb-sp-6:  48px;
  --wb-sp-7:  64px;

  /* ── Border radius ── */
  --wb-r-xs:   4px;
  --wb-r-sm:   8px;
  --wb-r-md:  16px;
  --wb-r-lg:  24px;
  --wb-r-xl:  32px;
  --wb-r-pill: 9999px;   /* full capsule / chips */

  /* ── Shadows — TV (dark surface) ── */
  --wb-tv-shadow-card:
    0 8px 24px rgba(0, 0, 0, 0.35);

  /*
   * Focus ring — 3-layer:
   *   1. Inner dark separation halo (reads on bright watercolor zones)
   *   2. Amber main ring
   *   3. Outer soft amber glow
   */
  --wb-tv-shadow-focus:
    0 0 0 2px rgba(26, 15, 10, 0.85),
    0 0 0 6px var(--wb-tv-focus),
    0 0 32px 4px var(--wb-tv-focus-soft);

  /* ── Shadows — H5 (light surface) ── */
  --wb-h5-shadow-card:
    0 4px 20px rgba(255, 138, 61, 0.08);

  --wb-h5-shadow-btn:
    0 4px 12px rgba(0, 0, 0, 0.12);

  --wb-h5-shadow-hint:
    0 6px 20px rgba(160, 103, 61, 0.25);

  /* ── TV viewport ── */
  --wb-tv-vp-w: 1920px;
  --wb-tv-vp-h: 1080px;
}