/* ============================================================
   DevEx Research — Spacing, radius, shadow, motion tokens
   Tight, grid-disciplined. 4px radius everywhere (near-square).
   Seams over shadows: depth comes from hairline borders & glows.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* --- Layout --- */
  --container:     960px;   /* @kind spacing */
  --container-wide:1200px;  /* marketing sections */
  --gutter:        32px;

  /* --- Radius — deliberately small. Square is the register. --- */
  --radius-xs:  2px;
  --radius:     4px;        /* default — cards, inputs, buttons */
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* --- Borders --- */
  --hairline: 1px solid var(--border);
  --hairline-faint: 1px solid var(--border-faint);
  --seam: 3px;              /* the signature left-border accent width */

  /* --- Shadows — restrained. Glow > drop-shadow in this system. --- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --glow-signal: 0 0 0 1px var(--signal-glow), 0 0 24px var(--signal-glow);
  --glow-cyan:   0 0 0 1px var(--cyan-glow), 0 0 24px var(--cyan-glow);
  --glow-amber:  0 0 0 1px var(--amber-glow), 0 0 24px var(--amber-glow);

  /* --- Motion --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:    140ms;   /* @kind other */
  --dur:         240ms;   /* @kind other */
  --dur-slow:    300ms;   /* @kind other */   /* scroll-reveal */
  --reveal-shift: 8px;    /* translateY for scroll reveals */

  /* --- Z layers --- */
  --z-base: 0;        /* @kind other */
  --z-raised: 10;     /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-toast: 2000;    /* @kind other */
}