/* ============================================================
   /resolve — Foundations : Spacing · Radius · Elevation · Motion
   Load after colors_and_type.css.
   The brand reads sharp and structural: small radii, hairline
   rules over heavy shadows, fast & flat motion. Restraint first.
   ============================================================ */

:root {
  /* ---------- SPACING (4px base grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --gutter: 24px;
  --page-margin: clamp(20px, 5vw, 80px);
  --max-content: 1200px;

  /* ---------- RADIUS (sharp by default) ---------- */
  --radius-0: 0px;        /* default — square, structural    */
  --radius-sm: 2px;       /* inputs, chips                   */
  --radius-md: 4px;       /* cards, buttons                  */
  --radius-lg: 8px;       /* large panels (rare)             */
  --radius-pill: 999px;   /* status pills only               */

  /* ---------- ELEVATION ---------- */
  /* Prefer hairline borders. Shadows are quiet & cool. */
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgba(14,18,23,0.06);
  --shadow-2: 0 2px 8px rgba(14,18,23,0.08);
  --shadow-3: 0 8px 24px rgba(14,18,23,0.10);
  --shadow-focus: 0 0 0 3px var(--rs-orange-200);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---------- ELEVATION HELPERS ---------- */
.rs-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.rs-card--rule {           /* the signature: top accent rule */
  border-top: 2px solid var(--accent);
}
.rs-hairline { border: 1px solid var(--border); }
.rs-divider { height: 1px; background: var(--border); border: 0; }