/* Wiggleverse — Spacing, radius, shadow, layout & motion tokens
   Derived from the marketing-site CSS. The brand has almost no shadow system —
   depth is carried by surface color + hairline borders, not drop shadows. */

:root {
  /* ---- Spacing scale (rem) ---- */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .7rem;
  --space-4: 1rem;
  --space-5: 1.2rem;
  --space-6: 1.6rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Section rhythm — fluid vertical padding for page bands */
  --section-pad: clamp(3rem, 7vw, 5.5rem);
  --page-hero-pad: clamp(2.8rem, 6vw, 4.5rem);

  /* ---- Layout ---- */
  --wrap-max: 1080px;     /* content column */
  --wrap-gutter: 92vw;    /* width: min(--wrap-max, --wrap-gutter) */
  --measure-prose: 68ch;  /* reading measure for prose blocks */

  /* ---- Radii ---- */
  --radius-card: 14px;    /* path-cards, build-cards */
  --radius-panel: 12px;   /* principle tiles */
  --radius-sm: 4px;       /* focus ring rounding */
  --radius-pill: 999px;   /* buttons, tags, notices */
  --radius-mark: 26px;    /* favicon tile rounding */

  /* ---- Borders ---- */
  --border-hair: 1px;     /* default hairline */
  --border-card-w: 1px;
  --btn-border-w: 1.5px;  /* ghost button / focus weight */

  /* ---- Elevation ---- *
   * The system avoids drop shadows. "Lift" on hover is a -1 to -3px translateY,
   * not a shadow. These tokens exist for the rare card that needs real elevation. */
  --shadow-none: none;
  --shadow-soft: 0 8px 24px rgba(9, 12, 34, .28);
  --lift-1: translateY(-1px); /* @kind other */ /* buttons */
  --lift-3: translateY(-3px); /* @kind other */ /* cards */

  /* ---- Glass (sticky header) ---- */
  --glass-sky: rgba(14, 18, 48, .82);
  --glass-blur: 10px;

  /* ---- Motion ---- */
  --ease: ease; /* @kind other */
  --dur-fast: .15s; /* @kind other */ /* hover / press transitions */
  --dur-mid: .25s; /* @kind other */ /* mobile nav reveal */
}