/* n3tworth separates surfaces with 1px hairlines, not shadows.
   The shadow ramp exists for overlays only (dropdown menus, sticky nav). */
:root{
  --hairline-accent:inset 0 0 0 1px var(--flag-red);
  --hairline-accent-outer:0 0 0 1px var(--flag-red);
  --ring-inset-30:inset 0 0 0 30px currentColor;  /* 216px accent square */
  --ring-inset-28:inset 0 0 0 28px currentColor;  /* 155px accent ring */

  --shadow-xs:0 1px 2px rgba(0,0,0,.03);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,.10);
  --shadow-xl:0 24px 64px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  --shadow-overlay:0 20px 48px rgba(0,0,0,.18);
}