spacing.css

/* ============================================================
   ELEVATION & MOTION — Chan Compass · Spectrum 2
   Soft, low-spread drop shadows; never heavy. Spectrum easing curves.
   ============================================================ */

:root {
  /* ---- Drop shadows (Spectrum 2 elevation) ---- */
  --shadow-flat:      none;
  --shadow-raised:    0 1px 3px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-elevated:  0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-emphasized:0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  --shadow-dragged:   0 12px 32px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.10);

  /* Accent-tinted glow (used on AI / focused panels) */
  --shadow-accent:    0 2px 12px rgba(2,101,220,.12);

  /* ---- Focus ring ---- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.45, 0, 0.4, 1);  /* @kind other */
  --ease-in:      cubic-bezier(0.5, 0, 1, 1);      /* @kind other */
  --ease-out:     cubic-bezier(0, 0, 0.4, 1);      /* @kind other */
  --ease-in-out:  cubic-bezier(0.45, 0, 0.4, 1);   /* @kind other */

  --duration-fast:    130ms;  /* @kind other */
  --duration-default: 160ms;  /* @kind other */
  --duration-slow:    220ms;  /* @kind other */

  --transition-default: all var(--duration-default) var(--ease-default);
  --transition-colors:  color var(--duration-fast) var(--ease-default),
                        background-color var(--duration-fast) var(--ease-default),
                        border-color var(--duration-fast) var(--ease-default);
}