/* MDIL — spacing, radii, hairline & shadow tokens. */
:root {
  /* ── Spacing scale ────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 26px;   /* default grid gap */
  --sp-6: 34px;
  --sp-7: 54px;   /* dual-pane gutter */
  --sp-8: 74px;
  --sp-9: 104px;  /* slide horizontal padding */

  /* slide frame */
  --slide-pad-x: 104px;
  --slide-pad-top: 74px;
  --slide-pad-bottom: 70px;

  /* ── Radii ────────────────────────────────────────── */
  --r-xs: 6px;     /* mono pills, small tags */
  --r-sm: 10px;    /* buttons, small boxes */
  --r-md: 13px;    /* banners */
  --r-lg: 16px;    /* cards, tables */
  --r-xl: 18px;    /* feature lanes */
  --r-pill: 100px; /* conf chip, ribbons */

  /* ── Shadows & glows ──────────────────────────────── */
  --shadow-brand: 0 18px 50px -22px rgba(161, 0, 255, .6);
  --shadow-brand-lg: 0 30px 90px -50px rgba(161, 0, 255, .6);
  --shadow-app: 0 50px 120px -60px #000;
  --ring-brand: 0 0 0 1px rgba(161, 0, 255, .25);

  /* ── Background glows (slide washes) ──────────────── */
  --glow-tr: radial-gradient(1300px 820px at 92% -14%, rgba(161, 0, 255, .13), transparent 58%); /* @kind color */
  --glow-bl: radial-gradient(1100px 760px at -8% 116%, rgba(161, 0, 255, .07), transparent 60%); /* @kind color */
  --glow-top: radial-gradient(1200px 900px at 50% -20%, rgba(161, 0, 255, .16), transparent 60%); /* @kind color */
}