/* ============================================================
   Aproject — Spacing, radii, shadows & motion
   The interface floats on a warm canvas: rounded panels with
   1px hairline borders and soft, low-opacity shadows (never
   heavy drop-shadows). Radii cluster around 8–16px. Motion is
   quick and restrained — 0.12s ease for hover/state, a gentle
   spring for menus & modals; no bounces on content.
   ============================================================ */

:root {
  /* ---------- spacing scale (px) ---------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-10: 22px;
  --space-12: 26px;
  --space-16: 34px;
  --space-20: 40px;

  /* ---------- radii ---------- */
  --radius-xs:   5px;    /* kbd, tiny tags */
  --radius-sm:   6px;    /* menu items, chips */
  --radius-md:   8px;    /* buttons, inputs, nav items */
  --radius-lg:   10px;   /* base --radius */
  --radius-xl:   12px;   /* cards, popovers */
  --radius-2xl:  14px;   /* command palette, modal */
  --radius-3xl:  16px;   /* sidebar panel, composer */
  --radius-pill: 999px;  /* status badges, suggestion chips */

  /* ---------- shadows (warm, low-opacity) ---------- */
  --shadow-xs:    0 1px 1px rgba(0,0,0,.03);
  --shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --shadow-card:  0 6px 18px rgba(0,0,0,.06);                       /* card hover lift */
  --shadow-panel: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.015); /* floating sidebar */
  --shadow-menu:  0 12px 40px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
  --shadow-modal: 0 24px 70px rgba(0,0,0,.30);
  --shadow-focus: 0 0 0 3px var(--sidebar-accent-tint);            /* focus ring glow */

  /* ---------- borders ---------- */
  --border-width: 1px;

  /* ---------- motion ---------- */
  --ease-out:    cubic-bezier(.4, 0, .2, 1);    /* @kind other */
  --ease-spring: cubic-bezier(.34, 1.2, .64, 1); /* @kind other */  /* menus / modals pop-in */
  --dur-fast:    .12s;   /* @kind other */
  --dur-base:    .16s;   /* @kind other */
  --dur-slow:    .22s;   /* @kind other */
}

.dark {
  --shadow-panel: 0 1px 2px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04);
}