/* =====================================================
   SHADOWS & EFFECTS
   Two shadow languages stacked on every surface:
   1) an inset top highlight (1px white, ~6% alpha) that
      catches "light from above";
   2) a long, soft, deep drop shadow (large negative spread)
      that floats the panel over the near-black field.
   Inset WELLS invert this: a dark inner shadow that presses
   tracks/inputs into the surface. The light pill gets a bright
   inner top highlight to read as physically raised.
   ===================================================== */
:root {
  /* Raised soft panel (cards, nav, modal) */
  --shadow-panel:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 56px -32px rgba(0, 0, 0, 0.9);
  --shadow-panel-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 64px -28px rgba(0, 0, 0, 0.9);

  /* The tactile light pill (primary button, active nav, toggle knob) */
  --shadow-raised:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(0, 0, 0, 0.12),
    0 5px 13px -4px rgba(0, 0, 0, 0.7);
  --shadow-raised-strong:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(0, 0, 0, 0.12),
    0 12px 26px -8px rgba(0, 0, 0, 0.8);

  /* Dark soft pill (ghost button, socials) */
  --shadow-ghost:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px -10px rgba(0, 0, 0, 0.6);

  /* Pressed-in inset track / well (nav rail, inputs, segmented) */
  --shadow-well:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --shadow-input:
    inset 0 2px 5px rgba(0, 0, 0, 0.5);

  /* Small raised icon tile */
  --shadow-tile:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 5px 14px -8px rgba(0, 0, 0, 0.8);
}