/* ============================================================
   paneo — SPACING, RADII, BORDERS, SHADOWS
   A calm 4px-based rhythm. Generous panel padding, soft 8–12px
   radii, single hairline borders instead of heavy shadows —
   the UI reads as flat, layered surfaces, not floating cards.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 22px;
  --space-9: 24px;
  --space-10: 28px;
  --space-12: 40px;
  --space-16: 64px;

  /* ---- Radii ---- */
  --radius-sm:  6px;    /* chips, number squares, small buttons */
  --radius-md:  8px;    /* buttons, inputs, selects */
  --radius-lg:  10px;   /* cards, facade tiles, drop zone */
  --radius-xl:  12px;   /* outer panels, sections */
  --radius-pill: 20px;  /* badges */

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-dashed: 1.5px dashed var(--border);
  --border-hairline: 1px solid var(--border);

  /* ---- Shadows (used sparingly — surfaces are mostly flat) ---- */
  --shadow-none: none;
  --shadow-pop:  0 8px 28px rgba(0, 0, 0, 0.45);

  /* ---- Layout ---- */
  --content-max: 1100px;   /* main column width */
  --header-pad-y: 22px;
  --header-pad-x: 28px;

  /* ---- Motion ---- */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
}