/* Romano Battiti Design System — Shadow Tokens */

:root {
  /* Default card / panel */
  --shadow-card:
    0 1px 2px rgba(32, 34, 46, 0.04),
    0 8px 24px -12px rgba(32, 34, 46, 0.12);

  /* Active/focused card — amber-bordered panel */
  --shadow-card-active:
    0 2px 4px rgba(32, 34, 46, 0.06),
    0 16px 40px -16px rgba(32, 34, 46, 0.20);

  /* Modal / drawer */
  --shadow-modal:
    0 24px 64px -16px rgba(32, 34, 46, 0.45);

  /* Inline popover (draft confirm, etc.) */
  --shadow-popover:
    0 10px 30px -6px rgba(32, 34, 46, 0.28);

  /* Small button shadow */
  --shadow-sm:
    0 1px 2px rgba(32, 34, 46, 0.06);
}

/* ── Dark elevation ──
   Same five names, so no component changes. The strategy is different, though,
   and it is worth stating: in light mode a shadow does the separating, because
   ink on paper reads as depth. On a dark page a soft grey shadow is invisible
   — there is nothing darker than the background to cast onto — so the load
   shifts to the SURFACE STEP (--color-paper #15161C under --color-surface
   #1E2029) and the hairline, and the shadow only tightens the edge underneath.
   Hence: near-black, shorter, less blurred, and slightly stronger than the
   light values, so a modal still detaches from the page behind it.
   A panel stacked on a panel in dark mode is separated by its border, not by
   its shadow. If two dark surfaces need more separation than that, the answer
   is one more surface step, never a bigger shadow. */
[data-theme="dark"] {
  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 6px 18px -10px rgba(0, 0, 0, 0.55);

  --shadow-card-active:
    0 2px 4px rgba(0, 0, 0, 0.45),
    0 12px 30px -14px rgba(0, 0, 0, 0.65);

  --shadow-modal:
    0 20px 48px -14px rgba(0, 0, 0, 0.75);

  --shadow-popover:
    0 8px 24px -6px rgba(0, 0, 0, 0.65);

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.35);
}