/* ============================================================
   CAIRN · EFFECTS
   Shadows are restrained — depth comes from surface steps and
   hairline borders. The one expressive effect is the Signal
   "glow", reserved for live/active/traced states.
   ============================================================ */

:root {
  /* ---- Elevation shadows (deep, soft, low-spread — for popovers/dialogs) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.55);
  --shadow-pop: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px var(--line);

  /* ---- Inset hairline (gives controls a crisp top edge) ---- */
  --inset-top: inset 0 1px 0 rgba(247,250,252,0.04);

  /* ---- Signal glow — interactive emphasis, "live" data, focus ---- */
  --glow-sm: 0 0 0 1px var(--signal-700), 0 0 12px -2px var(--signal-glow);
  --glow-md: 0 0 0 1px var(--signal-600), 0 0 24px -4px var(--signal-glow);
  --focus-shadow: 0 0 0 1px var(--bg-canvas), 0 0 0 3px var(--signal-glow);

  /* ---- Grid / lattice backgrounds (the ledger motif) ---- */
  --grid-line: rgba(247,250,252,0.035);
  --grid-dot:  rgba(247,250,252,0.06);
  --bg-grid:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); /* @kind other */
  --bg-grid-size: 32px 32px; /* @kind other */
  --bg-dots:
    radial-gradient(var(--grid-dot) 1px, transparent 1px); /* @kind other */
  --bg-dots-size: 22px 22px; /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.5, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
}