/* ============================================================
   MOBILIAN — SPACING, RADIUS, GRID, MOTION
   Base unit 4px. Radius is binary: 0 (almost everything) or full
   (circular controls). Sharp rectangles = engineered precision.
   ============================================================ */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 64px;
  --space-section: 96px; /* between major editorial bands */

  /* ---- Radius (binary: sharp or circular) ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;   /* small toggle pills only */
  --radius-md:   6px;   /* rare dropdown items */
  --radius-full: 9999px;/* circular icon buttons */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--hairline);
  --border-strong:   1px solid var(--hairline-strong);

  /* ---- Layout ---- */
  --container-max: 1440px;
  --gutter: 24px;

  /* ---- Stripe (3-phase current signature) ---- */
  --stripe-height: 4px;
  --stripe-current: linear-gradient(90deg,
      var(--phase-1) 0%,  var(--phase-1) 33.33%,
      var(--phase-2) 33.33%, var(--phase-2) 66.66%,
      var(--phase-3) 66.66%, var(--phase-3) 100%);
  --stripe-current-soft: linear-gradient(90deg,
      var(--phase-1), var(--phase-2), var(--phase-3));

  /* ---- Motion (precise, no bounce) ---- */
  --ease-precise: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-mid:  240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---- Carbon texture (subtle technical surface) ---- */
  --carbon-texture:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px, transparent 4px); /* @kind other */
}