:root {
  /* Shadows are neutral-black and shallow. No coloured or glowing shadows on
     light UI — the only glow in the system is the hose "water pressure" state. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.06);                                  /* resting card */
  --shadow-2: 0 1px 2px rgba(17, 17, 17, 0.05), 0 4px 12px rgba(17, 17, 17, 0.07); /* card hover */
  --shadow-3: 0 8px 28px rgba(17, 17, 17, 0.12);                                 /* sticky header, side cart */
  --shadow-4: 0 18px 48px rgba(17, 17, 17, 0.18);                                /* mega menu, modal */
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-inset-line: inset 0 -1px 0 var(--line);

  /* Signature hose lighting */
  --hose-hover-glow: 0 0 24px rgba(239, 75, 80, 0.35);
  --hose-active-glow: inset 0 0 26px rgba(255, 255, 255, 0.35), 0 0 20px rgba(227, 30, 36, 0.4); /* @kind shadow */

  /* Protection gradients over photography (never a decorative gradient) */
  --scrim-bottom: linear-gradient(180deg, rgba(13, 14, 16, 0) 30%, rgba(13, 14, 16, 0.78) 100%); /* @kind color */
  --scrim-left: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0) 68%); /* @kind color */
  --scrim-dark-left: linear-gradient(90deg, rgba(13, 14, 16, 0.9) 0%, rgba(13, 14, 16, 0.5) 45%, rgba(13, 14, 16, 0) 75%); /* @kind color */
  --metal-sheen: linear-gradient(180deg, #e9ebec 0%, #9aa0a4 46%, #6d7378 54%, #c2c6c9 100%); /* @kind color */
  --hose-body: linear-gradient(180deg, #f0454a 0%, #e31e24 40%, #a11317 100%); /* @kind color */
}